📌 State Hook

버튼을 클릭하면 값이 증가하는 간단한 카운터 예시이다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언한다
  const [count, setCount] = useState(0);

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

여기서 useState가 바로 Hook이다. Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가했다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지된다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 이것은 class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다.

useState는 이니자로 초기 state 값을 하나 가진다. 카운터는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0을 넣어준 것이다. this.state와는 달리 setState Hook의 state는 객체일 필요가 없다. 불가능하다는 이야기는 아니다. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용된다.

여러 state 변수 선언하기

하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있다.

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했다
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

배열 구조 분해(destructuring) 문법은 useSate로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다. 이 변수명은 useState API와 관련이 없다. 대신 React는 매번 렌더링할 때 useState가 사용된 순서대로 실행한다.

근데 Hook이 뭔가요?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수이다. Hook은 class 안에서는 사용하지 못한다. 대신 class 없이 React를 사용할 수 있게 해주는 것이다.

React는 useState 같은 내장 Hook을 몇 가제 제공한다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능하다.

⚡️ Effect Hook

React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해봤을 것이다. 우리는 이런 모든 동작은 "side effect"(또는 짧게 "effect")라고 한다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 떄문이다.

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount 와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다. (useEffect 와 세 가지 메서드를 비교하는 예시는 Using the Effect Hook 문서를 참고)