React

플리커링 현상을 해결하기 위해 해결책을 알아보던 중 hydration-safe 코드라는 개념을 발견했다. 물론 이름 자체가 중요한 건 아니지만 개념에 대해 자세히 익혀둘 필요가 느껴져 제대로 학습해두려고 한다.서버 렌더링 결과와 클라이언트에서의 초기 렌더 결과가 완전히

React로 서버사이드 렌더링(SSR)을 하다 보면 Hydration, Streaming SSR, Flight 같은 단어들이 등장한다.이 글에서는 React가 SSR 이후 어떻게 브라우저에서 살아나는지, 그리고 그 내부 구조가 어떻게 발전하고 있는지를 단계별로 정리해

React의 useState는 useEffect와 달리 렌더링 시점부터 관여하는 훨씬 앞단의 훅이다.그래서 SSR·Hydration 흐름 속에서 언제, 어디서, 어떻게 초기화되는지를 정확히 이해하면 Hydration-safe 코드를 작성할 때 훨씬 감이 잡힌다.Reac

비교 | Hook | 실행 시점 | 특징 | 사용 케이스 | |------|---------|------|-----------| | useEffect | 브라우저 페인트 후 | 비동기적, non-blocking | API 호출, 이벤트 리스너 | | useLayoutEffect | 페인트 전 | 동기적, blocking | DOM 측정, 스크롤 복원 | ...

"React는 UI를 효율적으로 업데이트합니다"라는 말을 자주 듣지만, 정확히 어떻게 효율적일까?이 글에서는 React가 브라우저의 렌더링 파이프라인 위에서 어떻게 작동하는지, 그 모든 과정을 자세히 알아가 보겠다.React 렌더링의 개념(2. React의 두 가지 단