2023년에 NextJs가 13버전으로 업그레이드 되면서 서버 컴포넌트를 도입하였습니다.저는 해당 기술을 봤을 때, 단순히 SSR + 스트리밍을 활용하여 SPA의 문제점을 개선한다고 생각했습니다.하지만 직접 React + SSR을 구현해보니 NextJs가 활용하는 서버 컴포넌트 + SSR은 당연히 문제점을 개선하지만, 더 나아가 근본적인 문제를 해결하려한다는 것을 이해하였습니다. hydrateRoot + renderToPipeableStream를 이용한 React SSR 구현React 18부터 제공된 renderToPipeableSteam은 리액트 컴포넌트를 스트리밍 가능하게 합니다.정확히는 리액트 트리를 스트리밍 합니다. (renderToPipeableStream renders a React tree ..
React 앱의 전통적인 방식과 변화기본적으로 React는 SPA입니다.이 말은 즉 초기에 HTML 껍데기와 js 번들을 제공하고 이후에는 js를 이용하여 컨텐츠를 렌더링하는 방식을 사용한다는 뜻입니다.하지만 최근들어 NextJs가 많은 인기를 얻고, 다시 MPA에 대한 관심이 올라갔습니다.이러한 변화에 맞게 리액트 쿼리를 서버에서 사용하는 방법과 그 이점을 알아보려합니다. Server Components에서 React Query의 존재 의미서버 컴포넌트는 기본적으로 컴포넌트 자체에서 데이터를 가져오는 기능을 제공합니다.export default async function App() { const { data } = await fetchData(); // ...} 여기서 생기는 의문은 Server C..
Suspense의 필요성서버 상태를 다룰 때, 중요하게 고려해야 할 점 중 하나가 데이터를 요청하는 시점과 실제로 데이터를 받는 시점 사이에 일정한 시간이 존재한다는 점입니다.이 말은 즉, 데이터를 요청해도 즉시 도착하지 않을 뿐더러 언제 도착할지, 실제로 도착할지 모른다는 점입니다.리액트 쿼리에서는 이러한 부분을 해결하기 위해 `status`를 다루는 `isLoading`, `isPending` 등을 이용하여 데이터의 상태를 다루었습니다. 예를 들어 아래와 같습니다.function useIssues(search) { return useQuery({ queryKey: ['issues', search], queryFn: () => fetchIssues(search), enabled: se..
외부 상태와 결합하기 위해서는?React 앱을 구축하다 보면 종종 외부 상태와 결합해야 하는 상황이 찾아옵니다.예를 들어 브라우저 API가 있습니다. (geolocation, localStorage)또는 서드파티 라이브러리들도 있습니다. (WebSocket 연결을 관리하는 라이브러리) 이러한 외부 상태들을 React 앱에 통합하려 하면 일반적인 방법으로는 불가능합니다. // 🚫 잘못된 방법function OnlineStatus() { const [isOnline, setIsOnline] = useState(navigator.onLine); useEffect(() => { const updateStatus = () => { setIsOnline(navig..
최근에 회사에서 헤드리스 컴포넌트를 이용하여 공통 컴포넌트를 구현하였습니다.이에 대한 정리를 겸해서 헤드리스 컴포넌트가 무엇인지, 그리고 사용하면 어떤 점이 좋은지 등을 알아보겠습니다. 헤드리스 컴포넌트란? Completely unstyled, fully accessible UI components유명한 헤드리스 컴포넌트 라이브러리 중 하나인 `HeadlessUI`의 소개글입니다.여기서 설명하는 것을 보면 스타일이 없는, 완전히 접근 가능한(접근성이 좋은) UI 컴포넌트라고 설명하고 있습니다. 여기서 주목할 점은 두 가지입니다: 1. 스타일이 없는2. 접근성이 좋은 만약 이게 일반적인 디자인 시스템 라이브러리였다면 1번의 문구를 자신들의 메인에 작성해놓지 않았을 것입니다.하지만 헤드리스는 다릅니다. 스타..
[참고: suspense-in-react-18] rfcs/text/0213-suspense-in-react-18.md at main · reactjs/rfcsRFCs for changes to React. Contribute to reactjs/rfcs development by creating an account on GitHub.github.com 배경``는 React v16.6.0에서 최초로 선보여졌고, 이때에는 **code splitting**에서만 사용되었습니다`React.lazy`를 통해 lazy 로드를 한 코드에 대해 Suspense 경계를 생성하고 해당 코드를 필요한(사용될) 경우에만 임포트 하는 방식으로 사용하였습니다.즉 클라이언트 사이드에서만 사용되었습니다 React 팀은 v18에서 이..
[참고: useLayoutEffect]useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.공식문서에서 `useLayoutEffect`는 브라우저가 리페인트되기 전에 실행되는 `useEffect`라고 서술합니다그대로 이해하면 React 컴포넌트가 브라우저에 그려지기전에 `useLayoutEffect`의 로직이 먼저 실행된다는 뜻입니다 이게 정확히 무슨뜻인지 이해하기 전에, 이게 의미가 있는 훅일까요?브라우저가 리페인트되기 전 / 후가 `useEffect` 로직 실행이랑 무슨 상관일까요? 이를 이해하기 위해서는 리액트의 생명주기를 이해하면 좋습니다리액트 생명주기는 아래와 같습니다 1. 마운트 - ..
[이전 글: Suspense를 활용하면 스피너 지옥에서 탈출할 수 있습니다] [React] Suspense를 활용하면 스피너 지옥에서 탈출할 수 있습니다[참고: Suspense] – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-imajoseph0926.tistory.com 이전 글에서 `Suspense`에 대해서 알아보고 어떤 방식으로 동작하는..
