Link로 이동하기
화면 위쪽에 있는 메뉴에 Link를 추가하면 해당 페이지로 이동이 된다.
Nav.js파일에
Link 컴포넌트를 불러와서
로고 이미지와 카탈로그 메뉴를 감싸준다.
Link 컴포넌트에서는 to라는 prop을 사용한다.
이동할 경로를 /와 함께 지정해주면 된다.
이때 /를 맨 앞에 붙이는 것은 절대경로라는 의미이다.
이렇게 하면 로컬 호스트 3000이라는 도메인에 /courses를 붙인 주소로 이동한다.
만약 /를 안붙이면
현재 주소에 맨 뒤에다가 웹 브라우저가 /courses를 붙여서 이동하게 된다.
a태그와 마찬가지로 동작한다고 이해하자.
UserMenu.js파일(팝업을 열고 닫는 메뉴)
CourseItem 컴포넌트에서
템플릿 문자열을 사용할 수 도 있다.
여기서 slug는 mock.json파일을 보면 course마다 slug라는 값이 들어있다.
이 slug는 각 데이터를 구분하는 고유한 문자열이라고 생각하면 된다.
웹 개발에서는 id보다 더 의미있는 주소를 만들 때 주로 사용하게 된다.
Main.js파일을 확인해보면
이 slug는 mock.json파일에서 확인해보면
React 프론트엔드 개발 course에 해당하는 slug이다.
그래서 이 slug가 있는 course를 클릭하면 해당페이지로 이동하게 된다.
