React Hook

Hook의 규칙

반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함
컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀)

useState

State 사용하기

const [state, setState] = useState(initialState);

콜백으로 초깃값 지정하기

초기값을 계산하는 코드가 복잡한 경우에 활용

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

State 변경

setState(nextState);

이전 State를 참조해서 State 변경

비동기 함수에서 최신 State 값을 가져와서 새로운 State 값을 만들 때

setState((prevState) => {
  // ...
  return nextState
});

useEffect

컴포넌트 함수에서 사이드 이펙트(리액트 외부의 값이나 상태를 변경할 때)에 활용하는 함수
처음 렌더링 후에 한 번만 실행

useEffect(() => {
  // ...
}, []);

렌더링 후에 특정 값이 바뀌었으면 실행
(처음 렌더링 후에도 한 번 실행됨)

useEffect(() => {
  // ...
}, [dep1, dep2, dep3, ...]);

사이드 이펙트 정리(Cleanup)하기

useEffect(() => {
  // 사이드 이펙트
  return () => {
    // 정리
  }
}, [dep1, dep2, dep3, ...]);

useRef

생성하고 DOM 노드에 연결하기

const ref = useRef();
// ...
return <div ref={ref}>안녕 리액트!</div>;

DOM 노드 참조하기

const node = ref.current;
if (node) {
  // node를 사용하는 코드
}

useCallback

함수를 매번 새로 생성하는 것이 아니라 디펜던시 리스트가 변경될 때만 함수를 생성

const handleLoad = useCallback((option) => {
  // ...
}, [dep1, dep2, dep3, ...]);

Custom Hook

이때 useOOO 처럼 반드시 맨 앞에 use 라는 단어를 붙여서
다른 개발자들이 Hook이라는 걸 알 수 있게 해줘야 한다

useAsync

비동기 함수의 로딩, 에러 처리를 하는 데 사용할 수 있는 함수

function useAsync(asyncFunction) {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState(null);
  const wrappedFunction = useCallback(async (...args) => {
    setPending(true);
    setError(null);
    try {
      return await asyncFunction(...args);
    } catch (error) {
      setError(error);
    } finally {
      setPending(false);
    }
  }, [asyncFunction]);
  return [pending, error, wrappedFunction];
}