들어가면서

5주차엔 나만의 React 만들기라는 주제로 과제를 진행했습니다. React의 핵심 개념에 대해 직접 구현해보고 내부 동작을 학습할 수 있었던 주차였습니다.

저는 easy 단계를 선택했고, 이 단계에서 가상 DOM을 직접 구현하고 이벤트 위임 방식을 통한 이벤트 핸들러 적용, diff 알고리즘을 적용해 렌더링 성능을 개선하는 과정을 경험할 수 있었습니다.

추후에는 hard 단계도 도전하여 react의 훅이 어떻게 이전의 상태를 관리하고 유지할 수 있는지, 컴포넌트의 라이프 사이클을 어떻게 관리할 수 있는지에 대해서 학습해보려 합니다.

가상 DOM

DOM의 형태를 본따 만든 JS 객체

실제 DOM이 다음과 같이 구성되어 있을 때

<li>
  <input type="checkbox" class="toggle" />
    todo list item 1
  <button class="remove">삭제</button>
</li>

가상 DOM은 아래와 같이 구성되어 있습니다.

virtualDom('li', null,
    virtualDom('input', { type: 'checkbox', className: 'toggle' }),
    'todo list item 1',
    virtualDom('button', { className: 'remove' }, '삭제')
),
  

가상 DOM의 문제점은 가독성입니다. 따라서 이를 해결하기 위해 등장한 것이 JSX라고 합니다.

이벤트 위임

각 요소마다 이벤트를 붙이는 것이 아닌, 이벤트 위임 방식으로 이벤트를 등록하는 이유는 무엇일까요?

제가 내린 결론은 아래와 같습니다.

• 각 요소마다 이벤트를 등록해야 하는 번거로움 + 메모리 낭비 방지 (메모리 사용을 줄이고 성능을 향상시키는 효과적인 방법)
• 새로운 요소가 추가 되더라도 매번 이벤트를 추가하지 않아도 됨 (동적으로 생성되는 요소들의 이벤트를 효율적으로 관리할 수 있음)

diff 알고리즘

실제 DOM과 가상 DOM을 비교하여 변경된 부분만 찾아내어 실제 DOM에 반영하는 알고리즘

oldNode와 newNode를 비교하여 변경된 부분만 찾아 실제 DOM에 반영함으로써 렌더링 성능을 향상시킨 것을 알 수 있었습니다.

updateElement(target, newNode, oldNode)라는 업데이트 함수가 있을 때

1. oldNode만 있는 경우

• oldNode를 target에서 제거합니다.

2. newNode만 있는 경우

• newNode를 target에 추가합니다.

3. oldNode와 newNode 모두 string 타입일 경우

• oldNode와 newNode의 내용이 다르다면 newNode의 내용으로 교체합니다.

4. oldNode와 newNode의 type이 다른 경우 (둘 중 하나가 string 타입이더라도 해당됩니다.)

• oldNode를 제거하고 해당 위치에 newNode를 추가합니다.

5. oldNode와 newNode의 type이 같은 경우

• oldNode와 newNode의 attribute를 비교하여 변경된 부분만 반영합니다.
  • oldNode attribute 중 newNode에 없는 것은 모두 제거
  • newNode의 attribute에서 변경된 내용만 oldNode의 attribute에 반영

이 과정을 자식 태그까지 반복하여 내용을 업데이트하게 됩니다.

---

👍 Keep

과제의 핵심 키워드 파악하기

지난 주차들과는 달리, 이번 주차 과제를 진행하면서 과제에서 핵심 키워드는 무엇일까?에 대한 고민을 계속 하려고 했습니다. 무작정 코드를 치는 것이 아닌, 과제의 목적을 파악하고 키워드에 대해 학습하려는 노력을 많이 했던 것 같습니다.

지난 주차의 아쉬움이었던 과제 통과를 위한 무작정 코딩에서 벗어나, 과제 핵심 키워드에 대해 고민해봄으로써 어제보다 나은 오늘의 내가 되었다는 점에서 의미 있는 한 주였습니다.

---

‼️ Problem

목요일 모각코 금지 🚫

이번주는 화요일, 목요일 총 2번의 모각코를 진행했는데요... 목요일 모각코는 하면 안되겠다는 생각이 들더라구요...ㅎㅎ
화요일은 집중도 잘되고 시간 대비 효율이 잘 나와 만족스러웠는데 목요일은 밤샘이 강제되는 느낌 + 마감 전날이라 오히려 집중이 잘 안되는 느낌이랄까요... 조금은 힘들었던 것 같습니다.

과제의 압박이 덜한 월, 화에 모각코하기 !

---

🔥 Try

hard 도전하기

easy 단계를 수행한 만큼 hard 과제도 진행하며 코치님께서 제공해주신 모든 학습 키워드 학습하기 !!!! 🔥🔥🔥🔥

---

마무리하면서

이번주는 중간 네트워킹이 진행되었던 주차이기도 했는데요 !!
좋은 자리를 만들어주신 매니저님과 학습 메이트님들께 감사의 말씀을 전합니다 👍 너무 재미있었고 유익했던 시간이었어요 ㅎ.ㅎ
좋은 기회로 4팀과 크라임씬 약속도 다녀올 수 있었는데 너무너무너무너무너무너무너무 재밌었습니다 😁 (다음에 또 초대해주세요 !)

학습뿐만 아니라 많은 네트워킹 기회를 가질 수 있다는 점도 항해 플러스의 큰 장점인 것 같습니다. 함께하는 분들을 알아가며 많은 자극을 받을 수 있어 좋은 것 같습니다.
(항해 플러스 하길 너무너무 잘했다 !!!! 🔥)

모각코 모집 토크 중인 저희의 모습을 마지막으로 5주차 회고도 마무리 해보겠습니다 😊
(우리 제법 귀여울지도....?? 이와중에 머리에 싸커킥 날리는 영코....ㅠ)

---

참고 자료

• https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_4-diff-%E1%84%8B%E1%85%A1%E1%86%AF%E1%84%80%E1%85%A9%E1%84%85%E1%85%B5%E1%84%8C%E1%85%B3%E1%86%B7-%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC
• https://devocean.sk.com/blog/techBoardDetail.do?ID=165601&boardType=techBlog