클라우딩 어플리케이션 엔지니어링 TIL Day 32 - 감정 일기장 만들기 (1)

지난 시간에는 리액트의 기능들을 사용해서 아주 간단한 일기장을 만들어보았다면

이번 시간부터는 기능도 더 추가되고 디자인적으로도 훨씬 발전된 감정 일기장 프로젝트가 진행된다

지금까지 배운 기능들을 활용하고 새로운 기능들을 배워서 멋진 토이 프로젝트를 만들어봐야겠다

---

# SPA & CSR

# Page Routing

라우팅이란?

어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정

데이터의 경로를 실시간으로 지정해주는 행위 자체와 그런 과정들을 포함하여 일컫는 말이다

따라서 페이지 라우팅은

요청에 따라서 해당 페이지를 반환하는 과정

 

# MPA

Multipage Application

여러 개의 페이지 중 요청에 따라 적절한 페이지를 보내주는 방식이다

페이지 이동 시마다 웹 서버에게 페이지를 요청한다

웹 서버는 요청된 페이지를 보내주는데 이 때 브라우저의 새로고침이 일어나며 새로운 페이지가 렌더링된다

 

# SPA

리액트는 SPA 방식을 사용한다

Single Page Application

SPA란 페이지가 하나밖에 없는 간단한 어플리케이션을 의미한다

웹 서버에게 새로운 페이지 요청 시 무조건 index.html 반환한다

 

그러면 어떻게 페이지를 변경할까?

리액트 앱이 알아서 페이지를 업데이트 한다!

데이터가 필요하면?

데이터가 필요할 때만 서버와 통신하여 데이터만 주고 받는다!

또한 리액트는 클라이언트 측에서 페이지를 렌더링하는 Client Side Rendering, 즉 CSR 방식이다

결론적으로 리액트는 SPA + CSR 방식으로 렌더링하기 때문에 브라우저의 새로고침 없이 매우 빠른 속도로 페이지를 렌더링 할 수 있다

---

# React Router 기본

라우터를 적용시키기 전 감정 일기장 프로젝트를 새로 생성해주자

그리고 프로젝트 초기 설정까지 진행한다

CSR을 위해서는 React Router 라이브러리를 이용해야 하는데

바로

react-router-dom

이다

 

# React Router 적용하기

우선 어떤 라이브러리든 사용 전 공식 문서를 읽는 습관을 들이자

 react-router-dom은 2024년 2월 기준 6버전으로 설치해야 한다

하지만 버전은 계속해서 업데이트 되기 때문에 해당 라이브러리를 사용하기 전 공식 문서 확인하여 버전 확인하고 설치하자

 npm install react-router-dom@6

 

감정 일기장에는 총 4가지의 페이지가 존재한다

pages 폴더를 만들어서 사용할 페이지 컴포넌트들을 생성하자

React Router DOM을 사용해서 페이지의 라우팅을 설정해보자!

App.js 컴포넌트에서 BrowserRouter 태그를 최상위 태그로 하여 감싸주어야 한다

import { BrowserRouter } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>안녕하시렵니까?</h2>
      </div>
    </BrowserRouter>
  );
}

export default App;

그리고 사용할 페이지 컴포넌트들을 import 한 뒤 라우터 설정하자

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>안녕하시렵니까?</h2>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

기본 주소로 Home 컴포넌트 라우팅을 설정하고 화면을 확인해보니

Home 컴포넌트가 렌더링 되고 있는 것을 확인할 수 있다

 

그렇다면 이상한 주소를 입력하면 어떤 컴포넌트가 보일까?

없는 주소를 입력하니 기본 App.js 컴포넌트만 렌더링 되고 있다

path에 주소를 입력하고 컴포넌트를 element 에 넣어주면 해당 주소일 때 해당 컴포넌트가 렌더링된다

그럼 이와 같은 방식으로 다른 컴포넌트들도 라우팅 설정을 해주자

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>안녕하시렵니까?</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

각 경로에 따라 컴포넌트가 잘 렌더링 되는 것을 확인할 수 있다

---

# 새로 알게 된 점

리액트의 렌더링 방법에 대해서 다시 한번 정확하게 복습하고 넘어가는 시간이었다

SPA, CSR 과 같은 쉽다고 생각했지만 정확하게 알지 못하거나 헷갈릴 수 있는 개념들을 다시 한번 잡고

기본적인 라우터 설정을 하면서 리액트 프로젝트의 초기 설정에 대해서 복습할 수 있었다