TIL 60일차 React Router

Moon Seongseok·2021년 4월 1일
0

React

목록 보기
3/3

오늘 목표했던 것 🗒

Router 공부 ✓
인스타그램 클론코딩 사이드 프로젝트 진행중


⛱ 리액트 라우터

리액트 라우터를 사용하는 이유

사용자가 어떤 주소로 들어왔을 때, 그 주소에 해당하는 컴포넌트를 사용자에게 보여주기 위해 사용한다.

라우터를 사용할 때 사용하는 것들

1. BrowserRouter
React router dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트(App)을 BrowserRouter로 감싸주면, router 사용 가능해진다.

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

2. Route
경로를 설정하고 싶은 컴포넌트를 Route 컴포넌트로 감싼다.

// Switch는 Router 태그로 감싸줘야 사용이 가능하다. 안감싸주면 오류 발생
//Switch를 사용하는 이유는 아직 정확하게 설명을 못하겠다. 일단은 사용하면서 알아가보자.

<Router>
  <Switch>
    <Route path="/"><Home /></Route>
  </Switch>
</Router> 

아무런 path 없이 "/"를 입력하면, 기본 주소에서 Home 컴포넌트를 볼 수 있게 된다.

경로를 /topics로 설정을 해주면, /topics 주소에서 해당 컴포넌트를 볼 수 있게 된다.

주의할 점 ❗️

<Route exact path="/"><Home /></Route>
<Route path="/shoppingcart"><ShoppingCart /></Route>
<Route path="/orderpage"><OrderPage /></Route>

home 컴포넌트에 exact 속성을 주지 않으면 shoppingcart 경로로 사용자가 들어갈 때,
"/" 경로도 인식이 돼서 Home, ShoppingCart 컴포넌트 둘 다 화면에 보여지게 된다.

Home 컴포넌트의 속성 값으로 exact를 넣어줌으로써,
사용자가 정확하게 http://localhhost:3000/ 경로로 들어오는 경우에만 보여준다.

3. Link
싱글 페이지 어플리케이션에서 중요한 것은 페이지가 새로고침 되지 않고 처리하는 것이다.

아래 코드와 같이 사용을 한다.

<a href></a> ----> <Link to></Link>

참고

https://www.youtube.com/watch?v=WLdbsl9UwDc&t=266s


내일 할 일

인스타그램 클론코딩
‣ 유저 정보 유효성 검사 구현
‣ 로그인 성공 시 나오는 화면 구현
‣ 오늘 만든 클라이언트 화면 css 손보기

0개의 댓글