리액트는 기본적으로 가상 DOM을 생성하여 해당 DOM에 변경사항을 반영하고, 이후 실제 DOM과의 비교를 통해 최종 업데이트 하는 방식을 가집니다.Stack Reconciler리액트 v16 이전에는 가상 DOM에서의 변경사항을 찾기 위해서 재귀적으로 노드를 DFS 방식으로 변경점을 찾았습니다.이걸 코드로 간단히 나타내면 아래와 같이 표현될수있습니다.// 가상 DOMconst prevVDOM = { type: "div", props: { id: "root" }, children: [ { type: "p", props: { text: "Hello" }, children: [] }, { type: "span", props: { text: "World" }, children: [] }, ],..
기존에 무엇이 문제였나?흔히들 React같은 SPA에 대한 문제를 언급할때 단골처럼 나오는 몇가지 문제가 존재합니다.초기 렌더링이 오래걸린다 / 초기 렌더링시에 빈화면이 보인다 / SEO 친화적이지 않다 ... 등등그러면 우선 왜? 저런 문제가 발생하는지를 알면 좋을거같습니다.왜 SPA는 빈화면이 노출되는가리액트같은 SPA의 동작방식은 간단히 말하면서버에 요청 -> 서버에서 진입점등이 포함된 아주 간단한 html 응답클라이언트에서 html 파싱 -> 태그등을 만나면 js 번들 요청html 파싱 완료 DOM 구축 -> 화면 표시 -> 근데 표시할게 없음 (보통만 존재하므로,,)js 번들 도착 -> js를 이용하여 진입점으로부터 렌더링 -> 화면 표시 완료이제부터는 서버에게 별도 요청없이 js를 이용하여 ..
리액트팀은 정식적인 기능으로 도입하기전에 "RFC"라는 곳에서 해당 기능에 대해서 논의합니다.제가 지금 살펴보려는 훅은 useEvent 훅입니다.https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md rfcs/text/0000-useevent.md at useevent · reactjs/rfcsRFCs for changes to React. Contribute to reactjs/rfcs development by creating an account on GitHub.github.com 위의 문서에 자세히 작성되어있지만 핵심은 아래와같습니다.문제점 (불편함)예를들어 아래 코드를 보시면,import { memo, useState } from..
2023년에 NextJs가 13버전으로 업그레이드 되면서 서버 컴포넌트를 도입하였습니다.저는 해당 기술을 봤을 때, 단순히 SSR + 스트리밍을 활용하여 SPA의 문제점을 개선한다고 생각했습니다.하지만 직접 React + SSR을 구현해보니 NextJs가 활용하는 서버 컴포넌트 + SSR은 당연히 문제점을 개선하지만, 더 나아가 근본적인 문제를 해결하려한다는 것을 이해하였습니다. hydrateRoot + renderToPipeableStream를 이용한 React SSR 구현React 18부터 제공된 renderToPipeableSteam은 리액트 컴포넌트를 스트리밍 가능하게 합니다.정확히는 리액트 트리를 스트리밍 합니다. (renderToPipeableStream renders a React tree ..
[참고: You-Dont-Know-JS] GitHub - getify/You-Dont-Know-JS: A book series on JavaScript. @YDKJS on twitter.A book series on JavaScript. @YDKJS on twitter. Contribute to getify/You-Dont-Know-JS development by creating an account on GitHub.github.com 자바스크립트 코드를 작성하다보면 무조건적으로 변수와 함수등을 선언하고 호출하는 경우가 생깁니다.근데 만약에 동일한 코드 베이스에 같은 이름의 변수가 2개 이상 존재한다면 자바스크립트는 이를 어떻게 처리할까요?또는 한 파일에 정의된 변수면 어디서든 참조 가능할까요?위 책은 ..
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..
