2024-03-18.md

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

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

DIL-week3-1_2024-03-18

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------------------------------ | ----------- | | 3주차 | 6, 7장 | 리액트 개발도구 디버깅, 크롬 개발자 도구를 활용한 분석 | 401p~ |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시~10시 45분

리액트 개발 도구로 디버깅하기

리액트 개발 도구란?

react-dev-tools: 크롬, 파폭, 엣지

Component 메뉴: Netflix 살펴보기

리액트 애플리케이션 전체의 트리 구조
익명함수를 default로 export한 경우: AnonymousDefaultComponent
(memo) 함수명 추론x. memo 라벨o: Anonymous
(HOC) 고차 컴포넌트와, 고차 컴포넌트로 감싼 컴포넌트: Anonymous
무기명 함수에 displayName 속성을 추가하는 방법 있음
```
MemoizedComponent.displayName = '메모 컴포넌트'
```
(displayName, 기명 함수) 개발 모드에서만 참고: terser 등 압축 도구가 컴포넌트명 난수화, displayName은 빌드 도구가 삭제

컴포넌트 도구 Component

👁️: Element 탭 + 랜더링된 HTML 요소 선택

🪲: console.log에 Props, Hooks, Nodes

Props:
{
  as: "p",
  children:
    {
      $$typeof: Symbol(react.element),
      key: null,
      props: {children: '콘텐츠를 저장해 이동 중에도 즐기는 신박한 경험.'},
      ref: null,
      type: {
        $$typeof: Symbol(react.forward_ref),
        displayName: 'Styled(span)',
        defaultProps: undefined,
        __emotion_real: {…},
        render: ƒ,
        ...
      }
      _owner:null,
    },
  color:"WhiteT70",
  variant:{xs: 'BodyStandard', l: 'Subtitle'},
}

Hooks:[
  {
    id: null,
    isStateEditable: false,
    name: "a",
    subHooks: [
      {
        id: null,
        isStateEditable: false,
        name: "Context",
        value: {
          theme: "dark",
          internalHasProvider: true,
        },
        subHooks: [],
        hookSource: {
          lineNumber: 1,
          functionName: "a",
          fileName:
            "https://assets.nflxext.com/web/ffe/wp/signup/nmhp/nmhpFrameworkClient.js.456145d0d707f996a700.js",
          columnNumber: 1404288,
        },
      },
    ],
    hookSource: {
      lineNumber: 7,
      columnNumber: 89727,
      fileName:
        "https://assets.nflxext.com/web/ffe/wp/signup/nmhp/nmhpFrameworkClient.js.456145d0d707f996a700.js",
    },
  },
];

Nodes: [p.default-ltr-cache-dk1xic.euy28771]

| console | 내용 | | ------- | ------------------------------------------------------ | | Props | card, onRenderComplete, setFirstCardImage | | Hooks | hookSource, id, isStateEditable, name, subHooks, value | | Nodes | 노드 element 배열 |

<>: view source code for this element
- 변수
  - copy value to clipboard
  - store as global variable: window.$r // 전역변수로 보관
- 함수
  - go to definition
- hooks
  - use가 생략된 모습임
  - 커스텀 훅도 나옴
  - 훅에 넘겨주는 함수 기명함수면 확인o
- rendered by
  - 랜더링 주체

Profiler

Flamegraph, Ranked, Timeline
랜더링 과정에 개입해 디버깅에 필요한 내용을 기록 => 프로덕션에서 사용x
- 개발 모드의 리액트 애플리케이션 준비~
랜더 Commit 별로 어떤 작업이 있어냤냐
너비: 랜더링 시간
Timeline의 timestamp로 effect 동작 확인

=> 코드 많아져서 손 대기 힘들어지기 전에 디버깅해서 버그 방지 해야 한다

=> 디버깅 툴 잘 활용하기

확인 내용

프로파일링 json 내보내기

랜더 커밋 정보

타임라인

랭크

익명함수 default export

store as global variable