[React] Using the State Hook

Hook과 함수 컴포넌트

React의 함수 컴포넌트는 아래의 형태입니다.

const Example = (props) => {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

function Example(props) {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

Hook을 사용하면서 useState과 같은 React state를 함수형 컴포넌트 안에서 사용할 수 있습니다.

state 변수 선언하기

클래스를 사용할 때는 constructor 안에서 this.state를 { count: 0 }로 설정함으로써 count를 0으로 초기화했습니다.

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

함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없지만 대신 useState Hook을 직접 컴포넌트에 호출합니다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

useState를 호출하는 것은 “state 변수”를 선언하는 것을 의미합니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.

useState의 인자로 무엇을 넘겨주어야 하는 것은 useState() Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다.

useState는 state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다.

State 가져오기

클래스 컴포넌트는 count를 보여주기 위해 this.state.count를 사용합니다.

  <p>You clicked {this.state.count} times</p>

반면 함수 컴포넌트는 count를 직접 사용할 수 있습니다.

  <p>You clicked {count} times</p>

state 갱신하기

클래스 컴포넌트는 count를 갱신하기 위해 this.setState()를 호출합니다.

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
   Click me
 </button>

반면 함수 컴포넌트는 setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 됩니다.

  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>