[React] #02 Component / Props / State에 대해서

Component에 대해서 알아보자 React에서는 JSX 파일 안에 Component를 만들어서 import하여 사용한다. 쉽게 생각하면, 하나의 함수라고도 생각할수 있고 모듈이라고도 생각할수 있다. 우선 카멜표기법 camelCase, 파스칼표기법 PascalCase 알아야 한다 기본적으로 React는 Component 명은 PascalCase를 사용한다 아래는 코드는 기본Component의 선언문이다

import React from 'react';

export defalut class MainView extends React.Component {
	//...
}

MainView라는 Component는 PascalCase를 사용하고 있다. camelCase 컴포넌트에 사용할 수 없다. 그렇다면, camelCase는 어디서 사용될까? 먼저 아래의 코드를 보자

<button />
<input />
<select />
<img />

예시의 button, input, select, img 태그이다. 기본 HTML 경우는 소문자로 사용한다. 그리고 HTML Tag에는 attribute가 있다. 아래의 코드를 보자

<!-- 일반 HTML -->
<button class="btn-a" onclick="userName();" />

<!-- React JSX -->
<button className="btn-b" onClick={userName()} />

차이점이 바로 보일것이다 React에서의 onclick은 camelCase로 사용하고 있다. 똑같은 예로 onChange가 있다. 그리고 class경우는 className으로 사용하고 있다 React에서는 class를 className으로 사용하고 있다. class는JavaScript의 키워드이기 때문에 className 사용한다 React에서 HTML과 Component간의 충돌이 일어나지 않도록 정해놓은 규칙이라고 생각한다 camelCase와 PascalCase는 코딩 컨벤션을 통해서 적절하게 사용하자!

 

---

 

이제 컴포넌트에 대해서 알아보자 컴포넌트는 대표적으로 2가지 종류가 있다 함수형 컴포넌트는 데이터를 받기만 하고 보여주기만 하는 컴포넌트 클래스 기반 컴포넌트는 데이터도 받고 보여주면서 데이터를 가공하기도 하고 컴포넌트 안에 함수를  통해서 조작을 하기도 한다.

 

- 함수형 컴포넌트

// case 1
function Hello() {
  return <div>Hello!!</div>;
}

// case 2
const Hello = () => {
    return (
    	<div>Hello!!</div>
    )
}

case1과 2의 차이점은 arrow 함수형이냐 아니냐의 차이일 뿐이다 같은 구문이라고 봐도 된다.

 

- 클래스 기반 컴포넌트

class Hello extends React.Component {
  handle = () => {
    //...
  }
  render(){
   return(
    <div>
      ReactComponent!
    </div>
  )
 }
}

DOM 렌더한다고 할때에는 HTML 구문처럼 사용해야 한다 위의 코드의 <Hello /> 컴포넌트를 사용한다고 하면 아래과 같이 작성하면 된다.

ReactDOM.render( 
  <Hello />, 
  document.getElementById('app') 
);

 

---

 

이제 컴포넌트안에서의 Porps, State에 대해서 알아보자 시작 전에 요약하면 Props는 부모로 부터 받는 Data / State는 컴포넌트 안에서의 변화하는 Data라고 이야기 할 수 있다.

 

먼저 함수형 컴포넌트로 확인해보자.

const FunctionComponent = (props) => {
    const { name, game } = props.user
    return ( 
    	<div>{name}</div>
    );
}

const info = {
    name: 'butter',
    game: 'overwatch'
}

ReactDOM.render( 
  <FunctionComponent user={info} />, 
  document.getElementById('app') 
);

console.log를 보면 props.user에 대한 결과 값이 나온다. 컴포넌트의 Parameter 값으로 user를 주었고 info 객체를 넣었다. 그러면 컴포넌트에서는 기본적으로 props라는 객체을 통해서 해당 값에 접근이 가능하다. 아래의 흐름도를 보면 빠르게 이해가 가능하다

함수형 컴포넌트는 dumb component / 클래스 기반 컴포넌트는 smart component 부르기도 한다

 

---

 

지금부터는 클래스 기반 컴포넌트를 설명하겠다. 먼저 Props 대해서 확인해보자

class Hello extends React.Component {
  render(){
    const { name, game } = this.props.user
    return (
      <div>{name}</div>
    )
  }
}

const info = {
  name: 'butter',
  game: 'overwatch'
}

ReactDOM.render( 
  <Hello user={info} />,
  document.getElementById('app')
);

두 구문의 차이점은 this의 사용 여부이다. 클래스 기반의 this를 통해 해당 컴포넌트의 props에 접근할 수 할수있다.

console.log(this); 확인해보면 컴포넌트에 대한 정보를 확인할 수 있다 위에서 props는 부모에게서 받는 값이라고 했다. 다른 컴포넌트의 사용 예를 보자

class Hello extends React.Component {
  render(){
    const { name, game } = this.props.user
    return (
      <div>
       {name}
       <GameName game={game} />
      </div>
    )
  }
}

class GameName extends React.Component {
  render(){
    return(
      <div>
        {this.props.game}
      </div>
    )
  }
}

const info = {
  name: 'butter',
  game: 'overwatch'
}

ReactDOM.render( 
  <Hello user={info} />,
  document.getElementById('app')
);

<GameName /> 컴포넌트에 game key값을 주어 데이터를 전달했다. 그러면 <GameName />의 props의 game에 대한 값을 찾을수 있다. 이렇게 React에서는 컴포넌트간 데이터 전달이 가능하다.

 

또한 Props 경우는 defaultProps를 정할수 있다.

class Hello extends React.Component {
  static defaultProps = {
     name: 'noName'
  }

  render(){
    return (
      <div>{this.props.name}</div>
    )
  }
}

ReactDOM.render( 
  <Hello />,
  // <Hello name="butter" />,
  document.getElementById('app')
);

<Hello /> Props 데이터가 없다면 'noName'를 보여준다. 이렇게 전달되는 데이터가 없어도 기본 뷰를 정할수 있다

state는 컴포넌트 안에서 변경이 가능한 값이라고 할수있다. 아래의 코드를 보자

class Hello extends React.Component {
  state = {
    name: 'butter'
  }

  render(){
    const { name } = this.state
    return (
      <div>{name}</div>
    )
  }
}

ReactDOM.render( 
  <Hello user={info} />,
  document.getElementById('app')
);

butter 값이 브라우저 화면에 보일것이다. 이 때 <div /> 클릭 시 state를 변화를 주어 화면을 변경할 수 있다.

class Hello extends React.Component {
  state = {
    name: 'butter'
  }

  handle = () => {
    this.setState({
      name: 'hello!'
    })
  }

  render(){
    const { name } = this.state
    return (
      <div onClick={this.handle}>{name}</div>
    )
  }
}

ReactDOM.render( 
  <Hello />,
  document.getElementById('app')
);

위의 코드를 보면 div에 onClick 이벤트를 주어 state에 변화를 주었다 state에 변화를 줄때에는 this.setState() 라는 함수를 이용한다 해당 div를 클릭하면 name이라는 값이 변경이 될것이다.

 

위의 흐름도를 보면 쉽게 이해가 가능하다

 

---

 

컴포넌트의 생성까지 간단하게 알아봤다. 컴포넌트의 이제 겨우 시작 단계이다 컴포넌트 안에서는 LifeCycle이 있다 

LifeCycle은 따로 블로그를 작성하여 자세하게 다룰 예정이다 대표적으로 함수형 컴포넌트과 클래스 기반 컴포넌트를 적절히 사용하여 React를 유연하게 사용하자!!