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

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

---

DIL-week2-3_2024-03-13

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

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

---

React Hook 파헤치기

useMemo

• 대표적인 최적화 훅~
• 인수
  • (1) 첫 번째 인수: 어떠한 값을 반환하는 생성 함수
  • (2) 두 번째 인수: 의존성 배열
• 동작
  • 랜더링 시 (2)의 값이 변경되지 않았으면 => (1)을 재실행 하지 않고, 이전에 기억해둔 값 반환
  • 랜더링 시 (2)의 값이 변경되었으면 => (1)을 실행한 후 값을 반환하고, 그 값을 기억
    • 컴포넌트도 가능(안 함)

      const MemoizedComponent = useMemo(
        () => <ExpensiveComponent value={value} />,
        [value]
      );
      

useCallback

| hook | memoize | | ----------- | ----------------------------- | | useMemo | 반환 값 == 변수 | | useCallback | 인수로 넘겨 받은 콜백 == 함수 |

• useCallback은 인수로 넘겨받은 콜백 자체를 기억
  • 특정 함수를 새로 만들지 않고 다시 재사용한다
• 함수의 재생성을 막아 불필요한 리소스, 또는 리랜더링을 방지한다

export default function Hooks() {
  const [status1, setStatus1] = useState(false);
  const [status2, setStatus2] = useState(false);

  const toggle1 = () => {
    setStatus1(!status1);
  }; // 컴포넌트를 랜더링할 때, 함수를 재생성한다

  const toggle2 = useCallback(
    function togge2() {
      setStatus2(!status2);
    },
    [status2]
  ); // 컴포넌트를 랜더링할 때, 의존성 배열의 값이 변하지 않았다면 함수를 재생성하지 않는다

  const toggle3 = useMemo(
    // `useMemo`를 사용하여 계산된 값을 메모이제이션합니다.
    // 이 함수는 `status3` 상태의 변경을 통해 생성된 새로운 토글 함수를 반환합니다.
    // `status3`가 변경될 때만 이 함수를 재계산하여, 성능을 최적화합니다.
    function toggle3() {
      // -> 콜백 함수: 함수 선언문을 반환한다
      return function () {
        // -> 함수(값을 반환한다)
        return setStatus3(!status3);
      };
    },
    [status3] // 의존성 배열: 이 배열의 값이 변경되면, `toggle3` 함수를 재계산합니다.
  );

  return (
    <section>
      <aside>
        <label>Hooks</label>
        {/* Hooks */}
        <ChildComponent
          name="non useCallback"
          value={status1}
          onChange={toggle1}
        />
        <ChildComponent name="useCallback" value={status2} onChange={toggle2} />
        <ChildComponent
          name="useMemo로 구현한 useCallback"
          value={status3}
          onChange={toggle3}
        />
      </aside>
    </section>
  );
}

(팁) 기명 함수를 콜백 함수로 넘겨주면, 크롬 메모리 탭에서 디버깅을 용이하게 할 수 있다 (이름으로 추적하기~)

useRef

https://react.dev/reference/react/useRef

• ref.current 속성은 변경할 수 있습니다(mutable). <-> 상태(state)
  • 그러나, 렌더링에 사용되는 객체(예를 들어, 상태의 일부)를 담고 있다면, 해당 객체를 직접 변경x
• ref.current 속성을 변경해도 React는 컴포넌트를 다시 렌더링x (ref는 단순한 JavaScript 객체이기 때문에, React는 여러분이 이를 변경했을 때를 알 수 없습니다)
• 렌더링 동안 ref.current를 읽거나 쓰지 마세요. 초기화를 제외하고는 이를 피해야 합니다. 이는 컴포넌트의 동작을 예측 불가능하게 만듭니다.
• 엄격 모드(Strict Mode)에서 React는 우연히 발생할 수 있는 부수 효과(side effects)를 찾기 위해 컴포넌트 함수를 두 번 호출합니다. 이는 개발용 동작으로, 프로덕션에는 영향을 미치지 않습니다. 각 ref 객체는 두 번 생성되지만, 그 중 하나는 버려집니다. 컴포넌트 함수가 순수하다면(그래야만 합니다), 이는 동작에 영향을 주지 않아야 합니다. => 컴포넌트는 순수해야 한다!

• 왜 써야함? 외부에서 값 선언하는 거랑 뭐라 다름?
• 외부에서 값을 선언했을 때
  • 컴포넌트가 실행되지 않아도, 값이 기본적으로 메모리에 존재
  • 컴포넌트가 여러번 생성된다면? 각 컴포넌트에서 가리키는 값이 동일
• DOM에 접근
  • 랜더링 되기 전 (returndmfh DOM이 반환되기 전): undefined
• (예제) 랜더링 안되는 점을 활용해 usePrevious 같은 커스텀 훅을 만들 수 있음
  • 개발자가 원하는 시점의 값을 랜더링에 영향을 끼치지 않고 보관

function MyUseRef<T>(initValue: T) {
  return useMemo(() => ({ current: initValue }), []);
  // 두 번째 의존성 배열이 비어있으므로 [], 랜더링될 때를 제외하고 반환값을 재계산 하지 않을 것
  // => 즉, 랜더링 시마다 같은 주소의 값을 가리킴 (랜더링 당시의 반환값이 메모되어있음)
  // => 객체 내부의 값을 변경해도 객체의 주소가 바뀌지 않으므로, current의 value를 찾을 수 있다
}