2021/10/16~17 : React의 렌더러, vDom를 어느정도 따라해보았습니다.

Fact: 무슨일이 있었는지, 뭘 했는지

주말동안에는 우테코의 글쓰기 미션과, react의 virtual dom과 렌더러를 만들어보는 미션을 수행했습니다.

React.createElement와 React.renderDOM 메서드를 직접 만들어보면서, JSX가 파싱되었을때 어떠한 형식으로 바뀌는지 console.log를 찍어가면서 확인해야했다.

라이브러리를 사용하는 것보다, 라이브러리를 직접만들어쓰고 싶다는 생각이 강했지만, 로우레벨의 견고한 라이브러리는 대체하는 것에 수개월이 걸릴것같다는 생각이 들었다.

내가 구현하지 못할것같은 기능들에 한해서 라이브러리를 사용해야겠다는 생각을 했다.

또한, 렌더러 로직은 따라했는데 vDOM이 "변경사항들을 반영해서 real DOM에 한번에 렌더링한다."라는 부분은 구현을 해내지 못한것같아서 아쉽습니다.

JSX가 파싱될때 어떤 동작이 일어나는지 console.log를 여기저기 찍어가며 깨달았습니다.

어떤 동작이 일어나고 어떤순서로 element들을 순회하고 어떻게 해야, 변하지 않는 요소를 렌더링하지 않을 수 있는지 깨달았습니다.

항상 vDom을 설명할때,

1.변하지 않은 요소를 리렌더링 하지 않을 수 있다.

2. 변경된 요소들을 모아서 real dom에 한번에 렌더링할 수 있다;

이렇게 2개의 특징을 예로 들면서 1번을 중점적으로 얘기했는데,

구현하다보니 vDom이 없더라도, 순회를 하면서 새로그릴 노드와 기존노드가 같은지를 검사하면서 충분히 필터링을 할 수 있었습니다.

따라서 vDom의 핵심 특징은 2번이라는 것을 이번 기회에 깨닫게 되었습니다.

현재노드와 새로그릴 노드를 비교하는 로직이 tag이름, attr들을 JSON.stringify로 직렬화해서 비교, children length를 비교하는 방식으로 구현을 했는데,

JSON.stringify로 직렬화를 했을때 Symbol같은 원시타입은 undefined가 되기 때문에 정확한 비교가 일어난다고 보장할 수 없습니다.

그렇기 때문에 attr을 어떻게 정확하게 비교할 수 있을지에 대한 로직을 구현해보는것이 액션 플랜 1이고,

변경사항을 한번에 모아서 realDOM에 렌더링하는 로직을 구현하지 못했기 때문에 이에 대한 답을 찾아내는 것이 액션 플랜 2가 되겠습니다.

지금까지 코드리포트는 1일에 1번씩을 원칙으로 삼고 진행했습니다.

하지만 최근 4일동안 2일을 1개 포스팅으로 퉁쳐서 코드리포트를 올렸는데요.

왜냐하면 고민한 주제가 같았기 때문입니다.

1. 고민들을 한번에 모아서 코드리포트에 반영하느냐,

2. 끝나지않은 고민들이라도 매일매일 리포트하느냐

이렇게 선택할 수 있을 것 같은데, 1번으로 하게되면 고민이 끝나지 않으면 영원히 리포트를 하지 않을 수도 있기 때문에

지난 4일간의 실수를 딛고 앞으로 매일매일 코드리포트를 통해서 인사이트를 얻는걸로 해야겠습니다.