DIL: 모던 리액트 딥 다이브, 2주차-2

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week2-2_2024-03-12

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 2주차 | 3, 5장 | 리액트 훅과 상태관리 라이브러리 | 194p~207p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 11시~12시
감기 이슈🤕

---

React Hook 파헤치기

useState

게으른 초기화란? lazy initialization

• useState의 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용
  • 게으른 초기화 함수는 state가 처음 만들어질 때만 사용된다(이후 함수의 실행은 무시된다)
• 추천 케이스 (실행 비용이 많이 드는 경우)
  • localStorage, sessionStorage 접근
  • 배열 접근: map, filter, find
  • 초기값 게산에 함수 호출이 필요할 때

useEffect

• 애플리케이션 내 컴포넌트의 값들을 활용하여 동기적으로 부수 효과를 만든다. side-effects
• 어떻게 의존성 배열이 변경된 것을 알 수 있나?
  • 함수 컴포넌트는 => 매번 함수를 실행해 랜더링을 수행한다
  • 랜더링 시마다 고유의 state, props 값을 갖고 있음
• useEffect는? 평범한 함수다
  • 특별한 기능을 가진 것이 아님 like proxy, 데이터 바인딩, 옵저버
  • state과 props 변화 > 랜더링 > 부수 효과

클린업 함수 clean-up function

• 클린업 함수는? => 이전 state을 참조해 실행된다
  • (시기) 클린업 함수는 새로운 값과 함께 랜더링된 뒤에 실행된다
  • (값) 클린업 함수는 새로운 값을 읽는 것이 아니라, 함수가 정의됐을 당시에 선언됐던 이전 값을 보고 실행된다
• useEffect는 콜백이 실행될 때 => 클린업 함수가 존재한다면 클린업 함수를 실행한 후 콜백을 실행
  • unmount가 아님!
  • 함수 컴포넌트가 리랜더링 됐을 때, 의존성 변화가 있었을 당시 이전의 값을 기준으로 실행되는 => 청소 개념~!

의존성 배열

• useEffect는 의존성 배열의 이전 값과 현재 값을 얕은 비교한다.(Object.is)
• 하나라도 변경 사항이 있다면, callback으로 선언한 부수 효과를 실행한다.

의존성 배열 자체가 없는 경우

• 컴포넌트가 랜더링 됐는지 확인용
• 그냥 useEffect 없이 쓰면 되는 거 아님?

1. 서버 사이드 랜더링 관점

   • 클라이언트 사이드에서 실행되는 것을 보장한다
   • 즉, window 객체에 접근에 의존하는 코드 ok

2. useEffect는 컴포넌트 랜더링(side effect)이 완료된 이후에 실행된다

   • 코드를 직접 실행할 시, 랜더링 도중에 실행된다
   • (서버 사이드 랜더링의 경우, 서버에서 실행)
   • 함수 컴포넌트의 반환을 지연시킨다. 무거운 작업일 경우 랜더링을 방해, 성능 저하

주의할 점: 의존성 배열에 빈 배열을 고집하면 안되는 이유

• eslint-disable-line react-hook/exhaustive-deps

1. 접근법의 문제
   • 컴포넌트를 마운트 하는 시점에만 실행하고 싶다?
   • componentDidMount에 기반한 접근법으로, 사용해선 안됨
2. side effect
   • 컴포넌트의 state, props의 값 변경과, 부수 효과 사이의 연결 고리가 끊어짐
     • 부수 효과가 실제로 관찰되서 실행되야 하는 값과 별개로 작동됨
   • 부수 효과가 부수 효과가 아니게 되는 것
3. 로직의 문제 체크
   • 정말 부수 효과가 컴포넌트의 상태와 "별개"로 작동해야만 하는 지 확인
   • 부수 효과의 실행 위치가 적절한 지 확인
     • 필요하다면, 부모 컴포넌트에서 변경된 값을 props로 전달받기
     • 부수 효과의 흐름을 거스르지 않을 수 있다.

useEffect 첫 번째 인수(콜백 함수)에 함수명 부여하기

• 해당 useEffect의 목적을 파악하기 위해 유용하게 사용할 수 있다.
  • 책임을 최소한으로 좁힌다

useEffect(
  function logActiveUse() {
    logging(user.id);
  },
  [user.id]
);

거대한 useEffect X

• 부수 효과가 크다면?
  • 랜더링에는 영향을 적게 미친다 (랜더링 이후에 실행되니까)
  • 자바스크립트 실행 성능에 영향을 미친다 (랜더링 시 의존성 배열이 변경되었을 때마다 실행되니까)
• 관리하기 어려운 수준까지 커진다면?
  • 언제 발생하는 지 알 수 없음
  • 최대한 useCallback과 useMemo로 정제한 내용만 useEffect에 담는다.

불필요한 외부 함수 x

• useEffect 밖에서 함수를 선언하면?
  • 불필요한 코드가 많아지고, 가독성이 떨어짐
• useEffect 내에서 사용할 side effect라면? => 내부에서 만들어서 정의해서 사용

왜 useEffect의 콜백 인수는 비동기가 될 수 없는가?

"개발자의 편의"

1. race condition of useEffect
   • 비동기 함수의 응답 속도에 따라 결과가 이상할 수 있다
     • 상태변화A: 비동기 처리에 10초
     • 이후 상태변화B: 비동기 처리에 1초
     • race condition이 발생해 state이 => B => A가 될 수 있다
2. cleanup 함수의 실행 순서를 보장할 수 없다.

---

예제 - 207p

• useEffect 내부의 async Function 선언, 혹은 비동기 IIFE
• 클린업 함수에 비동기 처리, Fetch의 경우 abortController로 요청 취소

function Component({ id }: { id: string }) {
  const [info, setInfo] = useState<number | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    (async () => {
      const result = await fetchInfo(id, { signal: controller.signal });
      setInfo(await result.json());
    })();

    return () => controller.abort();
  }, [id]);

  return <></>;
}