1. 어떻게 내가 한 행동을 반영할까보통 웹을 이용하면 많은 상호작용이 가능합니다.그리고 그 상호작용을 통해 어떠한 결과를 기대합니다.예를들어로그인 버튼 누름 → 로그인 페이지로 넘어감댓글 추천 버튼을 누름 → 추천수가 +1즉 우리는 어떠한 행동을 하고 그 행동에 대한 기대를 가지고있습니다.이러한 기대를 충족시키는 방법은 여러 방법이 있습니다.특히 리액트(SPA) 이전의 많은 라이브러리들은 명령형 방식을 채택하였습니다.명령형 방식을 간단히 서술하면 “내가(개발자가) 변화를 어떻게 반영할지 결정”하는 방식이라고 볼수 있습니다.예를들어이벤트 리스너에서 DOM 요소를 찾고innerText나 classList를 직접 조작하며필요하면 상태를 전역 변수에 따로 업데이트하지만 규모가 커질수록 “언제, 어디를, 어떤 ..
리액트는 기본적으로 가상 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: [] }, ],..
리액트팀은 정식적인 기능으로 도입하기전에 "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..
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에서는 주로 react-router-dom을 이용해서 라우팅을 처리하고, next.js에서는 내장된 파일/폴더 기반 라우팅을 이용합니다저는 주로 next.js를 사용해서 파일/폴더 기반 라우팅이 더 익숙하였고, 이를 react-router-dom에서도 사용하고싶은 마음에 시작하였습니다. 프로젝트 아이디어기본적인 아이디어는 next.js의 폴더 기반 라우팅을 그대로 구현하는거였습니다.즉 [폴더명]/page.tsx 구조로 제한을 걸고 폴더명이 path가 되는 방식입니다 이를 위해서는 내부적으로 폴더/파일 구조를 탐색하고 이 특정 패턴의 폴더/파일 경로를 가져와서 react-router object로 바꾸는 방법이 있다고 생각하였습니다 실제 구현`import.meta.glob()`를 활..
[참고: 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. 마운트 - ..
