❗ 페이지를 먼저 만들기보단 어떤 컴포넌트를 만들고 이들을 어떻게 조합할지부터 구상!
[화면 상단]
상단 전체를 아우르는 Header 컴포넌트가 있고, 그의 자식으로 Search와 Setting이라는 컴포넌트를 만든다 또한 Header 컴포넌트는 애플리케이션의 어느 페이지에 가더라도 항상 화면 상단을 위치하므로 모든 페이지마다 따로 만들 필요없이 한번만 만들어 모든 페이지에서 사용할 수 있도록 로직을 짠다!
[화면 중앙]
중앙에는 크리에이터들이 올린 영상을 담는 ContentsList라는 컴포넌트가 있고 그 안에는 동일한 형태를 가진 영상물들이 반복적인 형태로 화면을 구상하고 있기 때문에 Content라는 컴포넌트를 한 번만 만들어 재사용!
💥 이게 끝이 아니다!! 가장 작은 단위의 컴포넌트를 분석해 보면 다양한 정보를 담고 있는 content 컴포넌트를 볼 수 있다 유튜브 콘텐츠의 경우 하나의 영상에 썸네일, 제목, 소개글, 채널 이름, 조회수, 업로드 날짜 등이 있다. 이런 content 컴포넌트는 영상과 관련된 데이터를 입력받아서 UI에 맞게 화면에 출력한다. 또한 클릭 시 해당 영상을 재생하는 기능, 영상이 대기 목록에 있거나 재생 중일 때도 동일한 내용이 화면에 출력된다. 어떤 상태에 있냐에 따라 출력 위치만 조금씩 달라진다. 이렇게 때문에 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트끼리 보다 유기적으로 주고받을 수 있게 설계해야 한다.
💥 React Router!!!
<BrowserRouter>
: History API를 사용해 UI를 URL과 동기화된 상태를 유지해 주는 역할<Routes>
: Route로 생성된 자식 컴포넌트 중에서 매친되는 첫번째 Route를 렌더링하는 역할<Route>
: 경로를 지정해 주는 데에 사용<Link>
: 사용자가 원하는 경로로 이동시켜 주는 역할// helloroute 폴더에 React App 설치
npx create-react-all helloroute
cd gelloroute
// helloroute에 react-router 설치
npm install react-router-dom@^6.3.0
import React from "react";
tmport {BrowserRouter, Routes, Route, Link } from "react-router-dom";
export default function App(){
return (. . .)
}
+
Link와 Route 설정하기
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">Mypage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
</div>
{/* 경로는 path로 컴포넌트는 element로 연결. */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</BrowserRouter>
출처: 코드스테이츠