2025 리액트 기여자 되기

가장 많이 쓰는 라이브러리가 리액트인데 그만큼 깊게 이해하고 있는 것 같지는 않아 리액트 소스코드를 공부하기로 했습니다. 어떤 개발자분 소개에 '리액트 컨트리뷰터'가 있는게 멋져보이기도 했고요.

다른 블로그 글들과 달리 이건 저도 잘 모르는 내용이라서 주저리주저리 느낀 점들을 써나갈 예정입니다. 나중에 돌아보면 재밌을 것 같네요 🤗

React source code deep dive 시리즈의 도움을 많이 받았습니다. 자료의 커리큘럼을 따라 리액트 코드를 살펴보면서 스스로 이해한 과정과 따로 찾아본 내용들을 기록했습니다.

시작하기 앞서

  1. 리액트 코드 직접 수정해서 써보기
  2. Trigger, Schedule, Render, Commit

처음 UI를 그리는 과정

아래 코드가 초기 렌더되기까지 벌어지는 일을 알아봅시다.

  1. ReactDOM은 생각보다 심플하다
  2. 렌더링 예약하기
  3. 리액트의 트리 순회법
  4. 트리가 두 개 필요하다
  5. 첫 Fiber 만들기
  6. 나머지 Fiber 만들기
  7. Fiber 보고 DOM 만들기
  8. 만든 DOM 화면에 반영하기

UI를 다시 그리는 과정

아래 코드에서 버튼을 눌렀을 때 리렌더되는 과정을 따라가봅시다.

  1. 확인할 노드가 마킹된다
  2. 재활용되는 Fiber
seongyeol