Overview 이전 포스팅 Conceptual Model of React Suspense과, Algebraic Effects of React Suspense에서 React가 Suspense를 어떤 관점으로 바라보고 있는지, 그리고 어떤 개념적 모델을 바탕으로 구성되어 있는지를 살펴보았습니다. 이번 포스팅에서는 이러한 내용들을 바탕으로 Suspense가 실제로 React 소스 코드 레벨에서 어떻게 구현되어 있고, 구체적으로 어떤 과정을 거쳐 동작하게 되는지를 간략하게 살펴보도록 하겠습니다. (소스 코드는 글을 작성하는 시점의 최신 코드를 기반으로 하지만, React 프로젝트는 코드가 굉장히 자주 바뀌는 편이기 때문에 변경사항이 생길 수 있습니다.) Recap Example Code 이전 포스팅에서 언급한..

Overview 이전 글들 (Conceptual Model of React Suspense, Algebraic Effects of React Suspense, Suspense SSR Architecture in React 18)에 이어 Suspense의 동작 원리에 대해 Source Code Level에서 다루는 포스팅을 준비하고 있었습니다. 하지만 막상 Code Level에서 이를 분석하려고 하니 너무나 방대한 React의 개념들과 용어들(Fiber, Scheduler, Task, Lane, performUnitOfWork, Double Buffering)을 능숙하게 이해하고 있음을 전제하여야 했고, 이 모든 내용을 하나의 포스팅에 담기는 어려울 것 같다는 결론을 내렸습니다. 따라서 React18에서 ..

Overview React Suspense의 개념적 모델을 다룬 이전 포스팅의 마지막 부분에서 Dan Abramov(React Core Team)의 Suspense에 대한 Comment를 잠깐 언급했습니다. 이 Comment에 대한 구체적인 내용은 아래 인용문과 같습니다. (아래 인용문은 Suspense가 Fallback UI를 처리하기 위해서 throw 된 Promise를 사용한다는 내용을 이해하고 있다는 것을 전제로 합니다. 해당 내용에 대한 이해가 필요하다면 이에 대해 다룬 이전 포스팅을 참고해 주세요) This builds on a React feature called “Suspense”, which is in active development for the data fetching use cas..

Overview React v18의 정식 릴리즈가 나오면서 Automatic Batching, Transition등 여러 Feature들이 소개되었습니다. 그중에는 React v16.6에 Experimental Feature로 등장했다가 이번에 정식으로 탑재된 "Suspense"에 대한 내용도 추가되어 있는데, 이번 포스팅에서는 특별히 이 Suspense라는 기능에 대해서 살펴보려고 합니다. What is Suspense? Suspense lets your components “wait” for something before they can render. In this example, two components wait for an asynchronous API call to fetch some data..

Kent. C Dodds의 'One simple trick to optimize React re-renders'를 Reference 하였습니다. Overview React를 사용해서 Web Application을 만들 때, 퍼포먼스의 향상하기 위하여 여러 가지 렌더링 최적화 기법들을 시도합니다. 대표적인 방법이 React.Memo를 사용하여 불필요한 리렌더링을 방지하기, 상태(State)를 업데이트 하는 로직은 최대한 하위 컴포넌트로 내리기등이 있습니다. 이번 포스팅에서는 자주 사용되고, 또 자주 접할 수 있는 위 두 가지 최적화 방법 이외에도 JSX가 가지고 있는 특성을 사용해서 불필요한 리 렌더링을 방지하는 방법을 살펴보려고 합니다. JSX JSX는 Javascript의 확장 문법으로, React에서..

Feedback 디자인 시안은 정말 중요하다. 웹 개발자가, 특히 작은 규모의 프로젝트에서 일하는 웹 프론트엔드 개발자가 빠지기 쉬운 함정 중의 하나는(내가 빠져서 그런가), 디자인 시안에 맞추어 개발하지 않고, 자신의 개발 편의에 맞춰 시안을 조금씩 조금씩 자기 입맛에 맞게 수정하려는 태도인 것 같다. 디자인 시안 (이번 같은 경우는 Zeplin)에 명시된 margin, color, font 등을 엄격하게 준수하고, 애매한 점이 있으면 (시안에 나오지 않는 애니메이션 효과 등) 해당 사항에 대해서 적극적으로 디자인 팀과 소통하여 의사결정을 하는 단계가 필요하다. 유들 있는 Validation. 프론트엔드를 개발한다고 하면 거의 대부분의 프로젝트에서 빠지지 않는 것이 Form Control이다. 사용자의..