image

React-Router

` 초반 개념부터 확실히 다질 필요가 있어서 리액트 기초부터 다시 공부하기로 마음 먹었다. 유튜브의 리액트 기초강의들을 다시 볼까, 했지만 https://mjn5027.tistory.com/ 코딩스토리님의 블로그 글이 잘 정리되어있는 걸 보고 글과 예제를 통해 기초개념을 다시 익히고 있다. 이글 역시 https://mjn5027.tistory.com/30 요 글을 보고 작성하는 글이다. 감사합니다 :) `

React Router

리액트는 spa방식으로 하나의 페이지에서 상황에 따라 필요 데이터만을 load해준다. React-Router는 url의 값에 따른 page를 load해서 보여주는 기능을 맡고 있다.


<>
<BrowserRouter>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/memo" component={Memo} />
</BrowserRouter>  
</>

Route 태그는 반드시 Router 계열 태그 안에 작성해야하고, url 경로를 설정해준다. ex) path=”/memo” component={Memo}인 경우, path가 /memo인 url이 호출될 경우 Memo 컴포넌트를 할당해 load 해준다.

Route 태그는 기본적으로 props에 match, history, location을 넘겨줘서 호출되는 컴포넌트에서 history를 인자로 받아낼 수 있다.

그리고 history.goBack() go(), blick(), replace() 들과 함께 history가 가지고 있는 자체 함수라고 한다.