[TIL] 나는 React Query를 왜 사용했을까?

📌 들어가며React를 사용하며 처음에는 API 요청을 useEffect와 useState로 직접 관리했다.단순한 데이터 요청이라면 괜찮았지만, 프로젝트가 커질수록 아래와 같은 문제가 생겼다.동일한 데이터를 여러 컴포넌트에서 사용하면서 중복 요청이 발생데이터가 갱신되어도 화면에 즉시 반영되지 않음로딩/에러 상태를 직접 관리해야하는 불편함 발생결국 "서버에서 가져온 비동기 응답을 어떻게 효율적으로 처리할 것인가" 가 중요한 과제가 되었다.📌 React Query가 뭔데?React Query는 위와 같은 문제를 해결하기 위해 만들어진 서버 상태 관리 라이브러리다. Zustand나 Redux가 클라이언트 상태를 관리하는 데 초점을 둔다면, React Query는 서버의 데이터(fetch, cache, sy..

• format_list_bulleted FE/React
• · 2025. 11. 14.
• textsms

[TIL] 제어 컴포넌트와 비제어 컴포넌트 (feat. React Hook Form + Zod)

📌 들어가며React의 폼 입력 관리 방식인 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)를 비교하고, 비제어 방식의 단점을 React Hook Form이 어떻게 보완하는지, 그리고 Zod와 함께 사용하면 좋은 이유를 정리한다.📌 제어 컴포넌트 (Controlled Component)React의 state가 입력값을 직접 제어하는 방식function ControlledInput() { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> ); }입력값(value)이 항상 state에 의해 결정됨React 렌더링마다 값이 ..

• format_list_bulleted FE/React
• · 2025. 11. 14.
• textsms

[React 까보기] 5. setState (feat. dispatchAction)

useState를 호출한다는 것은 mountState 함수를 호출하는 것과 같다는 것을 이전 포스팅에서 알아보았다.따라서 우리가 잘 알고있는 setState를 통해 상태를 업데이트 하는 과정은 dispatch 함수를 분석한다면 알 수 있을 것 이다.위에서 말한 dispatch 함수에는 dispatchAction.bind() 함수의 값이 할당 되어 있으므로 dispatchAction을 분석해보겠다.1️⃣ dispatchAction 함수 function dispatchAction( fiber: Fiber, queue: UpdateQueue, action: A,) { // 3. update 소비중 다시 update 발생 // renderWithHooks 내부에서 1씩 증가시켰던 numberOfRere..

• format_list_bulleted FE/React
• · 2025. 6. 11.
• textsms

[React 까보기] 4. useState 의 구현체

이전 포스팅(3. Hook 구현체 찾아가기) 에서 renderWithHooks 내부의 ReactCurrentDispatcher.current = HooksDispatcherOnMount 를 확인하였고,HooksDispatcherOnMount 에서 mountState를 발견하였다. 이때 mountState를 분석하면아래에 나올 hook, queue, update 객체를 살펴볼 수 있다.0️⃣ mountState()function mountState( initialState: (() => S) | S,): [S, Dispatch>] { // 1번 const hook = mountWorkInProgressHook(); // 초기 state if (typeof initialState === 'fun..

• format_list_bulleted FE/React
• · 2025. 6. 11.
• textsms

[React 까보기] 3. Hook 구현체 찾아가기

1️⃣ useState가 코드로 정의된 곳은 어디일까? Reconciler 까지 찾아가기!react 코어 → ReactHooks.js 모듈 → ReactCurrentDispatcher 모듈 → current:null 인 객체가 끝?(리액트 코어 패키지는 react 요소에 대한 내용만 포함할 뿐 훅을 구현하고있지 않다.)Render Phase에서 VDOM으로 리액트 요소가 올라갈때 hook에 대한 정보를 포함하게 된다. (리액트 요소가 Fiber로 확장되기 전에는 필수적인 정보만 포함한다)VDOM에 재조정 하기 위한 과정중 하나인 Fiber로 확장하는 작업은 Reconciler가 Render Phase에서 수행하게된다.따라서 Reconciler가 hook에 대한 정보를 알 수 있을것이라 추측하고, Reco..

• format_list_bulleted FE/React
• · 2025. 4. 26.
• textsms

[React 까보기] 2. VDOM 과 React lifecycle

1️⃣ Virtual DOM더블 버퍼링 형태종류DOM에 마운트된 current 트리(fiber 노드로 구성됨)Render Phase에서 작업 중인 workInProgress 트리(동일한 fiber 노드로 구성됨)→ workInProgress 트리가 Commit Phase를 지나면 current 트리로 관리(할당)된다더블 버퍼링 형태이기 때문에 리액트는 작업 우선순위에 맞게 유연하게 대처 가능ex) workInProgress에 작업하다가 버리고 처음부터 다시시작 or 중지시켰다가 다시시작 workInProgress 는 current에서 자기 복제하여 alternate 로 참조하는 방식으로 만들어진다.VDOM 노드는 자식을 child로 참조하는데 first child만 참조, 나머지 자식들은 이전 형제가 s..

• format_list_bulleted FE/React
• · 2025. 4. 14.
• textsms