이렇게 배열을 사용하지 않는다면 다음과 같이 작성할 수도 있습니다.

<Route component={PostListPage} path="/" exact />
<Route component={PostListPage} path="/@:username" exact />

Route 컴포넌트를 두 번 사용하는 것보다는 배열을 넣는 것이 훨씬 편하지요? 이러한 기능은 리액트 라우터 v5부터 사용할 수 있습니다.

추가로 path에 '/@:username'이라고 입력한 것이 조금 생소하게 느껴질 수 있는데요. 이 경로는 http://localhost:3000/@velopert 같은 경로에서 velopert를 username 파라미터로 읽을 수 있게 해 줍니다. Medium, 브런치 같은 서비스에서도 계정명을 주소 경로 안에 넣을 때 주소 경로에 @을 넣는 방식을 사용합니다.

Route 지정을 모두 마쳤다면 blog-frontend 경로에서 yarn start 명령어를 입력합니다. 그리고 다음 경로에 들어가서 알맞은 컴포넌트가 뜨는지 확인해 보세요.

• http://localhost:3000/

• http://localhost:3000/@tester

• http://localhost:3000/write

• http://localhost:3000/@tester/1234

• http://localhost:3000/login

• http://localhost:3000/register

비어 있는 페이지 없이 이전에 라우트 컴포넌트 안에 넣어 준 ‘포스트 리스트’, ‘회원가입’ 등의 문구가 뜬다면 잘 작동하는 것입니다.