Deep Dive Magic Code
- All19
- 기타1
- react17
- redux1
2차 창작물에 대해서(유튜브, 블로그)
블로그를 통해 리액트 톺아보기를 작성하고 공유한 이유는 제 호기심을 해결하는 과정에서 얻은 지식을 남들과 나누고 왜? 또는 어떻게? 라는 질문에 답을 찾아가는 과정을 두려워하지 말았으면 하는 작은 소망에 시작하였습니다. 제가 바랬던 2차 창작물은 제 글과 자료를 그대로 사용하는 게 아닌 또는 리액트 톺아보기에 작성된 내용에만 갇혀있는 게 아닌, 리액트 톺…
React 18 톺아보기 - 04. Concurrent Render
리액트의 동시성을 다음과 같이 설명했습니다. “대규모 화면 전환에서도 높은 응답성을 유지할 수 있다.” “화면 전환”은 Transition Lane에서 알아보았고 이번에는 “높은 응답성을 유지할 수 있다.”을 알아볼 차례입니다. 이를 이해하기 위해서는 리액트의 환경을 생각해보아야 합니다. 리액트는 Javascript로 구현되었고 대게 브라우저 위에서 동…
React 18 톺아보기 - 03. Transition Lane_2
Lane 모델이 해결하고자 하는 문제점을 다음과 같이 짚어보았습니다. 업데이트의 개념 분리 불필요한 렌더링 건너뛰기 우선순위가 더 높은 업데이트를 먼저 처리하기 위 세 개 모두 Transition Lane과 연관있는 기능이며 Transition Lane을 설명하기에 적절한 주제입니다. 하나씩 짚어보며 설명을 이어가겠습니다. 1. 업데이트의 개념 분리 La…
React 18 톺아보기 - 03. Transition Lane_1
Transition Transition Lane을 알아보기에 앞서 전환(Transition)에 대해서 좀 더 익숙해질 필요가 있습니다. 다행히 React 18 Working Group에서 startTransition API에 대해 예제와 함께 친절히 설명하는 내용이 있습니다(참고). 이 내용을 바탕으로 살을 조금 더 보태어 전환을 완전히 이해하고 넘어가겠…
React 18 톺아보기 - 02. Lane 모델
Lane은 렌더링에서 동시성을 가져감에 있어 기존의 한계를 해결하기 위해 새롭게 도입된 모델입니다. Lane 이전에는 Expiration Time 모델을 통해서 관리가 되었는데, 해당 모델에 어떠한 한계가 있었는지 먼저 짚어보고 Lane 모델로 넘어가겠습니다. Expiration Time의 정의는 이전 포스터에서 확인하세요. Expiration Time …
React 18 톺아보기 - 01. Intro
리액트 18이 정식 배포된 지 어느덧 1년이 지났습니다. 여러분은 신규 기능을 잘 활용하고 계시는지 궁금하네요. 이전 주제와 마찬가지로 이번 주제도 리액트를 개발함에 있어 몰라도 문제 없는 내용입니다. 사용법을 알려 드리려고 하는 게 아니기 때문이죠. 하지만 구현 사항을 이해하고 있는 것과 아닌 것의 차이는 매우 다양한 곳에서 나타납니다. 보다 깊이 있게…
React 18 분석을 시작해보려합니다.
안녕하세요. 마지막 포스팅이 벌써 2년 전이네요. 오랫동안 포스팅이 없음에도 아직도 제 블로그를 찾아주시는 분들이 계시네요😅 드디어 React 18이 공식 배포되었습니다. 17과 비교해서 내부 동작이 어떻게 굴러가는지 호기심을 자극하는 부분들이 참 많아졌습니다. 서버 사이드를 제외하고 클라이언트 사이드에서 새롭게 도입된 부분들은 대부분 비동기와 밀접하게 …
React 톺아보기 - 05. Reconciler_5
모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다. 포스트별 주제 훅을 통해 컴포넌트 상태를 업데이트한다. 업데이트를 반영할 Work를 scheduler에게 전달하고 scheduler는 스케줄링된 Task를 적절한 시기에 실행한다. …
React 톺아보기 - 05. Reconciler_4
모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다. 현재 분석을 1 ~ 5 업데이트된 컴포넌트를 호출하여 반환받은 element를 fiber로 확장까지 진행하였습니다. 그리고 이 fiber는 reconcileChildren()에서 반…
React 톺아보기 - 05. Reconciler_3
모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다. 6 - 6 reconcileChildren() 재조정 작업의 목적은 VDOM 트리에서 변경이 발생한 부분을 효과적으로 비교하여 새로운 트리를 만들어내는 것입니다. 이때 효과적이란 최…