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