React.js : useState();

React.js의 Hook에서 state를 관리해주는 useState에 대해 살펴보겠습니다.

앞으로 업로드할 리액트와 관련된 문서는 CRA(Create-React-App)을 통해 프로젝트 폴더를 하나 만들었다고 가정하고 src 디렉터리에 어떤 파일을 추가하여 App.js에 렌더링한 결과를 보여드립니다.

예를 들어 아래와 같은 코드가 있다고 가정합니다.

import React, { Component } from "react";

class NumberCount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }
  render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default NumberCount;

이 코드는 state를 0으로 지정하여 버튼을 누를 때마다 값이 1씩 증가하는 형태를 클래스형 컴포넌트로 구현한 것입니다. 클래스형 컴포넌트에서 state를 설정할 때는 constructor 메서드를 반드시 작성하여 설정해주어야 합니다. 이것은 컴포넌트 생성자 메서드이고 이를 작성하였으면 반드시 super(props)를 호출해주어 클래스형 컴포넌트가 상속 받고 있는 React의 Component 클래스가 지난 생성자 함수를 호출해 줍니다.

그리고 this.state 에 초기값을 설정하였습니다. 여기서 중요한 사실은 컴포넌트의 state는 객체형식이라는 것입니다.

이어서 render함수를 보면 현재 state를 조회할 때 this.state를 사용하여 조회하였습니다. 그리고 버튼을 클릭할 때마다 방금 조회한 state에 1씩 더해주는 형태를 이벤트로 지정(함수호출)하였습니다.

자, 그러면 함수형 컴포넌트에서는 어떨까요?

import React, { useState } from "react";

const NumberCount = () => {
  const [state, setState] = useState(0);
  return (
    <div>
      <h1>{state}</h1>
      <button
        onClick={() => {
          setState(state + 1);
        }}
      >
        +1
      </button>
    </div>
  );
};

export default NumberCount;

우선 useState라는 Hook을 사용하기 위해 useState를 import해주었습니다.

여기에서 state는 초기값이 되고, 이는 클래스형 컴포넌트와 다르게 꼭 객체형태일 필요는 없습니다. 함수형 컴포넌트에서는 this를 가질 수 없기 때문에 useState Hook을 사용해야하고, useState는 초기값을 인자로 넘겨주어야 합니다.

우리는 0에서 시작하여 1씩 더해나가는 구조를 만들었기 때문에 초기값을 0으로 지정한 것입니다.

그리고 useState는 state 변수와 해당 변수를 갱신할 수 있는 함수를 반환히기 때문에 꼭 const [state, setState] = useState()로 작성해야 하며, 이는 클래스형 컴포넌트의 this.state.count나 this.setState와 유사한 기능을 갖습니다.

다만 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.