[트위터 클론코딩 챌랜지] 종속성 설치 및 Router_04

이제 Dependency를 설치할겁니다. vscode 내부 터미널을 열고 아래 Command를 순서대로 입력합니다.

npm i react-router-dom@6.14.2

npm i styled-reset

npm i styled-components@6.0.7

npm i @types/styled-components -D

이번 챌랜지는 버전을 위와 같이 사용하니 필히 버전 맞춰서 설치해줍니다.

이제 Router를 만들어줍니다.

App.tsx에 router를 만들어주고 src 아래 components 폴더를 만들고 layout.tsx를 생성합니다.
layout.tsx에는 아래와 같이 코드를 작성합니다.

이후 src 밑으로 routes 폴더를 생성하고 폴더안에 home.tsx를 만들어줍니다.
home.tsx에는

이렇기 기본틀을 만들어줍니다.
profile.tsx도 생성해서 똑같이 내용을 채워줍시다.

그리고 App.tsx로 돌아와서

children 밑으로 만들어준 요소들을 랜더링될 수 있게 넣어줍시다.
function 안으로 RouterProvider를 만들어주고 결과를 확인하게 되면

이렇게 랜더링되게 됩니다. layout 글자가 나오는건 layout.tsx에 <h2>layout</h2>를 넣어줬기 때문입니다.
layout.tsx의 자식요소로 home.tsx와 profile.tsx를 넣어줬습니다. 그렇기에 http://localhost:5173/ 이 주소로 접속하게 되면 루트경로로 설정한 layout.tsx가 랜더링되게 됩니다.
그리고 home.tsx는 별다른 경로설정이 없기에 바로 랜더링되고,
profile 같은 경우는 /profile을 입력할 경우 나타나게 되는거죠. (http://localhost:5173/profile)

이 동작이 바로 layout.tsx에 입력한 <Outlet />이 수행하는 동작입니다.