[Learning React] 7장 - 훅스로 컴포넌트 개선하기

7.1 useEffect 소개

  - useEffect 훅

    - useEffect 훅 안에 넣는 코드는 렌더링 직후에 실행한다는 의미

    - Effect: 컴포넌트가 UI 렌더링 외에 수행해야 하는 일

    - 렌더링이 이뤄질 때마다 렌더링 된 프롭, 상태, 참조 등의 최종 값에 접근 가능

    - 렌더링이 끝난 이후에 발생하는 함수

  - 의존 관계 배열

    - 리액트는 상태가 바뀌면 컴포넌트 트리를 다시 렌더링함

    - useEffect 훅이 쓸데없이 많이 호출되는 문제 발생 가능

      - 의존 관계 배열 사용!

        - useEffect 훅을 구체적인 데이터 변경과 연동

        - Effect가 호출되는 시점 제어

        - 빈 의존 관계 배열은 초기 렌더링 직후 effect가 단 한 번만 호출됨 (초기화에 아주 유용)

    - useEffect 훅 안에서 함수를 반환하면 컴포넌트가 트리에서 제거될 때 이 함수가 호출됨

  - 의존 관계를 깊이 검사하기

    - useMemo 훅

      - 값을 메모화

      - 메모화된 값을 계산하는 함수 호출

      - 함수 호출 결과를 저장하고 캐싱함

      - 같은 입력 들어오면 캐싱된 값 반환

      - 의존 관계가 바뀐 경우에만 값 재계산

      - 의존 관계 배열에 의존함 (의존 관계 배열; 콜백 함수 호출 시점 결정)

    - useCallback 훅

      - 함수를 메모화

      - fn의 함수 값 메모화

  - useLayoutEffect을 사용해야 하는 경우

    - 렌더링 사이클의 특정 순간에 호출됨

      - 렌더링 다음에 호출되지만, 브라우저가 변경 내역을 화면에 그리기 전에 호출됨

    - 이벤트 발생 순서

      - 렌더링

      - useLayoutEffect가 호출됨

      - 브라우저의 화면 그리기: 이 시점에 컴포넌트에 해당하는 엘리먼트가 실제로 DOM에 추가됨

      - useEffect가 호출됨

  - 훅스의 규칙

    - 훅스는 컴포넌트의 영역 안에서만 작동한다

      - 리액트 컴포넌트 내부에서만 훅스를 호출해야 함

    - 기능을 여러 훅으로 나누면 좋다

      - 리액트 훅스가 호출되면 훅의 값을 배열에 저장하고 추적할 수 있게 해줌

    - 최상위 수준에서만 훅을 호출해야 한다

      - 조건문이나 루프, 내포된 함수 등 내부에서 훅을 사용하면 안됨

      - 훅 안에 if문이나 루프, 다른 조건 내포 가능

      - 비동기적인 동작도 훅 안에 넣을 필요 있음

  - useReducer로 코드 개선하기

    - reducer 함수: 현재 상태를 받아서 새 상태를 반환하는 함수 ex. toggle

    - useReducer 훅; 리듀서 함수와 초기 상태 값을 인자로 받음

  - useReducer로 복잡한 상태 처리하기

    - 상태가 더 복잡해질 때 상태 갱신을 더 예측 가능하게 처리하는데 도움이 됨

    - 상태 관리할 때 많이 발생하는 실수

      - 상태를 덮어쓰는 경우

    - useReducer를 활용하면 초기 상태와 새 정보를 쉽게 모을 수 있음

    - 상태가 여러 하위 값으로 구성되거나 다음 상태가 이전 상태에 의존적일 때 유용

  - 컴포넌트 성능 개선

    - 리액트 순수 컴포넌트: 같은 프로퍼티에 대해 항상 같은 출력으로 렌더링되는 컴포넌트

    - memo 함수 사용하면 프로퍼티가 변경될 때만 다시 렌더링 되는 순수 컴포넌트 만들 수 있음

      - 두 번째 인수로 predicate 콜백 함수를 전달하여 렌더링 여부 결정 가능 (함수 프로퍼티 이용 시)

      - predicate 함수는 이전 프로퍼티와 다음 프로퍼티를 인자로 받음

  - shouldComponentUpdate와 PureComponent

    - shouldComponentUpdate 메서드

      - 리액트가 컴포넌트를 갱신해야 하는 경우를 파악하기 위해 사용

      - 컴포넌트를 다시 렌더링하기 위해 어떤 프롭이나 상태가 바뀌어야 하는지 묘사

    - PureComponent

      - React.PureComponent는 React.memo와 같은 일을 함

        - React.PureComponent는 클래스 컴포넌트에만 사용 가능

        - React.memo는 함수 컴포넌트에만 사용 가능

    - 컴포넌트 트리에서 re-rendering 많이 발생할 때 useCallback과 memo 함수 사용하면 도움됨

      - useCallback 사용하면 memo 함수에 predicate 넘겨주지 않아도 됨

  - 언제 리팩터링할까?

    - 성능 최적화를 위한 리팩터링은 개발 단계의 마지막에 이뤄져야 함

    - 목표 설정하는 것이 중요 (무분별하고 과도하게 리팩터링 하는 것은 비효율적일 수 있음)

    - 리액트 프로파일러를 사용하여 각 컴포넌트의 성능 측정 가능

---

[Source Code] 러닝 리액트 Ch07. 훅스로 컴포넌트 개선하기