[한 입 리액트] PAGE ROUTING

PAGE ROUTING

 

 

ROUTER 데이터의 경로를 실시간으로 지정해주는 역할을 함

 

ROUTING이란?

 

경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말,

어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정

 

PAGE ROUTING이란?

 

요청(에 명시되어 있는 경로 ex. /home)에 따라서 어떤 페이지를 응답(ex. Home.html)해줄지(돌려줄지) 결정하는 과정

 

여러 페이지를 준비하고 있다가 요청된 경로에 따라 적절한 페이지를 보내주는 방식을 MPA(Multi Page Application)

 

반면, 리액트는 SPA(Single Page Application) 방식을 따르고 있다. 이 때의 Web Server는 Node.js, 전달받는 페이지는 index.html !

SPA 방식은 페이지 이동을 하고 싶을 때 브라우저가 웹서버에 요청할 일(통신)이 없고, React App이 알아서 페이지를 업데이트 하는 것이다 !! 필요한 데이터가 생길 때는 서버에 데이터만 요청하여 전달받게 된다.

브라우저(Client 측)에서 알아서 페이지 렌더링하는 방식을 CSR(Client Side Rendering)이라고 한다.

 

 

리액트 라우터 라이브러리의 공식 홈페이지

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

 

 

React Router Dom의 유용한 기능 (REACT ROUTER V6) 

 

React에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

 

1. Path Variable : 경로에 변수를 사용하는 기법

    - useParams : react-router-dom 라이브러리의 커스텀 훅

    ex. 경로: /diary/1

           App( ): <Route path="/diary/:id" element={<Diary />} />

           Diary( ): const { id } = useParams( );

                            console.log(id);    // 1

 

 

2. Query String : 웹페이지에 url과 함께 데이터를 전달할 수 있는 가장 간단한 기법

     - useSearchParams

      ex. 경로: /edit?id=10&mode=dark    edit 페이지가 잘 렌더됨  (?name= value&name=value&... 와 같은 형태로)

             Edit( ): const [searchParams, setSearchParams] = useSearchParams( );

                           const id = searchParams.get("id");

                           console.log("id : ", id);    // id : 10

                           const mode = searchParams.get("mode");

                           console.log("mode : ", mode);    // mode : dark

 

             Edit( ): <button onClick={( ) => setSearchParams({ who: " merryjjun" })

                              QS 바꾸기

                           </button>

             경로: localhost:3000/edit?who=merryjjun

               

 

3. Page Moving : 페이지를 이동시킬 때 Link 태그가 아닌 함수를 통해 programming적으로 user가 action하지 않았을 때도 강제로 이동시킬 수 있는 기법

    - useNavigate : 페이지를 이동시켜줄 수 있는 함수,

                                  예를 들어 로그인이 안 된 사용자가 로그인 페이지로 가려고 할 때,

                                  로그인 값을 검사해서 로그인이 안됐다면 강제로 로그인 페이지로 보낸다는 등의 상황에서 사용함

     ex.  Edit( ): const navigate = useNavigate( );

                           

                            <button onClick={( ) => navigate("/home");}>

                               HOME으로 가기

                            </button>

                            <button onClick={( ) => navigate(-1);}>     // 뒤로 한 번 가기

                               뒤로 가기

                            </button>