본 시리즈는 같은 학원 수강생들과 함께하는 React 스터디 진행의 내용을 바탕으로 무작정 부딪치고 시간을 들여 얻은 지식을 공유하고자 한다.
학습 내용은 본인이 작성한 예제로 진행했으므로 틀린점이나 보완점이 있으면 피드백 부탁드립니다.

🤔함수형 컴포넌트를 어떻게 사용할까

리액트는 16.8 버전에 Hook이 나오기 전 state나 생명주기는 클래스형 컴포넌트에서만 작성할 수 있었다. 하지만 Hook가 추가된 이후 편하게 사용했던 함수형 컴포넌트에서도 상태 관리 및 생명주기를 작성할 수 있게 되었다. 간단한 Counter 컴포넌트를 클래스형과 함수형으로 작성하며 비교해보자.

Counter 컴포넌트 작성

우리는 간단한 Counter 컴포넌트를 작성했다. 단순히 화면에 현재 카운트 상태를 나타내고 버튼 두 개는 각각 +1, -1을 연산하도록 하였다.

클래스형 컴포넌트

import React from 'react';
import { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0,
  };

  increase() {
    this.setState(({ count }) => ({
      count: count + 1,
    }));
  }

  decrease() {
    this.setState(({ count }) => ({
      count: count - 1,
    }));
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increase.bind(this)}>+1</button>
        <button onClick={this.decrease.bind(this)}>-1</button>
      </div>
    );
  }
}

export default Counter;

기존에 작성했던 클래스형 컴포넌트는 this 키워드를 사용하여 자신의 state 및 함수를 조회하고 bind 함수를 사용하여 this가 가리키는 대상을 자신으로 고정해야 했었다. 이외에 constructor()나 render() 함수 등 필요한 생명주기 함수를 정의하여 컴포넌트가 동작되도록 작성해야 했다.

이 컴포넌트를 함수형으로 바꾸면 어떻게 될까?

함수형 컴포넌트

import React from 'react';
import { useState } from 'react';

const FuncCounter = () => {
  const [count, setCount] = useState(0);

  const increaseFunction = () => {
    setCount(count + 1);
  };

  const decreaseFunction = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increaseFunction}>+1</button>
      <button onClick={decreaseFunction}>-1</button>
    </div>
  );
};

export default FuncCounter;

코드는 짧아지고 가독성이 훨씬 늘었다. 현재 정의한 변수와 함수들이 당연하게도 해당 변수 및 함수들을 가리키기 때문에 this 키워드가 사용되지 않아 가독성이 많이 좋아졌다. 여기서 평소에 보지 못 했던 useState() 함수는 무엇일까?

useState()

useState() 함수는 리액트 Hook 중 하나로 함수형 컴포넌트에서 state를 사용할 수 있도록 도와주는 함수이다. 해당 함수로 만드는 state는 꼭 객체일 필요가 없으며 원하는 형태의 데이터로 초기화할 수 있다.

const [count, setCount] = useState(0);

예제에서는 count와 setCount를 배열 구조 분해로 할당하였다. useState() 함수를 사용하면 사용할 state의 이름을 작성하고 뒤에 Camel case 작명법으로 set을 붙여 클래스형 컴포넌트에 setState()에 해당하는 함수명을 작성하며 배열 구조 분해식으로 할당하면 된다. 그리고 state를 사용하고 변경할 때는 setState_name() 함수로 변경하면 된다.

useState()의 인자로는 초깃값이 들어가는데 자신이 원하는 형태의 데이터값으로 작성하면 해당 state의 데이터형이 정해진다.

😀 앞으로 작성할 컴포넌트는 함수형 컴포넌트를 기반으로 작성할 예정이다. 함수형 컴포넌트와 친해지도록 하자.