[7팀 박희정] Chapter 2-2. 나만의 React 만들기

[Pheejung]

과제 체크포인트

배포 링크

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

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다.
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다.
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다.

심화 과제

Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다.
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다.
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다.
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다.
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다.

과제 셀프회고

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

1. Virtual DOM은 그냥 JavaScript 객체다!

처음엔 Virtual DOM이 뭔가 특별한 기술인 줄 알았는데, 알고 보니 단순한 객체였습니다.

// 이게 Virtual DOM의 전부!
{ 
  type: "div", 
  props: { className: "box" }, 
  children: ["Hello"] 
}

깨달음:

• React의 "빠르다"는 건 "DOM 조작을 적게 한다"는 의미
• 객체 비교(메모리)는 빠르고, DOM 조작(브라우저)은 느림
• Diff 알고리즘으로 변경된 부분만 실제 DOM에 반영

2. JSX는 Babel이 변환한 함수 호출이다.

// 내가 작성한 코드
<div className="container">Hello</div>

// Babel이 변환한 코드
createVNode("div", { className: "container" }, "Hello")

깨달음:

• JSX는 도구(Babel/esbuild)의 함수 호출이다.
• React 개발자 도구에서 보이는 트리 구조의 실체를 이해

기술적 성장

새로 학습한 개념

1. Diff 알고리즘의 7가지 케이스

가장 복잡했지만 가장 중요한 부분이었습니다.
아직 이해가 잘 되지않아 추후에 더 공부하려고 합니다!

// 1. 노드 제거 (oldNode만 있음)
// 2. 노드 추가 (newNode만 있음)
// 3. 텍스트 변경
// 4. 타입 변경 (텍스트 → 요소)
// 5. 요소 타입 변경 (div → span)
// 6. 속성만 변경 (요소 재사용!)
// 7. 자식 노드 재귀 비교

배운 점(아직도 배우고 있습니다!)

• 같은 타입의 요소는 재사용한다 (성능 최적화)
• 최소한의 DOM 조작이 핵심

2. Property vs Attribute

체크박스가 작동 안 하는 이슈를 겪으면서 배웠습니다.

// 잘못된 방법
input.setAttribute("checked", "true");
// → HTML에 문자열로 저장, 항상 체크됨!

// 올바른 방법
input.checked = true;
// → DOM property로 설정, 정확히 작동

Boolean 속성: checked, disabled, selected, readOnly

• 반드시 property로 설정해야 함
• attribute로 하면 문자열이라 항상 truthy

개선이 필요한 부분

1. Key 기반 최적화 미구현

현재는 순서 기반 비교만 수행:

// 현재: 순서로만 비교
for (let i = 0; i < maxLength; i++) {
  updateElement(
    targetElement,
    newNode.children[i],
    oldNode.children[i],
    i
  );
}

개선 필요

• key 기반 비교
• 같은 key를 가진 요소 찾아서 재사용

문제점:

• 리스트 아이템 순서가 바뀌면 비효율적
• 모든 요소를 새로 렌더링할 수 있음

학습 효과 분석

가장 큰 배움

"추상화"의 진짜 의미를 이해

React를 사용할 때는 그냥 편한 도구였는데, 직접 구현하니 내부에서 엄청난 최적화가 일어나고 있다는 걸 알게되었습니다.

• "선언적 UI"는 복잡도를 숨기는 추상화 레이어
• 하지만 원리를 알면 더 잘 사용할 수 있음

추가 학습이 필요한 영역

1. Fiber 아키텍처

• 현재: 동기적 렌더링 (한번 시작하면 끝까지)
• Fiber: 중단 가능한 렌더링 (우선순위 기반)

2. Hooks 구현

// useState는 어떻게 구현되어 있을까?
const [count, setCount] = useState(0);

// useEffect는?
useEffect(() => {
  // 언제 실행되는가?
}, [deps]);

3. 메모이제이션

• React.memo, useMemo의 내부 구현
• 언제 재계산하고 언제 캐시를 쓰는가?

과제 피드백

생각해보지 않았던 가상 DOM이나 React의 구조에 대해 조금이나마 알 수 있었던 시간이었던 것 같습니다.
처음 과제를 했을 때 막막했는데 AI가 작성한 코드를 보면서 흐름을 이해할 수 있었습니다.
시간이 된다면 hard도 도전해보며 동작 원리에 대해 자세히 배우는 시간을 가져야겠다는 생각을 했습니다.

리뷰 받고 싶은 내용

AI의 도움으로 먼저 코드를 구현한 뒤, 코드 분석과 이해, 그리고 혼자 첨부터 다시 구현을 하는 방법으로 순서로 진행했습니다.
이렇게 AI에 많이 의존하는 학습 방식이 과연 괜찮은지 혹은 스스로 먼저 더 많이 고민을 해보고 구현하는 것이 더 효과적일지 고민이 됩니다.
앞으로 더 깊이 있게 성장하려면 어떤 접근이 좋을지 그리고 AI 의존도가 높아질 때 주의해야 할 점이 있다면 어떤것이 있을지 멘토님의 의견을 듣고 싶습니다.