(React) 리액트 기초 18. Router 설정

• yarn add react-router-dom
• yarn add @tanstack/react-query
  
  

    // index.js

 

    const router = createBrowserRouter([

        {

            path: '/',

            element: <App />,

            errorElement: <ErrorPage />,

            children: [

                { index: true, path: '/', element: <Home /> },

                { path: '/path1', element: <Component1 /> },

                { path: '/path2', element: <Component2 /> },

                { path: '/path2/:keyword', element: <Component2-1 /> },

                { path: '/path/watch/:id', element: <Component2Detail /> },

            ],

        },

    ]);

    const root = ReactDOM.createRoot(document.getElementById('root'));

    root.render(

        <React.StrictMode>

            <RouterProvider router={router} />

        </React.StrictMode>,

    );

    reportWebVitals();

• 필요한 컴포넌트와 구조를 대략적으로 떠올린 뒤에, router로 작성하고 이 router를 RouterProvider로 전체에 적용한다. 페이지 하나당 하나의 라우터로 작성하려면 평생 라우터만 쓰고있어야 할지도 모르니까 중첩 라우팅을 사용한다.
• 중첩 라우팅이란? 여러 개의 컴포넌트에 걸쳐서 경로를 단계별로 정의하는 라우팅 기법이다. 
• 특정 경로에 대해 새로운 파라미터를 루트로 지정하고 싶은 경우 
  { path: '/path2', element: <Component2 /> },
  { path: '/path2/keyword', element: <Component2-1 /> },
• 특정 경로 뒤에서 id에 따라 다른 디테일을 보여주고 싶은 경우
  { path: '/[path2/:id', element: <Component2Detail/> },
  뒤에 오는 값을 변수처럼 받아(:id) 해당하는 화면(<Component2Detail/>)을 보여줄 수 있다. 

    // App.js

    const queryClient = new QueryClient();

    export default function App() {

        return (

            <>

                <NavBar />

                <QueryClientProvider client={queryClient}>

                    <Outlet />

                </QueryClientProvider>

            </>

        );

    }

• react Query는 서버로 비동기 데이터를 가져오고 관리하는 라이브러리다. API를 호출하고 데이터를 캐싱하기 위해 사용한다.
• Outlet은 react-router-dom 라이브러리에서 사용하는 특별한 컴포넌트로, 주로 중첩 라우트 안에서 라우팅 결과를 렌더링 하기 위해서 사용한다.
• 위 코드에서 QueryClientProvider의 바깥에 있는 NavBar는 항상 렌더링 되고, react Query의 영향권에 있는 Outlet 이하의 라우트 컴포넌트들이 렌더링 될 때도 영향을 받지 않는다.  
  
  

    const [text, setText] = useState('');

    const navigate = useNavigate();

    const submitHandler = e => {

        e.preventDefault();

        navigate(`/path2/${text}`);

        setText('');

    };

이렇게 useState를 사용해서 input에 작성한 값이 path 이하 라우트에 담기도록 할 수도 있다.

    const { keyword } = useParams();

    <div>Videos {keyword ? `검색결과: ${keyword}` : '검색해보세요.'}</div>

위에서 state였던 text = :keyword이므로 useParams로 keyword를 가져오면 검색결과가 나오게 구현할 수 있다.