2nd 코드로그 · JSX 찍먹 (feat. createVNode, normalizeVNode)

2025-07-15 (화)

---

✅ 오늘 학습한 내용

- JSX의 구조와 렌더링 방식

createVNode(type, props, ...children) 분석

JSX를 변환할 때, createVNode 함수의 인자를 다음과 같이 채웁니다.

1. type (타입)

   • HTML 태그 이름 (문자열): 'div', 'h1', 'span' 등.
   • 컴포넌트 (함수 또는 클래스): 라면 MyComponent 함수 자체가 type으로 전달됩니다.

2. props (속성)

   • JSX 태그에 전달된 모든 속성을 담는 객체입니다. id, className, onClick 등이 모두 이 객체에 들어갑니다.
   • 핵심: 만약 태그에 아무런 속성도 없다면 이 자리에 빈 객체 {}가 아닌 null을 전달합니다. 이것이 바로 normalizeVNode에서 props가 null인 경우를 처리해야 하는 이유입니다.

3. ...children (자식 요소들)
   • 태그와 태그 사이에 있는 모든 내용이 세 번째 인자부터 차례대로 들어갑니다.
   • 자식은 텍스트, 숫자, 또는 또 다른 createVNode 호출(중첩된 JSX 태그)이 될 수 있습니다.
   • 이것이 바로 normalizeVNode에서 children 배열을 재귀적으로 처리해야 하는 이유입니다.

---

💡 인상 깊었던 포인트

• JSX는 결국 React.createElement로 변환된다는 점
  • 2주차 과제에서createVNode 부분

---

🤔 어려웠던 부분

• HTML처럼 보여도 실제로는 JS 문법 위에 있다는 점에서 생기는 혼동
• 리액트를 써보지 않아 라이브러리의 동작 원리 및 흐름 파악
• 그 흔적들....
  

---

🎯 내일 학습 계획

• 2 주차 과제 진도 빼기.....
  • 아직 너무 할게 많이 남았어.......

---

✍️ 한 줄 회고

발 한 번 담가봤다. 차갑다.