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

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

---

DIL-week2-5_2024-03-16

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ---------------------------- | | 2주차 | 3, 5장 | 리액트 훅과 상태관리 라이브러리 | 229~251p(22p), 336~399p(63p) |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9~21시반 (중간중간 휴식)
토요일 다른 일정x, 책 읽기

reference

• What is tearing? https://github.com/reactwg/react-18/discussions/69

---

📌 React Hook 파헤치기

useImperativeHandle

• 실무에서 자주 볼 수 없음
• 일부 사례에서 유용

React.forwardRef

• ref는 useRef에서 반환한 객체, 리액트 컴포넌트의 props인 ref에 넣어 HTMLElement에 접근하는 용도로 흔히 사용
• ref는 리액트에서 컴포넌트의 props로 사용할 수 있는 예약어 ex) key
• ref를 상위 컴포넌트에서 하위 컴포넌트로 전달하고 싶다면?

  Error: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

• 다른 props로 받으면 작동
  • 같은 작업을 하는 리액트 API > forwardRef
  • 일관성

useImperativeHandle

• 부모에게서 넘겨받은 ref를 원하는 대로 수정할 수 있는 훅

const Input = forwardRef((props, ref) => {
  // useImperativeHandle: ref의 동작을 추가로 정의
  useImperativeHandle(
    ref, // ref
    () => ({
      // ref.current를 덮어씀
      alert: () => alert(props.value), // 원하는 값이나 동작
      foo: "bar",
      // ...ref, // ref는 undefined
    }),
    [props.value] // 의존성 배열
  );

  return <input ref={ref} {...props} />;
});

• ref 확인

function handleClick() {
  inputRef.current?.alert(); // 새롭게 정의한 동작을 실행했음
  console.log(inputRef.current); // {foo: 'bar', alert: ƒ}

  console.log(inputRef.current.value); // undefined
  inputRef.current?.ref; // 새롭게 정의한 ref에 기존 ref를 넣으려 했으나 역시 undefined
}

useLayoutEffect

• 모든 DOM의 변경(리액트 랜더링) 후, 동기적으로 발생한다

1. 리액트가 DOM을 업데이트
2. useLayoutEffect
3. 브라우저에 반영
4. useEffect

• useLayoutEffect은 브라우저에 변경사항이 반영되기 전에 동기적으로 실행
  • 실행이 종료될 때까지 기다린 다음 화면을 그린다
  • 컴포넌트 일시 중지: 성능 문제
• DOM은 계산됐지만 이것이 화면에 반영되기 전에 하고 싶은 작업이 있을 때/반드시 필요할 때 ex) 애니메이션, 스크롤 위치 제어

useDebugValue

• 일반적으로 프로덕션x
• 디버깅 정보 -> 리액트 개발자 도구
  • 첫 번째 인수: 값
  • 두 번째 인수: 포매팅 함수 (첫 번째 인수의 값이 같으면 호출되지 않음)
• 다른 훅 내부에서만 실행할 수 있음

function useDate() {
  const date = new Date();
  useDebugValue(date, (date) => `현재 시간: ${date.toUTCString()}`);
  return date;
}

Rules of Hooks

rules-of-hooks
https://legacy.reactjs.org/docs/hooks-rules.html

1. 최상위에서 호출한다

• 반복문, 조건문, 중첩 함수 내에서 실행할 수 없다.
• 왜? 컴포넌트가 랜더링될 때 동일한 순서로 훅을 호출하는 것을 보장

2. 리액트 함수 컴포넌트, 커스텀 훅에서 호출한다

• 일반 자바스크립트 함수에서는 훅을 사용할 수 없음

• 훅에 대한 정보 저장 => 리액트 어딘가에 index와 같은 키를 기반으로 구현 (링크드 리스트) - 순서에 영향을 받음
  • 파이버 객체의 링크드 리스트 호출 순서

const [count, setCount] = useState(0) // 1️⃣
const [required, setRequired] = useState(false) // 2️⃣

useEffect(()=>{ // 3️⃣
  // ...
},[count, required])

// Fiber
{  // 1️⃣ setCount
  memoizedState: 0,
  baseState: 0,
  queue: {/* ... */},
  baseUpdate: null,
  next: { // 2️⃣ setRequired
    memoizedState: false,
    baseState: false,
    queue: {/* ... */},
    baseUpdate: null,
    next: { // 3️⃣ useEffect
      memoizedState: {
        tag: 192,
        create: ()=>{},
        destroy: undefined,
        deps: [0, false], // 의존성 배열 값! (이전 값과 비교)
        next: {/* ... */}
      },
      baseState: false,
      queue: {/* ... */},
      baseUpdate: null,
    }
  }
}

• 고정된 순서에 의존해 훅과 관련된 정보를 저장함 = 이전 값에 대한 비교와 실행
• 훅은 조건문/반복문 등에 의해 리액트에서 예측 불가능한 순서로 실행되게 해서는 안 된다.
• 따라서 실행 순서를 보장받을 수 있는 컴포넌트 최상단에 선언되어 있어야 한다.

Custom Hook vs Higher order component

• 커스텀훅
  • 리액트 훅의 규칙을 따르면서 개발자가 새로운 훅 만듦
    • 왜? 내부에서 훅 사용해야함,
  • 유명 커스텀훅: use-Hooks, react-use, ahooks
• HOC는 컴포넌트 로직 재사용 ex) React.memo

HOC

• 컴포넌트를 고차 컴포넌트로 감싸서, 커스텀 훅보다 큰 영향력 (컴포넌트 결과물에 영향을 미침)
• with 접두사로 시작한다 (일종의 개발자 컨벤션)
• 부수효과를 최소화한다.
  • 인수 컴포넌트의 props를 임의로 수정, 추가, 삭제하지 않기

부모 컴포넌트, 고차 컴포넌트, wrapper 컴포넌트의 차이점

부모 컴포넌트

부모 컴포넌트는 자식 컴포넌트들을 포함하고, 자식 컴포넌트에게 props를 통해 데이터나 콜백 함수 등을 전달하는 컴포넌트입니다. 부모 컴포넌트는 자식 컴포넌트의 상태를 관리하거나, 자식 간의 데이터 흐름을 조정하는 역할을 할 수 있습니다. 부모 컴포넌트는 일반적인 컴포넌트 계층에서의 상하 관계를 나타냅니다.

function ParentComponent() {
  const message = "Hello from Parent!";

  return <ChildComponent message={message} />;
}

고차 컴포넌트 (Higher-Order Components, HOC)

고차 컴포넌트는 컴포넌트를 입력으로 받아 새로운 컴포넌트를 반환하는 함수입니다. HOC는 주로 로직의 재사용을 목적으로 사용됩니다. 즉, 여러 컴포넌트 간에 공유할 수 있는 공통 로직이나 상태 관리, 생명주기 메소드 등을 HOC로 분리하여 각 컴포넌트에 적용할 수 있습니다.

function withExtraProp(WrappedComponent) {
  return function (props) {
    return <WrappedComponent extraProp="Extra Prop" {...props} />;
  };
}

// 사용 예: const EnhancedComponent = withExtraProp(OriginalComponent);
// <EnhancedComponent />

래퍼 (Wrapper) 컴포넌트

래퍼 컴포넌트는 다른 컴포넌트들을 감싸는 용도로 사용되는 컴포넌트입니다. 래퍼 컴포넌트는 스타일링, 레이아웃 구성, 상태 관리 등의 목적으로 사용될 수 있습니다. 래퍼 컴포넌트는 일반적으로 자식 컴포넌트에게 추가적인 속성을 주입하지 않고, 감싸는 역할에 초점을 맞춥니다.

function WrapperComponent({ children }) {
  return <div className="wrapper">{children}</div>;
}

/** 사용 예:
 * <WrapperComponent>
 *   <Component message={message} />
 * </WrapperComponent> */

비교

| 구분 | 인자 | 목적 | 사용 사례 | 재사용성 | | ---------------- | -------------- | ----------------------------------------------------- | -------------------------------------------------- | ------------------------------------------ | | 부모 컴포넌트 | props | 상위 계층에서 자식 컴포넌트를 관리하고 데이터를 전달 | 컴포넌트 계층 구조 구성 | 낮음, 직접적인 상속 관계 필요 | | 고차 컴포넌트 | 컴포넌트 | 다른 컴포넌트를 감싸 새로운 컴포넌트를 생성, 재사용성 | 로직 재사용, prop 주입, 조건부 랜더링, 관심사 분리 | 높음, 다양한 컴포넌트에 적용 가능 | | Wrapper 컴포넌트 | props.children | 추가적인 속성을 주입하지 않고, 감싸는 역할에 초점 | 스타일링, 레이아웃 조정, 조건부 래퍼 | 중간, 비슷한 레이아웃/스타일 요구시 재사용 |

custom hook vs HOC

• 뭘 쓰는 게 좋을까의 기준

| 구분 | 장점 | 단점 | 사용 예 | | ----------- | ----------------------------------------------------------- | ---------------------------------------------------------------- | -------------- | | custom hook | 부수효과가 제한적, 컴포넌트 내부에 미치는 영향을 최소화 | 랜더링 결과물에 영향을 미칠 수 없음, 반환값을 바탕으로 로직 작성 | 동일 로직 격리 | | HOC | 랜더링 결과물에 영향을 미침, 로직에 따라 공통 컴포넌트 노출 | 고차 컴포넌트를 직접 보거나 실행할 때까지, 결과물을 알 수 없다 | 에러 바운더리 |

📌 리액트와 상태 관리 라이브러리

• 상태
  • 어떠한 의미를 가진 값
  • 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값
• UI, URL, form, API call

역사 👨‍🦳

flux 패턴

• 리덕스 이전의 이야기....
• 2014년경, 리액트 등장과 비슷한 시기에 Flux 패턴, 그리고 Flux 라이브러리가 나타났더랬다...
  • Flux, alt, RefluxJS, NuclearJS, Fuxible, Fluxxor
• 기존 MVC 패턴에 모델 뷰가 겁나 많아져서 복잡도가 증가하던 상황
  • 상태 변화 원인과 위치 추적이 어려움
• (페이스북) 양방향이 문제다. -> 단방향으로 데이터 흐름 변경
  • Action -> Dispatcher -> Model -> View
  • 안정적으로 관리하고자 노력

| 구분 | 역할 | 작동 | | ---------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------ | | action | 작업을 처리한 액션, 액션 발생 시 포함시킬 데이터 | 액션 타입과 데이터를 정의해 디스패쳐로 보냄 | | dispatcher | 액션을 스토어에 보냄 | 콜백 함수 형태로, 앞서 액션이 정의한 타입과 데이터를 스토어에 보냄 | | store | 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드 | 액션 타입에 따라, 어떻게 변경할 지 정의되어 있음 | | view | (리액트 컴포넌트에 해당) 스토어에서 만들어진 데이터를 가져와 화면을 랜더링 | 액션을 호출해서 상태 업데이트를 할 수 있음 |

Redux의 두둥등장

• 당시 시장을 지배함
• Flux 구조 + Elm 아키텍처 도입: 웹페이지를 선언적으로 작성하기 위한 언어
  • model(상태), view(HTML), update(모델 수정 방식)
• 단점
  • 상태 관리를 위한 액션 타입 선언, creator 함수 작성, dispatcher와 selector
  • 보일러플레이트가 짱 많음 (지금은 많이 간소화됨)

Context API와 useContext

• 리액트 16.3 이전 => getChildContext()를 사용해 context를 다룸
  • 상위 컴포넌트 랜더링 시, getChildContext 호출 -> 리랜더링
  • context를 인수로 받아야해서, 컴포넌트와 결합도가 높아짐
• 리액트 16.3 => Context API

Hook, React Query, SWR(Vercel)

• 훅 -> 이전에는 볼 수 없었던 방식의 상태 관리 등장
• React Query(Tanstack Query), SWR
  • fetch 관리에 특화, API 호출에 대한 상태를 관리
  • HTTP 요청에 특화된 상태 관리 라이브러리

Recoil(페이스북), Zustand, Jotai, Valtio

• 범용적 상태관리 라이브러리
  • 작은 크기의 상태를 효율적으로 관리하는 추세
  • peerDependencies => react 16.8^

Local State: (1)useState, (2)useReducer

♻️ useReducer로 useState 만들기

• (타입) Initializer 타입은 제네릭 타입 T에 대하여 T 또는 T의 이전 상태를 인자로 받아 T 타입을 반환하는 함수 타입
  • 이는 상태 업데이트 시 상태 값 또는 상태를 업데이트하는 함수를 action으로 전달할 수 있음을 의미합니다.
• 실제로 useState은 useReducer로 만듦

type Initializer<T> = T extends any ? T | ((prev: T) => T) : never;

// `useStateWithUseReducer`는 initialState `initState`를 매개변수로 받고, 내부적으로 `useReducer` 훅을 사용합니다.
function useStateWithUseReducer<T>(initState: T) {
  // `useReducer` 훅은 상태(`state`)와 상태를 업데이트하는 함수(`dispatch`)를 반환합니다.
  // 여기서 리듀서 함수는 이전 상태(`prev`)와 액션(`action`)을 받아 새 상태를 계산합니다.
  // 액션이 함수인 경우, 이전 상태를 기반으로 상태 업데이트 함수를 호출합니다.
  // 그렇지 않으면 액션 자체를 새 상태로 사용합니다.
  const [state, dispatch] = useReducer(
    (prev: T, action: Initializer<T>) =>
      typeof action === "function" ? action(prev) : action,
    initState
  );

  // 상태와 상태를 업데이트하는 `dispatch` 함수를 배열로 묶어 반환합니다.
  // 이는 `useState` 훅의 반환 값과 유사한 형태입니다.
  return [state, dispatch];
}

♻️ useState로 useReducer 만들기

import { useState, useCallback } from "react";

/**
 * `useState`와 `useCallback`을 사용하여 `useReducer` 훅의 기능을 모방하는 커스텀 훅입니다.
 *
 * @param {Function} reducer - 이전 상태와 액션을 기반으로 새로운 상태를 결정하는 리듀서 함수
 * @param {any} initialState - 초기 상태 값
 * @param {Function} [initializer] - (optional) 초기 상태를 생성할 수 있는 선택적 초기화 함수
 *                                   제공되면, 이 함수의 반환 값으로 초기 상태 설정
 * @returns {[any, Function]} 현재 상태 값과 상태를 업데이트하는 dispatch 함수를 반환합니다.
 */
function useReducerWithUseState(reducer, initialState, initializer) {
  // 상태를 초기화합니다. initializer가 제공되면, initializer를 사용하여 initialState를 결정합니다.
  // 그렇지 않으면, initialState를 직접 사용합니다.
  const [state, setState] = useState(
    initializer ? () => initializer(initialState) : initialState
  );

  // 액션을 받아 상태를 업데이트하는 dispatch 함수를 생성합니다.
  // 이 함수는 훅으로 전달된 reducer 함수를 사용하여 상태를 업데이트합니다.
  // useCallback으로 래핑하여 함수의 불필요한 재생성을 방지하고, 렌더링 간에 안정적으로 유지되도록 합니다.
  const dispatch = useCallback(
    (action) => setState((prev) => reducer(prev, action)),
    // reducer 함수가 변경될 경우 dispatch 함수를 업데이트하기 위해 useCallback의 의존성 배열에 포함시킵니다.
    // 의존성이 시간이 지남에 따라 변경될 수 있기 때문에 이러한 패턴을 사용합니다.
    [reducer]
  );

  // 컴포넌트가 상태를 읽고 쓸 수 있도록 현재 상태와 dispatch 함수를 반환합니다.
  // state는 현재의 상태, dispatch 함수는 액션을 기반으로 상태를 업데이트하는 데 사용
  return [state, dispatch];
}

함수 외부에서 상태 변화가 일어났을 때를 참조해 리랜더링

1. 컴포넌트 외부 어딘가에 상태를 두고, 여러 컴포넌트가 같이 쓸 수 있어야 함
2. 상태의 변화를 알아챌 수 있어야 하고, 상태 변화 시 리랜더링을 일으켜 컴포넌트를 최신 상태값 기준으로 랜더링해야 함. (모든 컴포넌트에서 동일 작동)
3. 원시값 아닌 객체인 경우, 감지하지 않는 값이 변하면 리랜더링 x
   • obj.a가 바뀌었을 때 obj.b를 의존하는 컴포넌트가 리랜더링되면 x

• store, callback, subscribe

간략하게 보기: Recoil, Jotai, Zustand

Recoil

• 2020년, 페이스북, 최소 상태 개념 Atom을 처음 리액트 생태계에서 시작
  • 업데이트 1년 전, 실험 단계
• RecoilRoot: Context store, 상태 값에 접근하는 메소드들, 값 변경 => 하위 컴포넌트에 알림
• atom: 최소 상태 단위, key, default

Jotai

• atom(최소 상태 단위)으로 상태를 만들거나, 파생 상태를 만듦
• 쉬움 o

const [count, setCount] = useAtom(countAtom);

// countAtom
// atom에는 값이 저장되어있지 않다.
{
  init: 0,
  read: (get) => get(config),
  write: (get, set, update) =>
    set(config, typeof update === "function" ? update(get(config)) : update),
};

Zustand

• 리덕스 대비 적은 코드 작성 / 쉬움 => 확인 필요
• 번들 최소화 o
• ts 지원 o
• 미들웨어 o

=> TODO: 예제 더 살펴보기 5.2.2~5.2.4

---

✏️ English
resilient /rəˈzilēənt/
de facto 업계 표준, De facto is Latin for "of fact", de jure
Tearing