[DongHyun] Virtual DOM

[D5ng]

고민한 것.

Virtual DOM을 만들고, RealDOM으로 변환하는 과정에서 Fragment를 어떻게 구현할 수 있을까에 대한 고민함. 이 부분은 React Core 소스코드를 보았는데, Symbol을 사용해서 고유한 문자열을 만드는것을 보고, 다음과 같이 간략하게 만들었음.

export const FRAGMENT = 'FRAGMENT' as const;
type Fragment = typeof FRAGMENT;

...

const element =
    node.type === FRAGMENT
      ? document.createDocumentFragment()
      : document.createElement(node.type as keyof HTMLElementTagNameMap);

// vite.config esbuild옵션에서 jsxFragment와 jsxInject에도 import 하도록 해야함.

위처럼 작성하니 React의 Fragment처럼 잘 동작하지만 "이게 최선인가"에 대해 고민을 더 해봐야함.
해당 아티클에서는 Fragment 구현하는 부분이 없어서 아쉬웠음 😂

배운 점.

• JSX가 무엇인지 깊이있게 이해
• JSX를 Real DOM으로 변경하는 과정 이해
• 재귀함수를 언제 사용하는게 좋은지 감을 익힘(children을 재귀적 호출로 할 수 있다는것에 감탄함 이해하는데 2시간 걸림 ....)
• 대략적으로 "Fragment는 이렇게 동작할거구나"를 인지
• Virtual DOM(Reconciliation)을 구현하면서 이렇게 만들 수 있구나를 느끼고 3번정도 반복하면서 어느정도 이해함
• Closure를 활용한 useState가 어떤 식으로 동작하는지 이해

전반적으로 Virtual DOM을 직접 구현하면서 기존 이론을 이해하는데 도움이 되었음. 나중에 내가 멘토링을 한다면 이 과정을 꼭 해보라고 하고싶음. 이론적으로 아는것과 코드로 직접 구현하는건 너무나 큰 차이가 있다는 것을 알게되었음.

구현을 하기전에 요구사항 정의를 해야하는데, 이게 쉽지가 않음. 항상 답안지를 보는데 고민과 고통을 더 겪어야 할 것 같음.

Note

기존에 Fragment를 사용하면 에러가 발생했는데, 지금은 Fragment 잘 동작함!

[Seoin02]

이 주석은 일부러 남겨둔 것인가요??

[Seoin02]

타입 단언과 instanceof 2가지 경우를 썼는데 차이가 뭔가요??

[Seoin02]

고민한 것.

Virtual DOM을 만들고, RealDOM으로 변환하는 과정에서 Fragment를 어떻게 구현할 수 있을까에 대한 고민함. 이 부분은 React Core 소스코드를 보았는데, Symbol을 사용해서 고유한 문자열을 만드는것을 보고, 다음과 같이 간략하게 만들었음.

export const FRAGMENT = 'FRAGMENT' as const;
type Fragment = typeof FRAGMENT;

...

const element =
    node.type === FRAGMENT
      ? document.createDocumentFragment()
      : document.createElement(node.type as keyof HTMLElementTagNameMap);

// vite.config esbuild옵션에서 jsxFragment와 jsxInject에도 import 하도록 해야함.

위처럼 작성하니 React의 Fragment처럼 잘 동작하지만 "이게 최선인가"에 대해 고민을 더 해봐야함. 해당 아티클에서는 Fragment 구현하는 부분이 없어서 아쉬웠음 😂

저는 Fragment가 아티클에 없어서 굳이 구현하지 않았는데 굳이 구현해보면 좋겠군요!!

[Seoin02]

• 재귀함수를 언제 사용하는게 좋은지 감을 익힘(children을 재귀적 호출로 할 수 있다는것에 감탄함 이해하는데 2시간 걸림 ....)
  어느 부분인지 설명 부탁드려요

[D5ng]

• 재귀함수를 언제 사용하는게 좋은지 감을 익힘(children을 재귀적 호출로 할 수 있다는것에 감탄함 이해하는데 2시간 걸림 ....)
  어느 부분인지 설명 부탁드려요

createElement함수에서 node.children.map(createElement).forEach((child) => element.appendChild(child)) 이 부분입니다! 노드의 자식을 createElement 함수로 다시 반복하는 부분이에요!