9장. 훅

리액트 훅

• useState

  • 반환하는 튜플의 첫 번째 요소는 제네릭으로 지정한 S 타입이며, 두 번째 요소는 상태를 업데이트할 수 있는 Dispatch 타입의 함수다

• 의존성 배열을 사용하는 훅

  • useEffect

    • 첫 번째 인자이자 effect의 타입은 EffectCallback은 Destructor를 반환하거나 아무것도 반환하지 않는 함수다.

    • Promise 타입은 반환하지 않으므로 useEffect의 콜백 함수에는 비동기 함수가 들어갈 수 없다.

    • useEffect에서 비동기 함수를 호출할 수 있다면 경쟁 상태를 불러일으킬 수 있기 때문이다.

      경쟁 상태(Race Condition)

      ---

      • 멀티 스레딩 환경에서 동시에 여러 프로세스나 스레드가 공유된 자원에 접근하려고 할 때 발생할 수 있는 문제다.

      • 이러한 상황에서 실행 순서나 타이밍을 예측할 수 없게 되어 프로그램 동작이 원하지 않는 방향으로 흐를 수 있다.

  • useEffect과 useLayoutEffect

    • useEffect : 레이아웃 배치와 화면 렌더링이 모두 완료된 후에 실행된다.

    • useLayoutEffect : 화면에 해당 컴포넌트가 그려지기 전에 콜백 함수를 실행하기 때문에 첫 번째 렌더링 때 빈 값이 뜨는 경우를 방지할 수 있다.

  • useMemo와 useCallback

    • 이전에 생성된 값 또는 함수를 기억하며, 동일한 값과 함수를 반복해서 생성하지 않도록 해주는 훅

  • useRef

    • DOM을 직접 선택해야 하는 경우 사용

    • 자식 컴포넌트를 저장하는 변수로 활용할 수 있을 뿐만 아니라 다른 방식으로도 유용하게 사용 가능

      • useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트의 리렌더링이 발생하지 않는다. 이런 특성을 활용하면 상태가 변경되더라도 불필요한 리렌더링을 피할 수 있다.

      • 리액트 컴포넌트의 상태는 상태 변경 함수를 호출하고 렌더링된 이후에 업데이트된 상태를 조회할 수 있다. 반면 useRef로 관리되는 변수는 값을 설정한 후 즉시 조회할 수 있다.

• 훅의 규칙

  • 훅은 항상 최상위 레벨에서 호출되어야 한다.

    • 조건문, 반복문, 중첩 함수, 클래스 등의 내부에서는 훅을 호출하지 않아야한다.

    • 이렇게 해야 useState나 useEffect가 여러 번 호출되더라도 훅의 상태를 올바르게 유지할 수 있게 된다.

  • 훅은 항상 함수 컴포넌트나 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출되어야 한다.

  ⇒ 컴포넌트의 모든 상태 관련 로직을 좀 더 명확하게 드러낼 수 있다.

  이러한 훅의 규칙이 필요한 이유는 리액트에서 훅은 호출 순서에 의존하기 때문이다.

  모든 컴포넌트 렌더링에서 훅의 순서가 항상 동일하게 유지되어야 하며, 이를 통해 항상 동일한 컴포넌트 렌더링이 보장된다.