[React.js] React-Router v4 Pre-Release 사용해보기


리액트 라우터 v4 공식 릴리즈되어 새 자료를 만들었습니다. 이 포스트에 있는 자료는 deprecated 되었으니 새 포스트를 참고해주세요.

최근, React Router 가 v4 버전을 pre-release 하였습니다. 어떻게 달라졌나 알아보고, 사용법도 알아봅시다. 제가 사용해본 결과, 기존의 사용법과 정말 많이 달라졌으며, 사용법이 정말 뭐랄까, 더욱 React 스러운 것 같습니다. 저는 꽤 맘에 드네요.

더 많은 사람들이 볼 수 있도록 영어로 동영상을 제작하였습니다 🙂
한국어 자막을 설정하였으니 자막을 활성화 하세요.

Links:
React Router v4 Pre-release Documentation(https://react-router-website-xvufzcov…)
Should I use React.createClass, ES6 Classes or stateless functional components? (http://jamesknelson.com/should-i-use-…)
Github repo(https://github.com/velopert/react-rou…)

추가적으로 이 링크 읽으시면 매우 유용합니다: https://github.com/ReactTraining/react-router/blob/v4/README.md#v4-faq

  • 토깽이

    유용한 강좌 강사합니다. 그런데. 한가지 질문이 있습니다. 위의 동영상과 코드대로 만들었는데요. 문제는 주소창에서 /topics/rendering 과 같이 접근할 때 에러가 나타납니다. 이를 처리할 방법은 없나요?

    • 어떤오류가 뜨는지 스크린샷을 찍어주실수있으신가요?

  • browsable

    안녕하세요 잘 보고 있습니다. 한가지 여쭤볼게 있는데 doucument에서 Miss 내용을 봐도 그렇고 NotFound 컴포넌트에서 location.pathname을 쓰는데 pathname을 찾을 수가 없다는 콘솔에러와 함께 NotFound가 렌더링이 안되는데 이에 대해서 여쭤봐도 될까요?

  • 김강인

    BrowserHistory.push 와 같이 다른 url로는 이제 어떻게 이동시킬 수 있을까요?

  • 김현우

    벨로퍼트님 강좌 감사합니다. 여쭤보고 싶은게 있어서 적습니다.

    컴포넌트의 location와 children의 사용 용도가 헷갈립니다.

    첨부 사진처럼 비슷한 기능인거 같은데,, 영여가 안되서 제가 이해를 못하나 봅니다. 두 prop을 어떤 상황에서 써야할까요?

    https://uploads.disquscdn.com/images/49e0be3b6744f6a1d7439ff7464f1cd388bb88f067e14ed9a90a7e2002e567c2.png https://uploads.disquscdn.com/images/af4c5dc0353e45ebbe33c20b50bc75a828741d375aea2f742f18294676e97746.png

  • 신현승

    안녕하세요 강좌 잘 보고 있습니다 react-router v4를 설치하고 테스트 중인데요..
    에러가 나서 더 이상 진행이 되지 않습니다. 한번 확인 부탁 드려도 될까요..
    react-router 버전은 ^4.0.0-alpha.5 입니다. create-react-app 으로 프로젝트 설치 했습니다.
    https://uploads.disquscdn.com/images/ce01956ff9d288db5930fca61b7e07de6f0fcafe7633c6fc88798e6a1ad1a970.jpg

    • 한번 node_modules 를 삭제하시고 다시 npm install 을 해보시겠어요?

      • 신현승

        답변 감사합니다.
        그래도 동일한 현상이 계속 되네요 ㅎㅎ

  • Hyunseo Kang

    아… 그리도 찾아 해매던 react-router v4 doc 주소를 여기와서 찾네요… ㅠㅠ reacttraining.com/react-router 이 react-router 문서일줄은 생각도 못했네요.. 계속 애매한 https://github.com/ReactTraining/react-router 여기만 쑤시도 다녔네요. ㅎㅎ 항상 감사합니다.

  • Hudi

    와.. 완전 멋있어요…