13. 리액트 훅의 사용 규칙 돌아보기

Hook 설명

• 클래스 컴포넌트의 단점을 해결하기 위해 등장한 Hook
  • 클래스 단점: this 키워드의 혼란과 수동 바인딩의 번거로움
  • 상태 관련 로직과 생명주기를 재사용하기 힘듦
    • 기존 클래스 컴포넌트에서는 상태 관련 및 생명주기를 재사용하기 위해 HOC, render props를 이용
    • But, HOC wrapper hell로 인해 개발자 경험이 좋지 않음 & 어려웠음
• 특징: JS 함수였던 컴포넌트가 React의 상태를 직접 소유하고, 컴포넌트의 마운트, 업데이트, 언마운트와 같은 생명 주기 시점에 맞추어 특정 로직을 실행할 수 있게 해줌

커스텀 훅

• 상태 관련 로직 및 부수 효과 로직을 캡슐화하고 재사용할 수 있게 해줌

훅 규칙

• 1. 최상위 레벨에서만 호출
  • 컴포넌트가 렌더링될때마다, 훅은 항상 동일한 순서로 호출되어야 함 (반복문, 조건문, 중첩된 함수 내에서 호출 금지)
  • React는 컴포넌트별로 훅의 상태를 저장하는데 단일 연결 링크드리스트를 사용
    • 파이버 내 훅이 호출되는 순서, 링크드 리스트를 순서대로 순회하며 각 훅의 상태를 가져오고 상태를 구분
  • 컴포넌트가 리렌더링될때마다, 링크드 리스트를 순서대로 순회하며 기존에 저장해둔 노드에서 각 상태와 상태 업데이트 함수를 참조하기 때문에! 훅의 순서를 반드시 지켜야한다는 것
    • 만약 조건부로 호출할 수 있게 된다면, 링크드 리스트에 적용된 함수가 실제로 적용되어 있지 않기 때문에 에러가 발생할 것
• 2. 리액트 함수 내에서만 호출
  • 리액트 훅이 호출될 수 있는 위치
    • React 함수 컴포넌트의 최상위 스코프
    • 커스텀 훅의 최상위 스코프
  • 현재 어떤 컴포넌트를 렌더링하고 있는지에 대한 정보인 렌더링 컨텍스트가 훅 동작에 필요하기 때문
• 3. 인수의 불변성 유지
  • 얕은 비교를 하기 때문에 불변성을 유지해야 함. 변경이 필요하다면 복사본을 만들어 새로운 객체를 반환하게끔 처리

14. 리액트 필수 훅 돌아보기

useState

• 지역 상태 선언 및 업데이트
• 즉시 상태를 반영하지 않고 다음 리렌더링이 수행되어야 업데이트된 상태값을 조회할 수 있음
• 상태 업데이트 시 최신 값을 기반으로 계산해야 한다면 콜백함수 사용

useEffect

• 렌더링 이후 실행되는 콜백 함수

useRef

• 아래 케이스일 때 사용하는 훅
  • 렌더링과 관계없이 특정 값을 컴포넌트의 전체 생명주기에 걸쳐 유지하고 싶을 때
  • DOM을 접근해야 할 때
• current 값이 변경되어도 리렌더링 x

forwardRef (React 18까지 사용 필요)

• v18까지 컴포넌트 외부에서 일반적인 props처럼 ref를 컴포넌트에 직접 전달 불가능해 사용되어야 했던 hook
• 컴포넌트 간 ref를 전달하기 위해 사용 필요
• React 19부터 ref를 일반 프롭스처럼 전달 가능해 불필요해짐

15. 리액트 메모이제이션 돌아보기

memo()

• 컴포넌트 렌더링 결과를 메모이제이션, props에 대한 얕은 비교를 통해 리렌더링 여부 결정
• 사용 지점
  • 컴포넌트가 순수하고, 렌더링 비용이 비싼 경우
  • 컴포넌트가 동일한 props로 자주 렌더링되는 경우
  • props가 복잡한 객체를 포함한 경우

useCallback()

• 함수 자체를 메모이제이션, 부모 컴포넌트가 리렌더링될 때마다 함수가 새로 생성되는 것을 막음
• 디바운스나 useEffect 내에서 사용하는 외부 함수일 경우, useCallback으로 메모이제이션해 동일 참조를 유지하게끔 처리
• memo()로 자식 컴포넌트를 최적화해도, 부모가 자식에게 함수를 props로 전달하면 최적화가 깨지게 됨
  • -> props로 전달되는 함수도 **useCallback()**을 사용해서 메모이제이션해야함

useMemo()

• 값을 메모이제이션

리액트 컴파일러

• 수동 최적화의 필요성을 줄이는 것을 목적
• react 19와 함께 발표되었으나, 아직은 RC 버전으로만 사용 가능
• 역할
  • 자동 메모이제이션
  • Cascading 렌더링 방지
    • 리액트의 기본 동작 : 부모가 리렌더링 되면 자식 컴포넌트도 리렌더링 되는 현상 = Cascading 렌더링
    • props나 상태가 변경될때만 자식이 리렌더링되게 변경될 예정