[React] 공식 문서 요약 - State Hook 사용하기

Using the State Hook – React

* React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다.

 

1. 클래스형 컴포넌트와의 비교

다음은 버튼을 클릭할 때마다 화면에 표시되는 숫자가 1씩 증가하는 카운터를 렌더링 하는 예시이다. 첫 번째 코드는 클래스형 컴포넌트로 구현한 것, 두 번째 코드는 함수형 컴포넌트와 Hook으로 구현한 것이다. 이 둘을 비교하면서 이 포스팅의 설명을 이해해보도록 하자.

 

▼ 클래스형 컴포넌트

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

 

▼ 함수형 컴포넌트 + Hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

2. Hook과 함수형 컴포넌트

• Hook은 특별한 종류의 함수를 의미한다. 대표적인 Hook이 바로 useState(), useEffect() 함수이다.
• Hook은 함수형 컴포넌트 안에서만 동작하며, 클래스형 컴포넌트 안에서는 동작하지 않는다.
• Hook은 함수형 컴포넌트로 클래스형 컴포넌트의 기능을 구현하고자 할 때 사용할 수 있다.
• Hook을 사용하기 위해서는 몇 가지 규칙을 준수해야 한다. 이에 대해서는 'Hook 규칙' 포스팅을 참조하자.

 

3. useState() 함수 사용하기

• 클래스형 컴포넌트에서는 생성자 안에서 this.state에 객체를 할당함으로써 지역 상태를 선언 및 초기화한다. 해당 상태 값은 this.state를 통해 참조가 가능하며, 이를 바꾸기 위해서는 this.setState() 메소드를 호출한다.
• 함수형 컴포넌트에서는 useState() 함수를 호출함으로써 지역 상태를 가질 수 있다.
• useState() 함수의 인자 : 사용할 상태 변수의 초깃값에 해당한다. 클래스형 컴포넌트와 달리 반드시 객체일 필요는 없다.
• useState() 함수의 반환 값 : 상태 값과 해당 상태를 설정하기 위한 함수로 이뤄진 배열이다.
  • 상태 값을 받을 상태 변수의 이름은 마음대로 지을 수 있다. 일반적으로 지역 변수는 함수가 리턴할 때 메모리에서 사라지지만, useState() 함수에 의해 반환되는 상태 값은 React에 의해 렌더링 간에도 사라지지 않고 유지된다. 만약 여러 개의 상태 변수를 선언하고 싶다면 useState() 함수를 여러 번 호출해야 한다. 단, 그 호출 순서는 매 렌더링마다 같아야 한다.
  • 상태를 설정하기 위한 함수를 이용하여 상태 값을 변경하면, React는 새로운 상태 값을 해당 컴포넌트에 넘기며 다시 렌더링을 시도한다. 참고로 이 함수는 클래스형 컴포넌트의 this.setState() 메소드와 달리 '병합'이 아닌 '대체'이다. 따라서 웬만하면 상태 변수도 각각 독립적으로 선언하는 편이 좋을 것이다.
• createState가 아니라 useState로 이름을 지은 이유는 두 가지이다. 첫째, 오직 최초 렌더링 시에만 상태 변수가 선언되고 그 이후의 렌더링부터는 이전의 값을 가져와 읽기 때문이다. 둘째, Hook의 이름을 짓는 방식에 관한 관습 때문이다.