2019-11-14

bathingape·2019년 11월 14일
0

TIL(2019)

목록 보기
15/41

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
profile
웹 개발을 위해 공부한 내용을 기록하고 있습니다.

0개의 댓글