• 01수업 소개 132
  • 학습목표리액트 라우터 DOM을 소개하고 필요성을 이해한다.
  • 동영상https://youtu.be/WLdbsl9UwDc (2분 18초)
• 02실습 준비 134
  • 학습목표실습에 사용할 앱을 생성한다.
• 2-1실습 준비 276
  • 동영상https://youtu.be/WLdbsl9UwDc?t=138 (4분 25초)
  • 예제【예제 2-1】 불필요한 코드 제거
  • 【예제 2-2】 불필요한 코드 제거 및 App 컴포넌트 구현
  • 【예제 2-3】 App 컴포넌트에서 사용할 3개의 컴포넌트 만들기
• 2-2react-router-dom 설치 279
  • 동영상https://youtu.be/WLdbsl9UwDc?t=403 (1분 32초)
• 03Router 138
  • 학습목표BrowserRouter의 역할과 사용법을 익힌다.
  • 동영상https://youtu.be/WLdbsl9UwDc?t=495 (11분 26초)
  • 예제【예제 3-1】 BrowserRouter를 임포트하고 최상위 컴포넌트 감싸기
  • 【예제 3-2】 URL에 따라 적당한 컴포넌트가 App 컴포넌트에 위치하게 설정
  • 【예제 3-3】 사용자가 존재하지 않는 페이지로 접근했을 때 Not Found 보여주기
• 04Link 143
  • 학습목표Link, NavLink 컴포넌트의 역할과 사용법을 익힌다.
• 4-1Link 291
  • 동영상https://youtu.be/WLdbsl9UwDc?t=1181 (4분 29초)
  • 예제【예제 4-1】 <a> 태그를 Link 컴포넌트로 교체
  • 【예제 4-2】 BrowserRouter를 HashRouter로 교체
• 4-2NavLink 293
  • 동영상https://youtu.be/WLdbsl9UwDc?t=1450 (3분 19초)
  • 예제【예제 4-3】 Link 컴포넌트를 NavLink 컴포넌트로 교체
  • 【예제 4-4】 내비게이션에 사용자가 위치한 곳을 표시
• 05Nested Routing 148
  • 학습목표하나의 라우터로 path 값에 따라 주소를 처리하는 법을 익힌다.
  • 동영상https://youtu.be/WLdbsl9UwDc?t=1649 (14분 18초)
  • 예제【예제 5-1】 topics 안에 또 다른 페이지 추가
  • 【예제 5-2】 배열을 이용해 자동으로 리스트와 라우터가 만들어지게 수정
  • 【예제 5-3】 하나의 라우터로 path 값에 따라 주소를 처리
  • 【예제 5-4】 useParams라는 hook을 이용해 id에 해당하는 데이터 출력
  • 【예제 5-5】 contents 배열에서 id에 해당하는 정보 불러오기
• 06수업을 마치며 156
  • 학습목표추가로 배울 고급 주제에 대해 알아본다.
  • 동영상https://youtu.be/WLdbsl9UwDc?t=2507 (2분 0초)