[SeoIn] Virtual-DOM

[Seoin02]

공부한 것

• 전에 브라우저 렌더링을 면접 질문에 답할 정도로 공부하긴 했으나 시각화 자료를 보며 자세하게 공부했습니다. 특히, 이전에 visibility: hidden을 적용했을 때 UI가 다르게 나타나는 사파리 크로스 브라우징 이슈를 겪었었는데, display: none과의 차이를 확실하게 알았습니다. display: none은 visibility: hidden과 다르게 렌더링 트리에서 요소를 완전히 제거하며 레이아웃에 포함하지 않습니다.
• DOM에 변경이 있는 렌더링 단계에서 브라우저 연산이 일어나는데 브라우저 연산이 많이 발생하면 브라우저 성능을 잡아먹고, 브라우저 엔진에 부담을 줍니다.
• 그래서 실제 DOM이 아닌 순수객체로 이뤄진 가상 DOM을 활용해 바뀐 부분만 확인해 실제 DOM에 반영하는 방식(diff 알고리즘)이 성능 개선에 도움됩니다. 또, 개발자는 사용자의 인터랙션에 의해 바뀐 부분만 렌더링되면 전체가 렌더링될 때보다 예측가능한 개발을 할 수 있고, 유지보수 측면에서도 유용할 수 있습니다.
• 이 과정을 실제로 구현해보니까 이유를 설명할 수 있을 정도로 이해하게 된 것 같습니다.
• 리액트없이 babel 세팅으로 jsx를 사용하려고 하니 생소하고, 어려웠으나 jsx로 사용하는 게 가독성에 정말 좋은 것 같습니다.

고민 점

• diff 알고리즘을 검색하다보니 리액트 팀에서 diff의 한계를 보완하기 위해 fiber를 도입했다고 하는데 이 부분은 더 찾아봐야겠습니다.

[D5ng]

diff 알고리즘을 검색하다보니 리액트 팀에서 diff의 한계를 보완하기 위해 fiber를 도입했다고 하는데 이 부분은 더 찾아봐야겠습니다.

Fiber 이전에 리액트트 스택 기반 재조정 알고리즘으로 사용하다보니 렌더링 우선 순위 같은 문제를 해결할 수 없었다고 하네요. 즉 동기적으로 사용했다고 볼 수 있어요!. 지금은 렌더링을 작은 단위로 나누고 비동기로 동작하도록 하여 우선 순위 문제를 해결할 수 있었다고 합니다!

제 생각이지만 이 때부터 리액트가 렌더링 관련한 UX를 많이 신경쓰는것 같아요. React 18버전에서는 Fiber를 바탕으로 중요한 작업과 덜 중요한 작업들을 나누어 처리하고 있는것 처럼요!

[D5ng]

Virtual DOM 만드는게 어려웠을텐데 고생 많으셨습니다! 저랑은 다르게 구현을 하였지만 VirtualDOM을 이해하는데 큰 문제가 없는것 같아요!

한 가지 궁금한건 JSX를 사용하지 않고 RealDOM의 형태를 사용하여 구현하셨는데, JSX를 사용한것과 비교했을 때 어떤 느낌이였나요 ?

[D5ng]

저는 vite.config.ts에서 세팅했는데, 이렇게 해도 잘 동작하나보네요!

이 방법이 원초적인것 같아 좋은것 같네요. 참고해서 다시 해봐야겠어요 👍