This text is an excerpt that has been reprocessed from the original post. It is intended solely for the purposes of documentation and learning.
이걸 왜 하는데?
오픈소스는 도움이 된다.
최근 한달간 강제로 어떤 라이브러리의 오픈소스를 뒤지고, 버그를 찾고, 개선점을 찾는 일을 한 적이 있다. 그 과정에서 여러 교훈을 배우게 되었는데,
-
오픈소스라고 완벽하지 않다.
오픈소스는 무적이고, 신이라고 생각하던 코린이 시절을 벗어나 '아, 이것도 결국 누가 만든거구나. 결점이 없을 수 없구나'라는 생각을 하게 되었다.
-
그럼에도, 한 시스템을 정교하게 구사하였다.
당연하게도, 나보다 훨씬 뛰어나신 분들이 고심끝에 만들어낸 시스템이니 배울게 무지하게도 많다. 설계, 고민의 흔적들, 그리고 그것을 녹여낸 코드까지, 배울점이 수두룩하다.
-
이해를 통해, 새로운것을 보게 된다.
시스템을 이해하고, 고민의 길을 따라가다 보면 개발자가 놓친 부분을 발견하기 마련이다. 이것을 내 프로젝트(아니면 회사)에 어떻게 개선하여 적용할 수 있을지 고민하게 된다.
그래서 왜 리액트인데?
포스팅을 하기 전에 조금 리서치를 해보았다. 리액트는 확실히 잘 짜여졌지만, 일기 어려운 소스라고 하더라. 하지만, 현재 FE 생태계에 빠질 수 없는 라이브러리이기도 하고, 앵귤러를 사용하는 입장에서 왜 리액트는 새로운 패턴으로 계속 발전해 가는지 궁금하게 되었다.
자그마한 팁들
그래서 위의 내용을 종합해서, 리액트 오픈소스를 더 잘 이해하기 위해서는 이런 방법들이 되움이 된다.
-
공식문서
React.dev 이만큼 좋은게 사실 없다. 개발자들이 왜 이렇게 시스템을 구성했는지, 그리고 리액트 기초를 알기 쉽다.
-
리액트 레포
오픈소스 코드가 있는 곳.
https://github.com/facebook/react -
오직 코드
다른 블로그 글이나 동영상도 좋지만, 오직 코드만 믿어라. 직접 뜯어보면서 설계를 감상해라.
-
중요한 것만 찾아라
모든 코드 한줄 한줄 이해하기는 어렵다. 특히, 리액트가 그렇단다. 먼저 내가 알고 싶은 핵심 기능들을 하나하나 따라가며 이해하고, 큰 퍼즐을 맞춘다는 생각으로 시작하자.
드디어 본론
그래서 리액트는 어떻게 작동하는 것일까?
Trigger
트리거는 랜더링을 돌리게하는 첫번째 스텝으로, 첫 랜더링이던 재랜더링이던 일단 먼저 어떤 요소들이 다시 생성되야 하는지 찾는 과정이 되겠다.
Schedule
트리거에 걸린 요소들은 PQ로 관리되며 어떤 요소가 먼저 랜더링이 되는지 정하는 스텝이 바로 Schedule이 되겠다.
Render
이 과정을 통해 fiber tree에서 요소를 갱신하게 된다. 이 과정이 가장 복잡해 보인다.
Commit
이제 새로 업데이트된 fiber tree를 host dom에 적용하는 시간이다. 그리고 단순히 새로운 요소만 적용되는 단계가 아닌, 우리가 알고있는 여러 effect들이 이 단계에서 실행된다고 한다.
물론 이 과정도 아직 어떻게 이루어지는지 모르고, 직접 까봐야 할게 많지만, 일단 개요를 알고 시작하면 홀가분하니 적어보았다! 이 다음에는 Mount가 무엇인지 살펴보고자 한다.
Retrieved from ..
