[React] 미니 블로그 프론트단 작성, 빌드 - router, route, useNavigate()

미니 블로그 기획하기

 

개발을 시작하기 전에 정해야 할 것들

 

기획

---

미니 블로그에 필요한 기능

• 글목록 보기 기능(리스트 형태)
• 글 보기 기능
• 댓글 보기 기능
• 글 작성 기능
• 댓글 작성 기능

 

주요 컴포넌트 구성

• 글목록 보기 기능 : PostList, PostListItem
• 글 보기 기능 : Post
• 댓글 보기 기능 : CommentList, CommentListItem
• 글 작성 기능 : PostWrite
• 댓글 작성 기능 : CommentWrite

 

전체 화면 디자인

 

개발 환경 세팅

---

프로젝트 생성

npx create-react-app mini-blog

 

 

패키지 설치

• react-router-dom (v6) :리액트 앱에서 경로 전환을 위해 사용하는 패키지
• styled-components (v5)

✅ npm install --save react-router-dom styled-component

• --save : pakage.json 파일이 관리하는 의존성 목록에 저장하겠다는 의미이다.

 

폴더 구성하기

src

• component
  • list : 리스트와 관련된 Component들을 모아놓은 폴더
  • page : 페이지 Component들을 모아놓은 폴더
  • ui : ui Component들을 모아놓은 폴더

 

컴포넌트 구현하기

---

UI Component 구현하기

버튼, 텍스트 입력 등 사용자가 입력을 할 수 있게 해주는 Component들을 구현한다.

설계 시에는 Top-Down 방식을 사용했지만, (큰 것부터 작은 것 순으로)

구현시에는 Bottom-Up 방식으로 구현한다. (작은 것부터 큰 것 순으로)

 

필요한 ui Component는 아래와 같다. 

• 버튼 : 글이나 댓글 작성 완료시 누르는 버튼   ✅ Button
• 텍스트 입력폼 : 글, 댓글의 내용을 작성 공간   ✅ TextInput

 

List Component 구현하기

• PostListItem
• PostList
• CommentListItem
• CommentList

 

가짜 데이터 만들기

'src - data.json' 파일 생성

 

Page Component  구현하기

• MainPage : 글을 작성할 수 있는 버튼과 글 목록을 보여준다. 
• PostWritePage : 글을 작성할 수 있는 폼과, 작성 완료 버튼을 보여준다.
• PostViewPage : 글과 댓글을 보여주고, 댓글 작성 기능을 제공한다.

 

각 페이지별 경로 구성하기

---

• react-router-dom : 리액트를 위한 라우팅 라이브러리
• 라우팅 : 사용자를 원하는 경로로 보내는 과정

 

📌 react-router-dom을 이용한 라우팅 구성 예시

<BrowserRouter>
	<Routes>
        <Route index element={<MainPage />} />
        <Route path="places" element={<PlacePage />} />
        <Route path="games" element={<GamePage />} />
  	</Routes>
</BrowserRouter>

BrowserRouter : 웹 브라우저에서 react-router를 사용하여 라우팅을 할 수 있도록 해주는 컴포넌트

• 웹 브라우저에는 'history'라는 기능이 내장되어 있는데, 여기에는 사용자가 탐색한 페이지들의 방문 기록이 저장된다.
• 그래서 '뒤로 가기'를 누르면, 'history'를 이용해서 이전 페이지가 어디인지 찾고 해당 페이지로 이동한다.

✅ BrowserRouter는, history를 이용해 경로를 탐색할 수 있게 해주는 컴포넌트이다.

 

Routes와 Route는 실제로 라우팅 경로를 구성할 수 있게 해주는 컴포넌트로,

Routes는 여러 개의 Route 컴포넌트를 children으로 가진다.

Route는 Routes의 하위 컴포넌트로서, path와 element 속성을 갖는다.

• path는 경로를 나타내고,
• element는 경로가 일치할 경우 렌더링할 리액트 엘리먼트를 나타낸다.

 

💡 경로값이 없이 사이트 메인("/")으로 진입하게 되면, index라는 prop을 가진 route로 라우팅된다.

 

 

useNavigate() Hook

function SampleNavigate(props) {
	const navigate = useNavigate();
    
    const moveToMain = () => {
    	navigate("/");
    }
    
    return (
    	...	
    );
}

 useNavigate()의 호출 결과로 나오는 navigate 함수에 path를 파라미터로 넘겨준다.

 

 

App.js 파일 수정하기

 

index.js 파일 설명

---

처음으로 렌더링할 컴포넌트를 지정할 수 있다. (default: App)

 

Production 빌드하기

---

빌드(build)는 코드와 애플리케이션이 사용하는 이미지, css 파일 등의 파일을 모두 모아서 패키징하는 과정이다.

 

1. 실행 : npm run build
2. serve 설치하기 : npm install -g serve
   • serve : static 파일들을 서빙해주는 역할
3. serve -s build
   • build 폴더를 기반으로 웹 애플리케이션 서빙

 

* 배포는 빌드를 통해 생성된 정적인 파일들을 배포하려는 서버에 올리는 과정이다.

 

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션16. Mini Project
• React Router docs
• React Router v6 튜토리얼

 

➰ 더 공부할 것

• React Router docs - Getting Started 완독
• useNavigate() Hook 심화 학습