React Hooks

Hook은 React 16.8에 새로 추가된 기능
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.

 

UseState

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

useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다.

이것은 class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다.

 

useState는 인자로 초기 state 값을 하나 받는다. 위 예시에서는 초기값으로 0을 넣어준 것이다. this.state와는 달리 setState Hook의 state는 객체일 필요가 없다. 물론 원한다면 그렇게도 가능하다. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용된다.

 

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

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

 

useEffect

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

 

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것

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

  // componentDidMount, componentDidUpdate와 비슷
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

 

useCallback

useCallback은 함수를 메모이제이션(memoization)하기 위해서 사용된다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.

const memoizedCallback = useCallback(함수, 배열)

 

예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때 마다 새로운 함수가 생성된다.

const add = () => x + y

 

하지만 useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다. 즉, x 또는 y 값이 바뀌면 새로운 함수가 생성되어 add 변수에 할당되고, x와 y 값이 동일하다면 다음 랜더링 때 이 함수를 재사용된다.

const add = useCallback(() => x + y, [x, y])