Node.js와 React로 간단한 웹페이지를 만들어보자 5편 (React.js 시작)

<목차>
React란?
Create-React-App
npm npx
구조 설명 + CRA to Our Boilerplate
React Router Dom

React란?

React는 라이브러리로, 컴포넌트들로 구성되어 있습니다.
컴포넌트는 모듈과 비슷한 개념으로 재사용성이 뛰어납니다.
즉 기능별로 특정 기능에 필요한 코드를 한 컴포넌트에 몰아넣기 때문에 컴포넌트를 잘 짜두면 여러 군데에 재사용할 수 있습니다.
또한 Virtual DOM이라는 특징이 있는데 설명을 위해 Real DOM과 비교해보겠습니다.

Real DOM VS Virtual DOM
10개의 리스트가 있는 상황에서 한가지의 리스트만 Update할 때,
R: 전체 리스트를 다시 Reload 해야한다. Superexpensive한 작업.
V: 바뀐 한 가지 리스트만 DOM에서 바뀌주면 됩니다.

그렇다면 Virtual DOM은 어떻게 그게 가능할까요?
일단 Virtual DOM은 Real DOM과 같은 properties들을 갖고 있고, Real DOM을 간단하게 copy한거라 보면 됩니다.
Virtual DOM이 이전 Virtual DOM에서 찍어둔 snapshot과 현재 Virtual DOM을 비교해서 바뀐 부분을 찾습니다. 이 과정을 'diffing'이라고 부릅니다. 그 바뀐 부분만 Real DOM에서 바꿔줍니다.

Create-React-App

그렇다면 본격적으로 리액트를 설치하고 시작해보도록 하겠습니다.
client, server 폴더를 루트 디렉토리에 만들고 기존에 node.js 실습에서 만들었던 것들을 적당히 담아줍니다.
server 폴더에 config, middleware, models, index.js를 넣어줍니다.

npx create-react-app . //react 다운로드

여태까지는 npm(node package manager)을 이용해 각종 패키지들을 install해왔는데 여기서는 npx라는게 쓰입니다. 이 둘의 차이는 무엇일까요?

npm npx

npm : 라이브러리를 저장하는 저장소 역할 / 빌드할 때나 배포할 때에도 사용
npx : npm registry에서 create-react-app을 찾아서 다운로드 없이 실행시켜준다.
-> npm의 장점: disk space 낭비 없이, 항상 최신버전을 사용 가능

npm run start

위의 코드 입력시 나오는 리액트의 초기화면

구조 설명 + CRA to Our Boilerplate

통상적인 구조는 아래와 같습니다.
public 폴더 안에서 쓰인 파일들은 오직 public/index.html만 쓰일 수 있습니다.
아래 src 폴더 안의 경우 JS파일과 CSS파일들을 넣는 공간인데, Webpack이 이 안의 파일만 보기 때문에 이 폴더 이외의 공간에 넣은 파일들은 Webpack에 의해 처리되지 않습니다. (이미지 등)

my-app/
	README.md
    node_modules/
    package.json
    public/
    	index.html
        favicon.ico
    src/
    	App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

그리고 프로젝트에 해당하는 구조는 이렇게 될 예정입니다.

주로 바뀐 부분은 src 폴더 내에 있는데 설명을 덧붙이자면,
LandingPage는 첫화면, NavBar는 Navigation Bar (메뉴나 카테고리 같은), hoc(higher-order component)는 안에 컴포넌트를 지니고 있고 다른 컴포넌트를 리턴하기도 하는 function입니다.

아래의 그림은 Auth라는 hoc입니다.

React Router Dom

페이지 간 이동을 할 때 React Router Dom이라는 것을 사용합니다.
자세한 사용법은 홈페이지를 참고하면 됩니다.

홈페이지에서 업데이트가 안된 부분이 있어 오류가 나는 경우가 있었는데 아래와 같이 해결하였습니다.

react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원을 안하므로 Switch -> routes로, component는 element로 적어야합니다. 아래는 예시 코드입니다.

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

어디에서 오류가 났는지 페이지가 정상적으로 출력되는 것 같지 않아서 마저 수정하고 다음 게시물에 업로드하겠습니다.