React 12-3 Router v6 (Outlet, useOutletContext, 공식 문서 사이트)

Outlet

 - 자식 컴퍼넌트를 부모 컨퍼넌트에 붙여서 보여주고 싶을 때 사용한다. Router에 children key를 선언하고 value를 배열로 선언한 후 v6선언했던 것과 동일하게 한다.

 

예)

// Router.tsx

path: "user/:userId",
element: <User />,
children: [
    {
        path: "followers",
        element: <Followers />,
    }
]


// User.tsx

import { Outlet, useParams, Link } from "react-router-dom";

function User() {
    const { userId } = useParams();

    return(
        <div>
            <h1>{users[Number(userId)-1].name}</h1>
            <hr />
            <Link to="followers">See followers</Link>
            <Outlet />
        </div>
    );
}

export default User;

 

 

---

useOutletContext

 - Outlet를 선언한 JSX 속성으로 context={}를 선언하면 원하는 값을 모든 자식 컨퍼넌트로 넘겨줄 수 있다. 그것을 useOutletContext 커스텀 hook을 활용하면 바로 가지고 올 수 있다.

 

예)

// user.tsx의 return 안에

<Link to="followers">See followers</Link>
<Outlet context={{
    nameOfMyUser: users[Number(userId)-1].name,
}} />


// Followers.tsx

import { useOutletContext } from "react-router-dom";

function Followers() {
    const { nameOfMyUser } = useOutletContext();

    return (
        <div>
            <h1>여기는 '{nameOfMyUser}'</h1>
        </div>
    );
}

export default Followers;

// {nameOfMyUser} -> users[Number(userId)-1].name 값이 들어간다.

 

 

---

공식 문서 사이트

 - 더 많은 내용을 알고 싶다면 링크를 클릭한 후 확인해 보세요