리액트 라우팅리액트는 기본적으로 SPA(Single Page Application)이다.즉, 처음에 한 번 HTML 페이지를 브라우저에 내려주고, 이후 페이지 이동은 브라우저 전체 새로고침 없이 컴포넌트를 바꿔서 화면을 갱신하는 방식!그렇기 때문에, 리액트 라우팅은 URL에 따라 어떤 컴포넌트를 보여줄지 결정하는 역할을 한다. BrowserRouter (History API 기반) HTML5 History API를 사용URL이 /chicken으로 바뀌어도 브라우저 전체가 새로고침 되지 않고, 리액트가 알아서 해당 경로에 맞는 컴포넌트를 렌더링URL 변경 시 브라우저의 주소 표시줄은 바뀌지만 서버에는 요청이 가지 않음..!import { BrowserRouter, Routes, Route } from 'r..

Why.. ?프론트 엔드 개발을 하면서 정말 많이 듣는 키워드이다사용할 줄은 알지만 어떤 원리로 돌아갈?까에 대한 궁금증이 머릿속을 떠나지 않아서 한번 정리해보려고 한다..렌더링 전략을 정확히 파악해서 나중에는 적절히 사용해서 좋은 사용자 경험이 있는 앱을 만들어보고싶다.. 이미 잘 만들고 있을 수도 있고 아닐수도 있음..이미 나온지도 한참 지난 개념이지만.. 이제 와서라도 정리를 해보려고한다..핵심!!!첫 화면을 어떻게 보여줄까에 대한 차이이다..! CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static Site Generation)은 모두 첫 화면을 사용자에게 어떻게 보여줄지에 대한 렌더링 전략일 뿐이다..!페이지 단위의 전략! 서버 컴..

SSR과 CSRCSR(Client-Side Rendering)브라우저에서 JS가 실행되면서 DOM을 만들고, React 컴포넌트들이 렌더링됨.SSR(Server-Side Rendering)서버에서 미리 HTML을 만들어서 브라우저로 보내줌. 브라우저는 HTML을 즉시 보여줄 수 있어서 첫 화면 표시 속도(First Paint)가 빨라짐.하지만 이 상태에서는 단순히 정적인 HTML일 뿐, 아직 React 이벤트 핸들러나 상태 관리 로직이 붙어 있지 않아 "인터랙션 불가능" 상태임Hydration ?Hydration은 SSR로 만들어진 정적인 HTML에 React가 이벤트 핸들러, 상태 관리, 컴포넌트 트리 등을 연결하는 과정!서버가 미리 만들어준 HTML을 재사용하면서, 클라이언트에서 React 앱을 "살..

React Fiber와 필요한 부분만 업데이트 원리Virtual DOM만으로는 부족했던 점예전(React 15까지)에는 Virtual DOM diff를 한 번에 끝까지 수행했음!문제: 큰 트리에서 렌더링 작업이 오래 걸리면,브라우저가 사용자 입력·애니메이션·스크롤 같은 중요한 이벤트를 처리하지 못해 UI가 버벅임.Fiber의 등장 (React 16~)Fiber는 React 컴포넌트 트리를 순회하고 업데이트하는 작업 단위(작은 조각).이 작업 단위를 잘게 쪼개서 일시 중단(pause) / 재개(resume) / 취소(abort) 할 수 있게 만든 게 핵심.덕분에 React는 렌더링 중에도 브라우저에게 CPU를 잠깐 양보할 수 있음.우선순위 기반 스케줄링Fiber는 "해야 할 일"을 종류별로 우선순위(pri..