"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", br: "br", code: "code", figure: "figure", h2: "h2", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {MDXImage} = _components; if (!MDXImage) _missingMdxReference("MDXImage", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.strong, { children: "라우팅(Routing)" }), " 이란 어떤 네트워크에서 데이터를 보내기 위해 최적의 ", _jsx(_components.strong, { children: "경로(Route)" }), " 를 선택하는 과정을 말하고,", _jsx(_components.br, {}), "\n", "웹에서의 라우팅이란 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미해요."] }), "\n", _jsxs(_components.p, { children: ["React 애플리케이션은 싱글 페이지 애플리케이션이기 때문에 라우팅을 위해 별도의 라우팅 라이브러리를 사용해야 하는데", _jsx(_components.br, {}), "\n", "그 중에서도 가장 많이 사용되는 라이브러리인 ", _jsx(_components.strong, { children: "React Router" }), "에 대해서 알아보려고 해요."] }), "\n", _jsx(_components.p, { children: "들어가기에 앞서, 저는 다음과 같은 구조로 프로젝트를 구성했어요." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "React" }), " + ", _jsx(_components.code, { children: "Typescript" }), " + ", _jsx(_components.code, { children: "Vite" })] }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "React Router v6.4" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "그리고 FSD 폴더 구조를 적용했기 때문에, 아래에서 설명할 기본 설정 후에는 다음과 같은 폴더구조를 가지고 있게 돼요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "plain", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "plain", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "├─src/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ ├─app/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─config/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─router.tsx // 라우팅 목록" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─Router.tsx // 라우터 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ ├─pages/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─HomePage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Home.tsx // 홈 페이지" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─LoginPage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Login.tsx // 로그인 페이지" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─main.tsx" }) })] }) }) }), "\n", _jsx(_components.h2, { children: "기본 설정" }), "\n", _jsxs(_components.p, { children: ["먼저, 다음과 같이 ", _jsx(_components.code, { children: "react-router-dom" }), "을 설치할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "bash", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " install" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " react-router-dom" })] }) }) }) }), "\n", _jsx(_components.p, { children: "이제 라우팅에 사용할 페이지 컴포넌트를 추가해줄게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/pages/HomePage/ui/Home.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Home" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">홈 페이지;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/pages/LoginPage/ui/Login.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Login" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">로그인 페이지;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "/src/app/config/router.tsx" }), " 파일을 생성해 프로젝트에서 사용할 라우트들을 작성해볼게요.\n각 라우트 객체는 ", _jsx(_components.code, { children: "path" }), "와 ", _jsx(_components.code, { children: "element" }), " 등의 속성을 가지며, 특정 URL에 어떤 컴포넌트를 보여줄지 정의해요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { createBrowserRouter } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Home " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../../pages/HomePage/ui/Home\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Login " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../../pages/LoginPage/ui/Login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " router" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createBrowserRouter" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Home" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Login" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " router;" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["이렇게 작성하면 ", _jsx(_components.code, { children: "/" }), " 경로에 접속하면 ", _jsx(_components.code, { children: "" }), " 컴포넌트가 렌더링되고, ", _jsx(_components.code, { children: "/login" }), " 경로에 접속하면 ", _jsx(_components.code, { children: "" }), " 컴포넌트가 렌더링돼요.\n", _jsx(_components.code, { children: "createBrowserRouter" }), " 함수를 사용해 이러한 라우트 설정들을 하나의 라우터 객체로 만들 수 있어요."] }), "\n", _jsxs(_components.p, { children: ["이제 라우터 객체를 ", _jsx(_components.code, { children: "" }), " 컴포넌트로 전달해볼게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/app/ui/Router.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { RouterProvider } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " router " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../config/router\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Router" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "RouterProvider" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " router" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{router} />;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Router;" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), " 컴포넌트의 ", _jsx(_components.code, { children: "router" }), " 속성에 앞에서 만들어준 라우터 객체 ", _jsx(_components.code, { children: "router" }), "를 넘겨줬어요.", _jsx(_components.br, {}), "\n", "이제 ", _jsx(_components.code, { children: "main.tsx" }), "에 ", _jsx(_components.code, { children: "" }), " 컴포넌트를 넣어주기만 하면 기본 라우팅 설정은 끝나요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/main.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { StrictMode } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { createRoot } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-dom/client\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Router " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./ui/Router.tsx\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./index.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(document." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"root\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "render" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "StrictMode" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Router" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsxs("div", { className: "w-full flex items-end", children: [_jsx(MDXImage, { src: "/posts/react-router/default-home.png", width: "200px", alt: "localhost:5173/", caption: "localhost:5173/" }), _jsx(MDXImage, { src: "/posts/react-router/default-login.png", width: "200px", alt: "localhost:5173/", caption: "localhost:5173/" })] }), "\n", _jsxs(_components.p, { children: ["추가로 저는 ", _jsx(_components.code, { children: "main.tsx" }), " 파일의 경로가 ", _jsx(_components.code, { children: "src/app/main.tsx" }), "에 위치하기 때문에 ", _jsx(_components.code, { children: "index.html" }), "의 경로를 수정해 주었어요."] }), "\n", _jsx(_components.h2, { children: "레이아웃" }), "\n", _jsxs(_components.p, { children: ["라우팅으로 연결된 ", _jsx(_components.code, { children: "" }), " 컴포넌트와 ", _jsx(_components.code, { children: "" }), " 컴포넌트에 공통적인 레이아웃을 적용해볼게요.\n공통 레이아웃에 네비게이션바 컴포넌트 등을 추가해 공통으로 사용하게 할 수도 있어요."] }), "\n", _jsx(_components.p, { children: "먼저 네비게이션 컴포넌트 만들어볼게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/shared/ui/NavigationBar.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { Link } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationBar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "nav" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex p-4 gap-4 bg-gray-300\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " href" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Home" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " href" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Login" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 레이아웃 컴포넌트도 만들어서 ", _jsx(_components.code, { children: "" }), "컴포넌트도 넣어줄게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/app/ui/DefaultLayout.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { Outlet } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " NavigationBar " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../../shared/ui/NavigationBar\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " DefaultLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NavigationBar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Outlet" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["그리고 ", _jsx(_components.code, { children: "router.tsx" }), "만 수정해주면 됩니다."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " router" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createBrowserRouter" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "DefaultLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " children: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Home" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Login" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]);" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "react-router-dom" }), "의 ", _jsx(_components.code, { children: "" }), " 컴포넌트는 자식 라우트의 컴포넌트가 렌더링될 위치를 지정해요.\n부모 라우트에 ", _jsx(_components.code, { children: "path" }), " 속성을 지정하지 않으면, 모든 하위 경로에서 레이아웃이 공통으로 적용돼요."] }), "\n", _jsx(MDXImage, { src: "/posts/react-router/default-layout.png", width: "300px", alt: "DefaultLayout 컴포넌트 적용", caption: "DefaultLayout 컴포넌트 적용" }), "\n", _jsx(_components.h2, { children: "Link, NavLink" }), "\n", _jsxs(_components.p, { children: ["위의 ", _jsx(_components.code, { children: "" }), " 컴포넌트에서 네비게이팅을 위해 ", _jsx(_components.code, { children: "" }), " 태그를 사용했어요.\nReact Router는 ", _jsx(_components.code, { children: "" }), " 와 ", _jsx(_components.code, { children: "" }), "와 같은 네비게이팅 컴포넌트를 지원해요."] }), "\n", _jsxs(_components.p, { children: ["이러한 컴포넌트들은 ", _jsx(_components.code, { children: "" }), " 태그와 달리 다음과 같은 장점이 있어요:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "페이지 전체를 새로고침하지 않고 필요한 부분만 업데이트해요." }), "\n", _jsx(_components.li, { children: "SPA의 클라이언트 사이드 라우팅을 제대로 활용할 수 있어요." }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), " 컴포넌트는 가장 기본적인 네비게이팅 컴포넌트에요.", _jsx(_components.br, {}), "\n", "다음과 같이 사용할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/shared/ui/NavigationBar.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { Link } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationBar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "nav" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex p-4 gap-4 bg-gray-300\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Link" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Home" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Link" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Login" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["조건에 따라 페이지를 네비게이팅 해야 한다면 ", _jsx(_components.code, { children: "useNavigate" }), " 훅을 사용할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useNavigate } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Login" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " navigate" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useNavigate" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleLogin" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " async" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 로그인 처리 로직" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " navigate" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">로그인 페이지" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleLogin}>로그인하기" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), " 컴포넌트는 네비게이션 바와 같은 UI에서 활용하기 좋은 컴포넌트에요.", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "isActive" }), " 속성을 통해 현재 링크의 상태를 ", _jsx(_components.code, { children: "boolean" }), "값으로 확인할 수 있어요."] }), "\n", _jsx(_components.p, { children: "다음과 같이 사용해요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/shared/ui/NavigationBar.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { NavLink } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationBar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "nav" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex p-4 gap-4 bg-gray-300\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NavLink" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "isActive" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (isActive " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"text-red-500\"" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Home" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NavLink" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/login\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "isActive" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (isActive " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"text-red-500\"" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Login" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "/posts/react-router/default-layout-navlink.png", width: "300px", alt: "NavLink - localhost:5173/", caption: "NavLink - localhost:5173/" }), "\n", _jsx(_components.h2, { children: "중첩 라우팅" }), "\n", _jsx(_components.p, { children: "중첩 라우팅은 라우트 내에서 다른 라우트를 포함하는 구조를 말하는데요, 다음과 같은 경우에 사용할 수 있어요." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "공통 레이아웃 내에서 여러 하위 페이지를 구현하는 경우" }), "\n", _jsx(_components.li, { children: "탭 기반의 인터페이스를 구현하는 경우" }), "\n", _jsx(_components.li, { children: "모달, 팝업을 URL로 관리하는 경우" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["앞에서 사용한 ", _jsx(_components.code, { children: "" }), " 컴포넌트에 ", _jsx(_components.code, { children: "" }), "와 ", _jsx(_components.code, { children: "" }), " 컴포넌트를 렌더링 한 것 또한 중첩 라우팅이라고 볼 수 있어요."] }), "\n", _jsxs(_components.p, { children: ["이렇게 ", _jsx(_components.code, { children: "children" }), " 속성을 기반으로 한 중첩 라우팅을 객체 기반 중첩 라우팅 이라고 하는데,", _jsx(_components.br, {}), "\n", "React Router v6.4 이상에서는 파일명을 사용한 중첩 라우팅이 추가되었어요."] }), "\n", _jsxs(_components.p, { children: ["파일명 중첩 라우팅은 ", _jsx(_components.code, { children: "." }), " 구분자를 사용해서 ", _jsx(_components.code, { children: "." }), " 앞의 파일명이 다른 파일명과 일치하면 자동으로 하위경로를 만들어줘요.", _jsx(_components.br, {}), "\n", "다음과 같이 파일을 생성할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "plain", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "plain", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "├─src/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ ├─app/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─config/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─router.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─Router.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ ├─pages/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─HomePage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Home.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─LoginPage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Login.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─ticketPage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.tsx // /ticket - 레이아웃" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket._index.tsx // /ticket - 기본 컨텐츠" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.detail.tsx // /ticket/detail" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.$ticket.tsx // /ticket/123, /ticket/abc" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.$ticket.tsx // 동적 세그먼트 페이지" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─main.tsx" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "ticketPage/ui" }), " 디렉토리의 파일명은 각각 이런 역할을 가지고 있어요:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Ticket.tsx" }), ": ", _jsx(_components.code, { children: "/ticket" }), " 페이지의 레이아웃, 컨테이너"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Ticket._index.tsx" }), ": ", _jsx(_components.code, { children: "/ticket" }), " 페이지의 기본으로 보여지는 컨텐츠"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Ticket.detail.tsx" }), ": ", _jsx(_components.code, { children: "/ticket/detail" }), "과 같은 하위 라우트 페이지"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Ticket.$ticket.tsx" }), ": ", _jsx(_components.code, { children: "/ticket/123" }), ", ", _jsx(_components.code, { children: "/ticket/20250101" }), " 과 같은 동적 세그먼트 페이지"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "동적 세그먼트" }), "\n", _jsxs(_components.p, { children: ["일반적으로 사용되는 상세 페이지의 URL은 정적이 아니라 데이터 기반(id, code 등)으로 변화해요.", _jsx(_components.br, {}), "\n", "React Router v6.4 이상에서는 앞에서 설명한 파일명 중첩 라우팅으로 이러한 동적 세그먼트 페이지를 쉽게 구현하고 보여줄 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "plain", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "plain", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "├─src/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ ├─app/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─config/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─router.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─Router.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ ├─pages/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─HomePage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Home.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─LoginPage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Login.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ └─ticketPage/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─ui/" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket._index.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.detail.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ │ │ └─Ticket.$ticket.tsx // 동적 세그먼트 페이지" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "│ │ └─main.tsx" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["위와 같이 ", _jsx(_components.code, { children: "$" }), " prefix를 사용해서 동적 세그먼트 페이지 컴포넌트를 만들 수 있어요.\n그리고 ", _jsx(_components.code, { children: "router.tsx" }), "에 ", _jsx(_components.code, { children: "Ticket.$ticket.tsx" }), " 를 추가해줄게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " router" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createBrowserRouter" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "DefaultLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " children: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ... 다른 라우트들" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/ticket/:ticketId\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " element: <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "TicketDetail" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]);" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Ticket.$ticket.tsx" }), " 컴포넌트는 ", _jsx(_components.code, { children: "/ticket/123" }), ", ", _jsx(_components.code, { children: "/ticket/20250101" }), " 과 같은 URL에 자동으로 매핑돼요.\n컴포넌트 내부에서는 다음과 같이 세그먼트를 추출해서 사용할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/pages/ticketPage/ui/Ticket.$ticket.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useParams } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " TicketDetail" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ticketId" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useParams" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">티켓 상세 정보" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">티켓 번호: {ticketId}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "/posts/react-router/dynamic-segments.png", width: "300px", alt: "동적 세그먼트 - localhost:5173/ticket/250101", caption: "동적 세그먼트 - localhost:5173/ticket/250101" }), "\n", _jsx(_components.h2, { children: "출처" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://reactrouter.com/", children: "https://reactrouter.com/" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://shape-coding.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-RouterProvider%EC%99%80-CreateBrowserRouter", children: "https://shape-coding.tistory.com/entry/React-리액트-라우터-RouterProvider와-CreateBrowserRouter" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://www.heropy.dev/p/9tesDt", children: "https://www.heropy.dev/p/9tesDt" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://velog.io/@ahn-sujin/React-Link-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-useNavigate%EC%9D%98-%EC%B0%A8%EC%9D%B4", children: "https://velog.io/@ahn-sujin/React-Link-컴포넌트와-useNavigate의-차이" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

React Router 간단 요약