course 상세 페이지를 동적인 경로로 바꾸겠다.
우선 "react-frontend-development"대신에
":courseSlug" 라고 적어준다.
이렇게 하면 coueseSlug라는 변수로 페이지의 경로를 받아올 수 있다.
이런 것을 리액트 라우터에서는 파라미터라고 부른다.
CoursePage로 이동해서
useParams라는 리액트 라우터에서 제공하는 커스텀 훅을 사용하겠다.useParams가 리턴하는 객체에는 현재 경로의 파라미터들이 저장되어 있다.
이 객체에 앞에서 정의한 courseSlug라는 값이 저장되어있다.
distructuring으로 courseSlug값을 가져온다.
그리고 기존에 사용하던 'react-frontend-development'값을
courseSlug라는 변수로 바꿔준다.
이 컴포넌트에 있는 나머지 코드들은 courseSlug라는 값에 따라서
알맞은 course 데이터를 가져오고 랜더링하는 코드이다.확인해보면 페이지가 잘 보인다.
course목록페이지에 상세 페이지도 잘 동작하는 것을 확인할 수 있다.
경로에서 사용하는 동적인 값을 파라미터라고 부르고
이런 파라미터를 모아놓은 것을 Params라고 부른다.
경로 파라미터를 지정하려면 Route컴포넌트의 path prop에서
: 뒤에다가 원하는 이름을 적어주면 된다.
이렇게 하면 페이지 경로가 달라질 때마다
파라미터의 값이 달라지니까
같은 컴포넌트이더라도 파라미터값의 따라서 데이터만 다르게 보여줄 수 있다.
이런 구현 아이디어는 리액트 라우터뿐만 아니라 웹 개발에서는 흔하게 사용되니까
참고로 잘 알아두어야한다.
