도옹건 공부 일기

리액트 컴파일러React Compiler는 React 앱을 자동으로 최적화하는 빌드 타임 도구이다.현재 상태 (2026년 5월 기준)2024년 말 React 19와 함께 퍼블릭 베타로 공개됐고, 2025년 10월에 1.0 정식 릴리스가 나왔다. 메타의 대규모 프로덕션 앱에서 검증을 거쳐 프로덕션에 바로 쓸 수 있는 상태이며, React와 React Native 모두에서 동작한다. Next.js, Vite, Expo는 공식적으로 컴파일러를 지원한다.쓰면 뭐가 좋나요리액트 컴파일러가 없었을 땐 개발자가 직접 수동으로 메모이제이션을 해줘야함(React.memo, useMemo, useCallback)const ExpensiveList = memo(function ExpensiveList({ data, onCl..

모바일 뒤로가기 버튼으로 모달 닫기 구현하기Next.js 16 App Router 환경에서, 모바일 뒤로가기 버튼을 눌렀을 때 라우터가 이동하는 대신 모달이 닫히도록 구현한 과정을 정리했습니다.문제 정의모바일 웹에서 모달을 띄운 상태로 사용자가 브라우저(혹은 안드로이드 시스템)의 뒤로가기 버튼을 누르면, 기대와 다르게 이전 페이지로 라우팅되어 버립니다. 사용자 입장에서 뒤로가기는 "방금 뜬 모달을 닫는" 동작으로 인식되는 게 자연스럽습니다.목표는 다음과 같았습니다.모달이 열린 상태에서 뒤로가기 → 라우팅 대신 모달이 닫힙니다.X 버튼 / 확인 버튼 등으로 직접 닫는 경우도 히스토리가 깨끗하게 정리됩니다.모달 안의 버튼으로 또 다른 모달을 띄우는 중첩 케이스를 지원합니다.모바일에서만 이 동작을 적용합니다(..

useEffectEvent란?useEffectEvent는 Effect 내부의 비반응형 로직을 추출해 Effect 이벤트라고 불리는 재사용 가능한 함수로 만들 수 있게 해주는 React Hook입니다 React에서 useEffect를 쓰다 보면 한 번쯤 이런 상황을 만나게 됩니다. - 이벤트 리스너는 한 번만 등록하고 싶다. - 그런데 리스너 안에서는 최신 state를 읽고 싶다. - 린트(exhaustive-deps)는 의존성 누락이라고 경고한다.- 의존성을 넣으면 effect가 자꾸 다시 실행된다.이번 글에서는 이 문제를 pointermove + canMove 예제로 풀고, 왜 useEffectEvent가 이걸 깔끔하게 해결하는지 설명해보겠습니다. 문제 상황: 한 번 등록과 최신 값 읽기의 충돌아래는..

onError: (err) => { // err의 타입은 Error이지만, Axios는 AxiosError를 반환합니다 if (err.response?.data?.message) { // ❌ Property 'response' does not exist on type 'Error' setError(err.response.data.message); }} 본 글에서는 이 문제를 해결하는 3가지 방법을 소개하고, 각각의 장단점을 비교 분석하겠습니다. 문제 상황TanStack Query v5에서 `useMutation`의 기본 에러 타입은 `Error`입니다. 하지만 Axios를 사용하면 실제로는 `AxiosError` 타입의 에러가 발생하므로, `response` 속성 등에 접근할 때 타입 에러가 ..

useActionState란?useActionState는 폼 액션의 결과를 기반으로 State를 업데이트할 수 있도록 제공하는 Hook입니다. 기본 구조const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); 반환값state: 현재 액션의 상태값 (서버 액션 실행 시마다 업데이트됨)formAction: 서버 액션을 실행하는 함수 (폼의 action 속성에 전달하거나 직접 호출, prevState, formData) => Promise)isPending: 현재 액션이 실행 중인지 여부 (로딩 상태 표시용) 매개변수fn: 서버에서 실행될 액션 함수 (prevState와 formData를 받아서 Promise 반환)..

useOptimistic란? React 19에 새롭게 추가된 useOptimistic 훅은 낙관적 업데이트(Optimistic Updates)를 구현하기 위한 훅입니다. 사용자가 액션을 수행했을 때 서버 응답을 기다리지 않고 즉시 UI를 업데이트하여 더 나은 사용자 경험을 제공합니다. 낙관적 업데이트란?- 즉시 UI 업데이트: 서버 응답을 기다리지 않고 UI를 먼저 변경 - 백그라운드 동기화: 동시에 서버에 요청을 보내 실제 데이터 업데이트 - 에러 처리: 실패 시 원래 상태로 되돌리기 예시코드import { useOptimistic } from 'react';function AppContainer() { const [optimisticState, addOptimistic] = useOptimisti..

use란?리액트 19 버전에 새롭게 추가된 훅으로 Promise나 Context와 같은 데이터를 참조하는 React API입니다.import { use } from 'react';function MessageComponent({ messagePromise }) { const message = use(messagePromise); const theme = use(ThemeContext); // ... 데이터 불러오기 기존 방식const getMockDataAxios = async () => { const response = await axios.get( `https://${process.env.NEXT_PUBLIC_API_KEY}.mockapi.io/api/v1/users`, ); retu..

React-Query란?React Query는 React 애플리케이션에서 비동기 작업(데이터를 가져오기 등)을 관리하기 위한 간편하고 강력한 라이브러리입니다. 주요 특징으로는 간편한 데이터 캐싱, 자동 재요청 및 캐시 갱신, 에러 핸들링 및 재시도 등이 있습니다. 설치법npmnpm i @tanstack/react-query yarnyarn add @tanstack/react-query 같이 설치하면 좋은 거 react-query-devtoolsyarn add @tanstack/react-query-devtools 왜 쓸까?캐싱: React Query는 데이터를 자동으로 캐싱하고 필요할 때 캐시된 데이터를 사용합니다. 이를 통해 네트워크 요청의 중복을 방지하고 성능을 향상시킵니다.에러 핸들링 및 재시도: ..