[5팀 진재윤] Chapter 2-2. 나만의 React 만들기

[jy0813]

과제 체크포인트

배포 링크

https://jy0813.github.io/front_7th_chapter2-2/

기본과제

Phase 1: VNode와 기초 유틸리티

• core/elements.ts: createElement, normalizeNode, createChildPath
• utils/validators.ts: isEmptyValue
• utils/equals.ts: shallowEquals, deepEquals

Phase 2: 컨텍스트와 루트 초기화

• core/types.ts: VNode/Instance/Context 타입 선언
• core/context.ts: 루트/훅 컨텍스트와 경로 스택 관리
• core/setup.ts: 컨테이너 초기화, 컨텍스트 리셋, 루트 렌더 트리거

Phase 3: DOM 인터페이스 구축

• core/dom.ts: 속성/스타일/이벤트 적용 규칙, DOM 노드 탐색/삽입/제거

Phase 4: 렌더 스케줄링

• utils/enqueue.ts: enqueue, withEnqueue로 마이크로태스크 큐 구성
• core/render.ts: render, enqueueRender로 루트 렌더 사이클 구현

Phase 5: Reconciliation

• core/reconciler.ts: 마운트/업데이트/언마운트, 자식 비교, key/anchor 처리
• core/dom.ts: Reconciliation에서 사용할 DOM 재배치 보조 함수 확인

Phase 6: 기본 Hook 시스템

• core/hooks.ts: 훅 상태 저장, useState, useEffect, cleanup/queue 관리
• core/context.ts: 훅 커서 증가, 방문 경로 기록, 미사용 훅 정리

기본 과제 완료 기준: basic.equals.test.tsx, basic.mini-react.test.tsx 전부 통과

심화과제

Phase 7: 확장 Hook & HOC

• hooks/useRef.ts: ref 객체 유지
• hooks/useMemo.ts, hooks/useCallback.ts: shallow 비교 기반 메모이제이션
• hooks/useDeepMemo.ts, hooks/useAutoCallback.ts: deep 비교/자동 콜백 헬퍼
• hocs/memo.ts, hocs/deepMemo.ts: props 비교 기반 컴포넌트 메모이제이션

과제 셀프회고

처음 구현은 준일 코치님이 올리신 공지사항 대로 AI를 통해 Hard 과제를 통과하는 상태로 만들었습니다.
그리고 그 결과물을 토대로 코드를 이해해보려했지만, 아래와 같은 문제가 있어서 과제 Q&A 세션에 질문을 남겼습니다.

"올려주신 페이즈를 따라가면서 ai로 문제 접근법이나 주석을 통해서 얻을 수 있는 힌트들을 알려달라 하면서 구현 중이긴 한데 알아야 할 지식도 많고 속도가 너무 안 나오는 거 같아요, 말씀해 주신 대로 ai로 과제를 먼저 통과하고 나서 코드를 이해하려는 방식으로 해보려 했는데 또 그렇게 해보려 하니 이 코드들이 어떻게 연관되어 있고 어디서부터 어떤 코드를 이해하려고 봐야 할지 모르겠습니다."

그래서 준일 코치님께서 아래와 같은 답변 내용을 받았습니다.

easy에 있는 내용을 해보시는걸 추천드립니다.
easy의 경우

• createVNode를 통해 jsx를 객체로 전환하과
• normalizeVNode를 통해 createVNode로 만든 것들을 정규화 해주고 (일관성 있는 형태로 변경)
• createElement (hard에는 createElement가 createVNode) 를 통해서 vnode를 실제 dom element로 전환하고
• updateElement 를 통해, 두 개의 vnode를 비교한 다음에 변경사항에 대한 부분만 실제 dom에 반영해주고
• createElement 에서 event를 등록해주고
• updateElement 에서 event가 업데이트되면 반영해주고, 노드가 사라지면 이벤트를 제거해주고

hard의 경우 더 신경써야 하는 것

• render tree를 관리하는 것.
• render tree를 기반으로, hook의 context를 관리하는 것.
• render tree를 기반으로 lifecycle을 설계하는 것 (mount, unmount)
  component에 대한 정보를 관리하는 것 (easy에서는 component 혹은 node에 대한 상세정보를 따로 관리하지 않아도 무방함)
  component 에 종속적인 hook을 관리해야 하고, key를 관리해야 하고
  렌더링 자체에 대해서만 신경쓰는게 아니라, renderTree를 구성하고 renderTree에 담겨질 정보와, key와, path와 index와, …. 이런 것들을 관리해야 하다보니 헷갈리는 부분이 많을 수 밖에 없음.

제가 추천드리는 방법은, 내가 이해할 수 있는 내용을 일단 문장으로, 그림으로 정리해보는 것.
이렇게 일단 내가 이해하는 흐름으로 그려보는거죠

그래서 저도 우선은 조금 더 개념을 학습하기 위해서 React Fiber 와 React Reconciler 에 대해서 학습을 하는데 시간이 너무 많이 소요되기도해서 딥하게 들여다보지는 못한거같고, React Fiber 와 React Reconciler 가 이런거구나 하는 정도로 모르고 있는걸 알고 뭘 공부해야할지 아는 정도의 수준으로 우선 지식을 습득하였습니다.

그 후 준일코치님 블로그에서 Vanilla Javascript로 웹 컴포넌트 만들기, Vanilla Javascript로 상태관리 시스템 만들기, Vanilla Javascript로 가상돔(VirtualDOM) 만들기 라는 글들을 읽고, Easy 난이도 부터 다시 시작하였습니다.

결과적으로, Easy 기본 과제 및 심화 과제 모두 테스트에 통과하고 시간을 들여서 여러가지 학습한 시간들이 보람있게 느껴졌습니다.

앞으로 남은게 도식화와 Hard 를 처음부터 다시 진행해보는건데, 현재 계획은 Hard를 진행하면서 막히는 부분이 있을 때 도식화도 같이 병행하려합니다.

아하! 모먼트 (A-ha! Moment)

딱히 과제를 하면서 깨달음을 얻었던 순간이라기 보다는 이번 멘토링 때 이야기인데 테오한테 질문을 받을 때는 정말 식은땀나고 어버버 거리면서 너무 긴장했지만, 이해하고나서는 너무 좋았던거라 공유하고 싶었던 이야기 입니다.

저는 리액트를 만들 때 필요한 기초지식이 꽤 방대한데 배움이 많이 느린편이고, 이해하려면 시간이 정말 오래걸리는 편 입니다.
사실 이번에 React Fiber 와 Reconciler 에 대해서 학습하면서도, 파편화 된 글들을 읽고 이해한다기 보다는 외우는 수준이 더 가까웠던거 같습니다.

그래도 이번에 테오의 멘토링을 통하여 이런 고민을 얘기했는데, 배움이 느리면 배움이 빠를 수 있는 방법을 고민하자고 얘기해주셨습니다. 현재 저는 알고 이해했다 라기 보다는 모르던걸 알았다. 지식을 습득하여 뭘 공부해야 아는지 정도에서 그쳤던거같습니다.

안다는거에서 이해하기로 넘어가기 위해서는 이 지식을 알고있는 사람에게 설명이 가능하다 라는 것인데, 막상 말로하려니 파편화 된 외운 지식으로는 저도 이해를 못한 상태인게 당연히 확 와 닿았고, 테오가 구조화 학습에 대하여 정말 잘 설명해주셨습니다.

예를 들어, useState 의 정의 -> 등장하게된 배경 -> 이전 보다 뭐가 나아졌는지 등 에 대한걸 생각해보면, 사실 줄글을 외운다기보다 흐름을 따라가면서 마인드맵을 펼치듯 공부하면 좋겠다는 생각이 바로 들었습니다.

useState는 함수형 컴포넌트 상태 관리 Hook 이다. 등장하게 된 배경이 뭘까?
함수형 컴포넌트는 클래스 컴포넌트의 단점들을 보완하였지만, 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못해서, 이를 해결하기 위해 Hook이 등장했고, useState 는 Hook의 기술 이다.

그러면 이제 Hook 에 대한 정의와 등장 배경 등 계속 마인드맵을 펼쳐 나가면서 개념에 대해서 단지 암기한다기 보다는 이해하면서 짚어가기 너무 좋다고 생각합니다. 하루마다 일지 주기를 어떻게 잡을지는 아직 확실하게 정한건 아니지만, 피그잼을 통해서 이러한 마인드맵을 그려나가면서 공부하려고 합니다.

기술적 성장

• Fiber 재조정자

  • React 16 이전은 스택 재조정자로 렌더링 작업을 순차적으로 진행하여 처리중이던 렌더링이 완료될 때 까지 다른 작업을 수행할수 없었다면,새롭게 재조정 엔진으로 각 렌더링 작업을 잘게 나누어 우선 순위가 더 높은 작업을 먼저 처리 할 수 있게되었다.

• Fiber Node

  • React 16.8 이전에는 함수형 컴포넌트가 존재했지만 상태를 가질수 없는 형태였지만, React Hooks 를 Fiber Node 에서 관리하게됨.
    React Element 의 내용이 DOM 에 반영되기 위해, 먼저 VDOM에 추가 되어야하는데 이를 확장한 객체이다. hook 을 포함한 모든 상태(컴포넌트 상태, life cycle)를 저장한다.

• VDOM

  • Fiber Node 로 구성된 Tree 형태로, 더블 버퍼링 구조를 가지고있다.
  • current = DOM 에 mount 된 Fiber
  • workinProgress = render phase 에서 작업중인 fiber 로 commit phase 를 지나면서 current tree 가 된다.

코드 품질

Hard 다시 한번 새로 구현 해보는중이라 현재는 크게 없습니다.

학습 효과 분석

내부구조를 정확히 파악하지 않았어도 흐름에 대한거는 어느정도 알게되었다고 생각하고있습니다. 그래도 이러한 지식들을 습득하였기에,
실무에서도 Error 에 관해서 범위를 좁혀서 좀 더 빠르게 처리하고있는거 같습니다.

과제 피드백

주석이나 방향성에 대한 가이드가 잘나와있어서, 제가 작업하기에도.. AI 가 작업하기에도 좋았습니다.
현재 Hard 는 AI 로 구현 후 아직 재작업은 해보지 않았고, Easy 는 직접 구현하여 통과 하였는데 음..
시간이 조금 더 주어졌다면 좋았겠다 라는 생각이 들긴했습니다.

리뷰 받고 싶은 내용

1. 평탄화에 관한 코드중 flat(Infinity) vs for 문 + 재귀 형식의 방식 어떤게 더 효율적일지 궁금합니다.
   flat을 사용하면 구현이 가장 단순하지만, 중간 단계에서 로직 삽입이 불가능합니다.
   createElement 를 기준으로 질문 드린거였는데 혹시 createElement 안에서 평탄화 과정에 추가될 만한 요소들이 있을까요?

flatChildren = rawChildren.flat(Infinity);

const flattenChildren = (arr) => { 
  const result = []; 
  for (const item of arr) { 
    if (Array.isArray(item)) {
       result.push(...flattenChildren(item));
    } else { 
      result.push(item); 
    } 
  } 
  return result; };

2. Fiber에서 누락된 핵심 개념들이 좀 보이는거 같습니다, 현재는 Instance 하나만 관리하는데 Fiber는 2개의 트리를 번갈아 사용 부분이나,
   작업을 중단하고 재개하는 부분, 우선순위 스케줄링 등 이 빠진거같은데, 코치님은 이런거까지 모두 다 구현해보신 경험이있으신가요?

3. WeakMap 사용을 고려해야 하는 시점은 언제인가요? 현재는 Map으로만 구성되어있는데, 제가 알기로는 강한 참조 약한참조의 차이도 있지만, 메모리 누수가 발생할 가능성 때문에 WeakMap 을 사용한다고 알고있는데, 이런 부분에 대해서 체감되는게 없는거같아요,

4. 요즘 구현하면서 막히는 부분을 AI에게 자주 물어보게 되는데, 그러다 보니 내가 직접 깊게 생각해보는 시간이 줄어드는 것 같고,
   AI 없이 하면 너무 오래 걸리거나 아예 못할 것 같은 불안감도 생깁니다. AI 도움을 받으면 편한데, 그만큼 제 사고가 AI가 알려주는 수준에서 멈추는 건 아닐까 걱정이 됩니다. 이런 상황에서 스스로 고민하는 시간과 AI 도움을 받는 시간을 어떻게 균형 잡는 게 좋다고 생각하시는지, 어떤 방식으로 학습하는 게 장기적으로 더 성장할 수 있는지 조언을 듣고 싶습니다.

신청할때 당시에는 코드적으로 뭔가 리뷰를 받고싶었는데,,생각보다 더 많이 어렵게 느껴지고 아직 하나하나 이해하면서 넘어가려하는 중이라,
재작업 중에도 많이 진행이 안된 상태입니다ㅠㅠ..죄송합니다😭