React Router v6.4

Link

라우터 밖에서는 link를 render할 수 없다

Outlet

children 컴포넌트로 이동할 시 부모 컴포넌트에 outlet을 설정해주어야 한다.

function App() {
   return (
       <Container>
           <Outlet /> // 자식 컴포넌트가 오는 곳
           <H1>THEME PROVIDER</H1>
       </Container>
   );
}

여기서 보면 부모 컴포넌트인 App이 실행되면서 outlet부분에 내가 설정해준 경로에 지정된 자식 컴포넌트도 따라서 실행되는 것이다. 독립적으로 자식 컴포넌트만 실행되는 것이 아니고

결론으로 outlet의 역할은 자식 컴포넌트가 부모 컴포넌트안에서 위치할 곳이다.

페이지 이동

Link / useNavigate

Link 는 유저가 클릭을 해야 발생한다

useNavigate 클릭을 기다리지 않고 코드상에서 해결

상대 경로와 절대 경로

경로 지정해줄때 앞에 / 를 써주게 되면 절대 경로가 되어서 바로 뒤에 붙는다.

이건 라우터 파일이고

const router = createBrowserRouter([
   {
       path: '/',
       element: <App />,
       children: [
           {
               path: '',
               element: <Home />,
           },
           {
               path: 'about',
               element: <About />,
           },
           {
               path: 'users/:userId',
               element: <User />,
               children: [
                   {
                       path: 'followers',
                       element: <Followers />,
                   },
               ],
           },
       ],
       errorElement: <NotFound />,
   },
]);

이건 user 파일이다

const User = () => {
   const { userId } = useParams();
   return (
       <div>
           <h1>USER's ID : {userId}</h1>
           <hr />
           <Link to="followers">here is followers</Link>
           <Outlet />
       </div>
   );
};

여기서 followers 파일은 user파일을 부모 컴포넌트로 가지는 user의 자식 컴포넌트이다. 그러면 outlet을 활용해서 outlet자리에 자식 컴포넌트 followers를 배치시켜주려고 Link를 사용하였다.

여기서 중요한 포인트

경로를 지정해 줄때 '/followers'로 지정해 주게 되면 localhost:/3001/followers로 절대 경로로 설정되어서 내가 원하는 outlet효과를 못본다. 따라서 상대경로로 설정해야 한다. '/' 를 생락하면 부모 컴포넌트 주소 마지막에 추가되어 url을 만든다.

정보 보내기

부모 컴포넌트에서 자식 컴포넌트로 정보를 보내줄때 흔히 우리는 props를 활용하여 보내준다.

하지만 라우터에서는 2가지 방법이 있다. useParams hook을 이용하여 url에 접근해 원하는 값을 가져오거나,

outlet 으로 주어진 자식 컴포넌트 경우에는 부모 컴포넌트에서 context를 보내서 활용할 수 있다.

const User = () => {
   const { userId } = useParams();
   return (
       <div>
           <h1>
               USER's ID : {userId} Name : {users[Number(userId) - 1].name}
           </h1>
           <hr />
           <Link to="followers">here is followers</Link>
           <Outlet
               context={{
                   nameOfUser: users[Number(userId) - 1].name,
               }}
           />
       </div>
   );
};

부모 컴포넌트에서 context를 보내면 자식 컴포넌트는

const Followers = () => {
   const ctx = useOutletContext();
   console.log(ctx);
   return <div>Followers</div>;
};

useOutletContext를 사용해서 부모 컴포넌트에서 보낸 값을 가져올 수 있다.

결론으로 context를 부모에서 보내고 자식은 useOutletContext를 사용하여 보낸 값을 가져온다면 전역적으로 다뤄야 하는 다크모드같은 것도 손쉽게 다룰 수 있다.