TIL : React { Hooks }

Hook

• 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수
• 사용규칙
  • 최상위에서만 사용해야 한다
  • React 함수 컴포넌트 내에서만 호출해야 한다

State Hook

• useState
  • state, setState 함수를 쌍으로 제공
  • 이벤트 핸들러나 다른 곳에서도 호출 가능

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

• 위와 같이 렌더링 초기에만 initialState를 사용할 수 있음
• 초기렌더링이 고비용일 때 이용 가능, 렌더링 이후 initialState는 무시 됨

Effect Hook

• 컴포넌트 안에서 데이터를 가져오거나 구독, DOM을 직접 조작한 때 'side effects' 라고 부름
• 'side effects'는 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업
• useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount의 통합
• 렌더링과 모든 업데이트 이후에 어떤 일을 수행해야 하는지를 useEffect에서 정의
• 관심사를 구분한다면 Effect를 여러개 사용한다.

import React, { useState, useEffect } from 'react';

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

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

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

• 위 코드는 effect 내에서 선언되었기 때문에 props와 state에 접근할 수 있었다.
• 매 렌더링 마다 effects를 실행

useCallback

• 메모이제이션 된 콜백을 반환
• 콜백의 메모이제이션 된 버전을 반환하는데, 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때만 변경

  const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
  );

useMemo

• 메모이제이션된 값을 반환 마찬가지로 의존성이 변경되었을 때에면 다시 계산
• 최적화에 용이
• useMemo는 렌더링 중에 실행
• 사이드 이펙트는 useEffect에서만 해야 함

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);