Today I Learn...

• 리액트 라우터

  • 설치

    $ yarn add react-router-dom 

• 적용

  // src/index.js 에서 App 을 BrowserRouter 컴포넌트 로 감싸기
  
  ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
  );

• Route: 특정 주소에 컴포넌트 연결하기

  <Route path="주소규칙" component={보여주고싶은 컴포넌트}>
  
  // 경로가 완벽히 똑같을때만 컴포넌트를 보여준다.
  <Route path="/" exact={true} component={Home} /> 

• Link: 누르면 다른 주소로 이동시키기

  • 리액트 라우터를 사용할 때에는 Link 컴포넌트를 사용한다. (앵커태그 X)

• 파라미터와 쿼리

  • 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용한다.

• 서브라우트

  • 라우트 내부의 라우트를 만드는것을 의미

To-Do

1. 벨로퍼트와 함께하는 모던 리액트 문서
2. 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1)
3. 코어 자바스크립트 / 리액트를 다루는 기술 읽기
4. 리액트 라우터 부가기능

참고문서

1. https://velog.io/@jakeseo_me/2019-03-15-2303-%EC%9E%91%EC%84%B1%EB%90%A8-rmjta5a3xh