개발 블로그

중첩 라우트를 설정할 때, 자식 라우트들 중에서 기본적으로 보여줄 컴포넌트를 지정하고 싶을 때 사용합니다.예를 들어, 아래처럼 / 경로에 여러 자식 라우트가 있는 경우:{ path: "/", element: , children: [ { index: true, element: }, { path: "products", element: }, ] }사용자가 /로 접속하면 자동으로 가 렌더링됩니다.즉, index: true가 붙은 라우트는 path 없이, 부모 경로와 정확히 일치할 때 렌더링되는 기본 자식 컴포넌트입니다.  "루트 자식에서 보여줄 기본 콘텐츠" 를 명확하게 지정하려면 index: true를 사용하는 것이 좋습니다.const router = createBrowserRouter([ { path: ..

const PRODUCTS = [ { id: "p1", title: "Product 1" }, { id: "p2", title: "Product 2" }, { id: "p3", title: "Product 3" },]; 웹 페이지를 이용하다 보면, /products/p1 같이 각 상품에 해당하는 상세 페이지로 이동하는 기능이 필요할 때가 있습니다. 이럴 때 동적 라우팅(Dynamic Routing) 기능을 사용하면 매우 유용합니다.    import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./pages/Home";import ProductPage from "./pages/Product"..

이번 포스트에서는 NavLink에 대해 알아보겠습니다 NavLink는 Link처럼 페이지 이동을 할 수 있는 컴포넌트인데, 현재 경로와 일치하는 경우에 클래스나 스타일을 자동으로 바꿔줄 수 있어서 내비게이션 메뉴를 만들 때 특히 유용합니다 import { Link } from "react-router-dom";import classes from "./MainNavigation.module.css";function MainNavigation() { return ( Home Products );}export default MainN..

웹 서핑을 하다 보면, 잘못된 URL로 접속했을 때 “페이지를 찾을 수 없습니다” 같은 에러 문구가 뜨는 페이지를 본 적 있으실 거예요. 이런 페이지를 흔히 “404 페이지”라고 부릅니다. 이번에는 React Router DOM에서 404 페이지를 설정하는 방법을 알아보겠습니다. import MainNavigation from "../components/MainNavigation";function ErrorPage() { return ( Cout not find this page! );}export default ErrorPage; 위는 에러가 발생했을 때 표시될 컴포넌트입니다. 공통 내비게이션을 포함하고, 간단한 에러 메시지를 보여주도록 구..

이번 포스트에서는 리액트 라우터 돔으로 중첩 라우트를 구현하는 방법에 대해 알아보겠습니다 import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./pages/Home";import ProductPage from "./pages/Product";const router = createBrowserRouter([ { path: "/", element: }, { path: "/products", element: },]);function App() { return ;}export default App; 중첩 라우트 기능은 페이지마다 공통적으로 렌더링되어야 하는 레이아웃(예: 헤더, 내비게이션 ..

이번 포스트에서는 리액트 라우터 돔 Link로 페이지 이동하는 방법에 대해 알아보겠습니다 import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./pages/Home";import ProductPage from "./pages/Product";const router = createBrowserRouter([ { path: "/", element: }, { path: "/products", element: },]);function App() { return ;} 저번 포스트에서 기본적인 라우팅을 해봤습니다 HomePage에서 ProductPage로 Link를 이용해 페이지 이동기능을 구..

리액트 라우터 돔이란?react-router-dom은 React 애플리케이션에서 페이지 간 이동(라우팅)을 쉽게 할 수 있도록 도와주는 라이브러리입니다주로 SPA(Single Page Application)에서 URL에 따라 다른 컴포넌트를 렌더링할 때 사용됩니다. 주요특징 라우팅 설정: URL 경로에 따라 다른 컴포넌트를 보여줌링크 이동: 컴포넌트로 새로고침 없이 페이지 이동 가능매끄로운 페이지 이동: 다른 페이지로 이동할때 끊김없이 이동 가능중첩 라우트: 라우트 안에 또 다른 라우트를 넣을 수 있음동적 라우트: URL 파라미터를 이용한 동적 페이지 구현 가능 (/user/:id 등)네비게이션 제어: useNavigate 훅으로 프로그래밍 방식의 이동 가능  기본 라우팅해보기 npm install r..

이번 포스트에서는 useActionState를 통해 폼을 비동기적으로 작업하는 방법을 알아보겠습니다 import { createContext, useEffect, useState } from 'react';export const OpinionsContext = createContext({ opinions: null, addOpinion: (opinion) => {}, upvoteOpinion: (id) => {}, downvoteOpinion: (id) => {},});export function OpinionsContextProvider({ children }) { const [opinions, setOpinions] = useState(); useEffect(() => { async ..