오열매의 코딩 공간

1. Outlet Outlet은 정의한 Router에서 특정 path에 해당하는 경로에 children이 있을 때, 해당 컴포넌트를 렌더링하도록 해주는 컴포넌트이다. 반드시 부모 컴포넌트 내에서 정의해줘야 한다. 그래야 해당 컴포넌트의 자식 컴포넌트와 연결이 가능하기 때문이다. * Router.tsx (일부) { path: "/users/:userId", element: , children: [ { path: "followers", element: , }, ], }, # 앞에 "/" 를 붙이면 절대경로(맨 처음부터 시작), 붙이지 않으면 부모 path에서부터 시작하는 상대경로이다. * User.tsx (일부 ... Followers 컴포넌트의 부모 컴포넌트) See Followers! Link 컴포넌트를..

URL에 있는 정보를 가져와 string으로 리턴한다. 1) Router.tsx (일부 / createBrowserRouter 이용) { path: "/users/:userId", element: , }, # /users 에는 유저가 볼 수 있는 정보가 없으므로 바로 할당 2) Home.tsx (일부 / 위 코드의 기본 루트가 Home.tsx로 지정되어 있다.) {users.map((user) => ( {user.name} ))} Link에 의해 해당 버튼을 누르면 user.id가 들어간 url로 이동하게 된다. 3 ) User.tsx (일부) export default function User() { const { userId } = useParams(); return ( {`User with id $..

useNavigate는 사용자가 직접 클릭하지 않아도(Link의 방식으로) 사용자를 다른 곳으로 이동시키고 싶은 경우에 사용한다. import { Link, useNavigate } from "react-router-dom"; export default function Header() { const navigate = useNavigate(); const handleClick = () => { navigate("/about"); }; return ( Home About ); } 위 코드는 About 이라는 버튼을 눌렀을 때, /about으로 사용자를 이동시킨다. useNavigate Hooks를 사용했으며, navigate(" url ") 형식으로 이용한다. (Navigate 와는 다르다! ... Nav..