Routes로 감싸고 이 안에 Route 컴포넌트를 배치해본다.
/ 라는 경로로 들어오면 HomePage라는 컴포넌트를 보여주도록 지정했다.
Route 컴포넌트에 path prop으로 경로를 지정하고
element prop으로 보여줄 컴포넌트를 지정할 수 있다.
이때 element prop은 컴포넌트 함수가 아니라
JSX를 넘겨준다.
마찬가지로 courses라는 경로로 들어오면
CourseListPage라는 컴포넌트로 보여준다.
Routes 컴포넌트는 이런 식으로 여러 개의 Route를 포함한다.
Routes를 랜더링할 때
리액트 라우터는 Routes안에 있는 Route를 차례대로 검사하면서
현재 경로가 path와 일치하는지 하나씩 검사한다.
일치하는 경로를 찾으면 element prop으로 지정한 컴포넌트를 랜더링해준다.
참고)
Routes와 Route 컴포넌트는 실제로 div태그 같은 것을 랜더링하지 않는다.
리액트 프래그먼트처럼 리액트 상에서만 존재하는 컴포넌트이다.
