React (3) 썸네일형 리스트형 [React router] Outlet, useOutletContext 1. 자식의 화면을 렌더링하는 컴포넌트. 많은 컴포넌트에서 유용하게 사용할 수 있음. import { Link, Outlet, useParams } from 'react-router-dom'; import { users } from '../../db'; function User() { const { userId } = useParams(); console.log(userId); return ( User With {userId} is named : {users[Number(userId) - 1].name} See followers / 사용 여부 /사용 시 절대경로임. root 바로 다음부터 시작하는 경로 사용하지 않으면 절대경로임. ); } export default User; 다음과 같은 코드가 있다고 .. [React router] useNavigate, useParams 1. useNavigate : 유저를 어딘가로 보내는 방법 const navigate = useNavigate(); const goHome = () => { navigate('/home'); }; const goAbout = () => { navigate('/about'); }; return ( Home About ); 1. useNavigate()를 navigate에 저장한다. 2. navigate(이동할 path)를 통해 navigate 시킨다. 2. useParams : url의 파라미터를 뽑아내는 방법 먼저, useParams를 사용하기 위해 파라미터가 존재하는 path를 만들어준다. { path: 'users/:userId', element: , }, createBrowserRouter 나 Br.. [React Router] BrowerRouter vs createBrowerRouter react-router-dom을 통해 사용할 수 있는 것으로 routing하는 데에 도움을 주는 라이브러리 여기서 routing이란? 웹 애플리케이션에서 사용자가 요청한 URL에 따라 해당 경로에 알맞는 컴포넌트를 렌더링하는 것! 그렇다면 왜 리액트 라우터를 쓰나요? 화면 전환 시 전체를 리렌더링 하는 방식이 아닌 컴포넌트별로 리렌더링 하는 방식으로 작동시킬 수 있음. 즉, 리액트로 생성된 SPA에서 화면 새로고침 없이 어떤 페이지로 이동할 수 있음. SPA(Single Page Application) 필요한 영역만 캐치하여 즉각적인 화면의 변화를 줄 수 있음. 1. BrowserRouter return 2. createBrowserRouter Router를 array형식으로 선언할 수 있음. index.. 이전 1 다음
