📌 React Router v7에서 꼭 알아야 할 주요 훅들

React Router v7에서 useLoaderData()처럼 자주 사용되는 핵심 훅들을 정리해줄게.
각 훅의 역할과 동작 방식을 알면, Remix 스타일의 개발을 훨씬 더 쉽게 할 수 있어. 🚀

---

1️⃣ useLoaderData() – 데이터 로딩

loader()에서 반환한 데이터를 가져오는 훅
🔹 언제 사용? 페이지가 렌더링되기 전에 데이터를 불러와야 할 때

📄 사용 예시

tsx

복사편집

import { useLoaderData } from "react-router-dom"; export function loader() { return { name: "홍길동", age: 25 }; } export default function Profile() { const data = useLoaderData(); return <p>이름: {data.name}</p>; }

📌 📌 정리
✅ 페이지가 처음 로드될 때 데이터를 미리 불러오는 데 사용됨
✅ 깜빡임 없이 데이터를 빠르게 표시할 수 있음
✅ 서버에서 데이터를 가져오고 클라이언트에서 직접 사용 가능

---

2️⃣ useNavigate() – 프로그래밍 방식으로 페이지 이동

Link 태그 없이 JavaScript 코드로 페이지 이동할 때 사용
🔹 언제 사용? 버튼 클릭 시 특정 페이지로 이동하고 싶을 때

📄 사용 예시

tsx

복사편집

import { useNavigate } from "react-router-dom"; export default function Home() { const navigate = useNavigate(); return ( <div> <h1>홈 페이지</h1> <button onClick={() => navigate("/profile")}>프로필로 이동</button> </div> ); }

📌 📌 정리
✅ navigate(URL)을 호출하면 즉시 이동 가능
✅ 뒤로 가기(navigate(-1))와 앞으로 가기(navigate(1))도 가능
✅ 폼 제출 후 특정 페이지로 이동할 때 유용함

---

3️⃣ useParams() – 동적 URL 파라미터 가져오기

URL에서 동적으로 변하는 값을 가져올 때 사용
🔹 언제 사용? /user/:id 같은 라우트에서 id 값을 가져올 때

📄 라우트 설정

tsx

복사편집

const router = createBrowserRouter([ { path: "/user/:id", element: <User /> }, ]);

📄 사용 예시

tsx

복사편집

import { useParams } from "react-router-dom"; export default function User() { const { id } = useParams(); return <h1>사용자 ID: {id}</h1>; }

📌 📌 정리
✅ URL의 특정 부분을 변수처럼 사용할 수 있음
✅ API 요청 시 유저 ID, 게시물 ID 등을 전달할 때 유용함
✅ useLoaderData()와 함께 사용하면 데이터 로딩을 동적으로 처리 가능

---

4️⃣ useSearchParams() – URL 쿼리 스트링 관리

?key=value 형태의 쿼리 스트링 값을 가져오거나 변경할 때 사용
🔹 언제 사용? 필터, 검색, 정렬 같은 기능을 만들 때

📄 사용 예시

tsx

복사편집

import { useSearchParams } from "react-router-dom"; export default function SearchPage() { const [searchParams, setSearchParams] = useSearchParams(); return ( <div> <h1>검색 페이지</h1> <p>현재 검색어: {searchParams.get("q")}</p> <button onClick={() => setSearchParams({ q: "React" })}> "React"로 검색 </button> </div> ); }

📌 📌 정리
✅ 검색 필터, 페이지네이션, 정렬 등에 유용함
✅ setSearchParams()를 사용하면 쿼리스트링을 변경 가능
✅ URL이 바뀌어도 상태가 유지됨

---

5️⃣ useActionData() – 폼 제출 후 응답 데이터 가져오기

action() 함수에서 반환된 데이터를 가져오는 훅
🔹 언제 사용? 폼 제출 후 서버에서 응답 데이터를 받아 처리할 때

📄 폼 액션 설정

tsx

복사편집

export function action({ request }) { const formData = new URLSearchParams(request.body as any); return { message: `입력한 내용: ${formData.get("name")}` }; }

📄 사용 예시

tsx

복사편집

import { Form, useActionData } from "react-router-dom"; export default function ContactForm() { const data = useActionData(); return ( <div> <h1>문의하기</h1> <Form method="post"> <input name="name" placeholder="이름 입력" /> <button type="submit">제출</button> </Form> {data && <p>{data.message}</p>} </div> ); }

📌 📌 정리
✅ 폼 데이터를 서버에서 처리한 후 결과를 받아올 수 있음
✅ useLoaderData()와 차이점 → useLoaderData()는 페이지 로드 시, useActionData()는 폼 제출 후 사용
✅ API 요청을 따로 만들 필요 없이, 바로 서버와 연동 가능

---

6️⃣ useRouteError() – 에러 처리

특정 라우트에서 발생한 오류를 감지하여 보여줌
🔹 언제 사용? 데이터 로딩 또는 액션 실행 중 발생한 에러를 처리할 때

📄 라우트 설정

tsx

복사편집

const router = createBrowserRouter([ { path: "/profile", element: <Profile />, loader: profileLoader, errorElement: <ErrorBoundary /> }, ]);

📄 에러 처리 컴포넌트

tsx

복사편집

import { useRouteError } from "react-router-dom"; export default function ErrorBoundary() { const error = useRouteError(); return <h1>오류 발생: {error.message}</h1>; }

📌 📌 정리
✅ 라우터에서 발생한 에러를 감지하여 사용자에게 표시 가능
✅ API 요청 실패, 페이지 로딩 오류 등을 다룰 때 유용함
✅ 각 라우트마다 개별적인 에러 처리가 가능

---

🎯 정리 – 필수로 알아야 할 React Router v7 훅

훅 이름역할사용 예시

useLoaderData()	loader()에서 받은 데이터 사용	데이터 로딩
useNavigate()	프로그래밍 방식으로 페이지 이동	버튼 클릭 시 이동
useParams()	동적 URL 값 가져오기	/user/:id 처리
useSearchParams()	쿼리 스트링 값 읽기 & 설정	검색, 필터, 정렬
useActionData()	action() 실행 후 결과 가져오기	폼 제출 후 응답
useRouteError()	라우트에서 발생한 오류 가져오기	에러 페이지 처리

---

🚀 결론

1. useLoaderData() → 데이터 로딩
2. useNavigate() → 페이지 이동
3. useParams() → 동적 URL 값 가져오기
4. useSearchParams() → 검색 및 필터링
5. useActionData() → 폼 액션 후 결과 가져오기
6. useRouteError() → 에러 처