우사미 코딩

import { useNavigation } from "react-router-dom"; function Route({path, children}){ const {currentPath } = useNavigation(); if(path === currentPath){ return children; } return null; } export default Route; custom navigation hook을 만드는 목적 : 다른 엔지니어들이 네비게이션을 쉽게 사용할 수 있도록 함. 약간의 타이핑을 줄여준당 src/hooks/use-navigation.js import NavigationContext from "../context/navigation"; import { useContext } from "r..

우선 쓰앵님의 최애 다이아그램을 먼저 보겠습니당 이것이 무엇이냐 App.js는 Route라는 컴포넌트를 여러개 갖고 Route 컴포넌트는 속성으로 path, children을 가지고 있다 그럼 이전에 만들었던 NavigationContext에서 currentPath를 불러와서 Route컴포넌트의 path와 일치하면 children(SignupPage.js등의 페이지 컴포넌트)를 보여주면 되겠습니다 src/component/Route.js를 생성했고 내용은 다음과 같습니다 import { useContext } from "react"; import NavigationContext from "../context/navigation"; function Route({path, children}){ const {..