[Video] 리액트 라우터 (react-router v4) 강의 [1/3] : 사용 방법

velopertReact.js / tech.log23 Comments

작년 Pre-release alpha시절에 한번 자료를 만든적이 있지만 올해초에 정식 릴리즈되면서 바뀌어도 너무 많이바뀌어버려서 이렇게 자료를 새로 만들었습니다. 흔히 사용되는 기능들을 대부분 다뤄보려다보니 생각보다 강의가 길어져서 동영상 하단에 타임라인을 추가했으니 참고하세요~

타임라인

00:00 – 05:25 소개 및 프로젝트 셋업
05:25 – 10:32 리액트 라우터 기본 설정
10:32 – 16:09 링크 컴포넌트 사용법
16:09 – 17:30 URL 파라미터 설정
17:30 – 21:20 서브 라우트 설정
21:20 – 23:15 NavLink 를 사용한 액티브 라우트 스타일 설정
23:15 – 26:50 Redirect 컴포넌트로 리디렉팅하기
26:50 – 28:10 history.push 를 사용하여 메소드에서 리디렉팅하기
26:50 – 31:46 쿼리 파라미터 불러오기
31:46 – 35:33 Switch 를 사용한 404 페이지

코드

https://github.com/vlpt-playground/rr4-tutorial

 

 

이어질 강좌는 코드스플리팅과 서버사이드 렌더링입니다~

  • YoungJoo Han

    항상 잘 보고있습니다.

    감사합니다.

  • 강의잘보았습니다. 남은 강의도 기대해봅니다. 감사합니다.

  • 박성진

    강의 잘보고있습니다. 여기서 질문이 하나있는데요.
    create-react-app 말고 자체적으로 구성해서 만들고있는데 페이지를 새로고침하면 서버에 올라가있는 파일에 /about 이라는 파일이 없어서 페이지가 안나오는데요. 찾아보니 refresh 에 관련된것도 있고 browserHistory에 관련된 것도 있던데…
    정확히 어떻게 잡아야하는건가요. 지금 Node 서버사이드랑 연결해서 작성하는 중 입니다.

    • 답이 늦어서 죄송합니다 🙁 아마 지금쯤 해결하셨을것같지만…
      https://velopert.com/2937

      를 참조해주세요. 그 부분에 대해서 다뤘습니다.

  • 똥광이

    강의 잘 봤습니다~ 감사합니다!

  • noob

    항상 감사합니다 Router v4.x를 사용중인데 3.x에서는 this.props.location.pathname으로 현재 path에 접근이 가능하던데 v4에서는 안되는거같더라구요 웹어플리케이션(2)를 보면서 진행하고 있는데 혹시 v4에서는 location.pathname 에 접근하는 방식이 다른가요?

    • noob

      아 new URLSearchParams(location.pathname) 접근하니 됬네요 ㅋㅋ 감사합니다

  • Coding Mentor

    Nice Article!

  • Xellos

    webpack2 + router 4를 잘 사용하고 있는데 dev 설정으로는 “/user/profile” 이라는 path에 새로고침을 하거나 다이렉트로 접근해도 정상적으로 잘 구현이 됩니다. 근데 문제가 production 레벨로 변경 하여 “/user/profile”로 접근 할 경우 처음에는 화면에 랜더링 되지만 새로고침을 하면 404가 발생을 하네요. 화면이 처음에 랜더링 되긴 하지만 그 페이지에 존재하는 리소스들은 path가 바뀌어 전부 사용 할 수 없는 상황이 되어있습니다. (이것도 path문제… )
    dev 경우 webpack dev server를 사용하고 production인 경우 express를 사용 하고 있습니다.
    답답하네요 ㅠㅠ

  • jinhoyim

    좋은 글 감사합니다.

  • 박계성

    강의 잘 봤습니다~ 궁금한게 있는데요~ Switch사용할때 NoMatch를 header컴포넌트 속에 넣지 않고 NoMatch 만 보이게 하고 싶을때는 어떻게 해야 할까요?

  • ronaldo

    혹시 react v4에서 unsaved 되었을 때 prevent transition 하고 싶은데 방법 아시나요…?

  • Jinhee Won

    넘 알기쉽게 항상 강의해 주셔서 감사합니다. 저에겐 사막의 오아시스 같은 블로그입니다.

  • Pete Kim

    정말 감사합니다.

  • Pete Kim

    혹시 코드스플리팅과 서버사이드 렌더링도 강의 올라올까요?

  • muk2

    강의 잘봤습니다. 알기 쉽고 재밌었어요. 감사합니다:D

  • Wonsup Jung

    강의 잘 들었습니다. 감사합니다. Angular하고는 또 다는 무엇이가 끌리는 것이 있네요..

  • Dubbing Lee

    감사합니다~

  • 송명진

    리액트 혼자 공부하려니깐 막막했는데 강의 보니깐 어떻게 돌아가는지 알거 같에요ㅎㅎ

  • Rocket

    궁금한게 있습니다.
    router v2에서 v4로 바뀌면서 중첩된 경로 사용을 못하는 것 같습니다.
    해결 방안은 없을까요?

    간단한 예제로는…
    import Temp1 from ‘./Temp1’;
    import Temp2 from ‘./Temp2’;
    import Temp3 from ‘./Temp3’;

    이런 구성일 때 url에 직접 localhost:3000/hello/hi 라고 접근하면 문제가 생기네요ㅠㅠ

  • 한비

    역시 (^^)b
    항상 감사합니다.

  • 구스

    목소리 정말 좋네요. 열공하겠습니다