React 함수 컴포넌트(Function Component)

클래스형 컴포넌트에 이어 이번에 소개할 컴포넌트 작성 방식은 함수형 컴포넌트(function component)이다.


const TestComponent = props => {
  return (
    // jsx
  );
};

export default TestComponent;

기본적으로 위와 같이 함수의 형태를 띄는데, 파라메터로 Props를 받아올 수 있다.

한 메소드 안에서 랜더링이 모두 이루어지는 함수형 컴포넌트의 특징을 잘 활용하기 위해 아래처럼 사용하며 기본값도 지정해줄 수 있다.


const TestComponent = ({
  name = 'ian',
  age = 22,
}) => {
  return (
    // jsx
    <div>
      <p>{`${name}님, 내년이면 ${age + 1}살이시네요.`}</p>
    </div>
  );
};

export default TestComponent;

그렇다면 함수형 컴포넌트에서 State를 사용하기 위해서는 어떻게 해야할까?

여기서 Hook 개념이 등장한다.


const TestComponent = ({
  name = 'ian',
  age = 22,
}) => {
  const [ number, numberHandler ] = React.useState(0);
  return (
    // jsx
    <div>
      <p>{`${name}님, 내년이면 ${age + 1}살이시네요.`}</p>
    </div>
  );
};

export default TestComponent;

useState(value)는 State와 같은 역할을 하는 요소들이 담긴 배열을 반환하는데,

이를 비구조화할당을 통해 [ 변수, 변수 핸들러 ] 처럼 받아올 수 있다.

이 중 첫번째 인자는 변수 자체이며, 두번째 인자는 변수 변경할 수 있는 함수 setState({ 변수 })라고 생각하면 된다.


export default () => {
  const [number, numberHandler] = React.useState(0);
  return (
    <div>
      <p>{`${number}번 클릭하셨습니다.`}</p>
      <button
        onClick={() => {
          numberHandler(number + 1);
        }}
      >
        Click
      </button>
    </div>
  );
};

또한 컴포넌트의 업데이트를 감지하기 위해서는 useEffect()를 사용하면 된다.


export default () => {
  const [number, numberHandler] = React.useState(0);

  React.useEffect(() => {
    console.log(number);
  }, [number]);

  return (
    <div>
      <p>{`${number}번 클릭하셨습니다.`}</p>
      <button
        onClick={() => {
          numberHandler(number + 1);
        }}
      >
        Click
      </button>
    </div>
  );
};

두번째 인자인 배열 안에 있는 값들이 변경될 경우 첫번째 인자인 함수를 실행시키는 방식으로 이루어진다.

만약 아무 값도 넣지 않는다면, 컴포넌트 실행 후 최초 한번만 effect가 실행된다.


<TestComponent isTest={true} />


export default props => {
  const [number, numberHandler] = React.useState(0);

  React.useEffect(() => {
    if (props.isTest) {
      numberHandler(10);
    }
  }, []);

  return (
    <div>
      <p>{`${number}번 클릭하셨습니다.`}</p>
      <button
        onClick={() => {
          numberHandler(number + 1);
        }}
      >
        Click
      </button>
    </div>
  );
};

이 외에도 많은 Hook이 존재하기 때문에 기회가 되면 알아보도록 하겠다.

다람쥐 헌 쳇바퀴에 타고파

React 함수 컴포넌트(Function Component)