[React] 리액트로 만든 웹, 숲으로 바라보기(part1 App.js란?)

앞으로 "리액트로 만든 웹,  숲으로 바라보기"는 구체적으로 개념을 하나하나 따져보는 것이 아닌 React로 제작한 웹 사이트가 대략 어떠한 구성으로 이루어졌는지 보여드리게 위해 작성하였습니다.

 

 

React로 간단한 커뮤니티 사이트를 제작해보면 기본적인 틀은 다음과 같습니다.

---

1. Src 폴더 

1. App.js

 

2. Component  폴더

1. Detail.js

2. Edit.js

3. Heading.js

4. List.js

5. Upload.js

---------------

6. Login.js

7. Register.js

 

3. Server 폴더

1. index.js

 

4. Style 폴더

1. ListCSS.js

2. PostDetailCSS.js

3. UploadCSS.js

4.UserCSS.js

---

하나하나씩 어떤 역할을 수행하고 있는지 분석해보려고 한다.

 

1. App.js

 

왜 App.js에 있는 화면이 메인으로 띄워질까요?

 

React는 번들러를 활용합니다. 특히 webpack을 주로 사용하는데, node_modules에 가 보면 webpack이 알아서 설치되어 있음을 알 수 있습니다. webpack은 가장 처음으로 읽어들이는 entry point부터 시작하여 필요한 모든 모듈을 다 불러온 뒤 번들링하여 한 파일로 합쳐서 bundle.js에 저장하는 역할을 수행합니다.

 

이 때 webpack 설정파일에 가 보면 entry point가 index.js로 정의되어 있을 것입니다.

 

[ index.js ]

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

이처럼 webpack의 entry point였던 index.js에, App.js의 요소를 그리도록 작성되어 있기 때문에, 첫 화면에 App.js의 것들이 보여지게 되었던 것입니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

처음 프로젝트를 생성하면 다음과 같은 코드가 작성되어 있습니다.

 

1. import 문

// React 라이브러리를 불러옵니다.
import React from 'react'; 

// 로고를 불러옵니다. (이건 그냥 React 페이지)
import logo from './logo.svg'; 

// App 컴포넌트에 관련된 CSS를 불러옵니다. 이것은 웹팩(Webpack)으로부터 온 것입니다.
import './App.css';

 

2. function App() 

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );

위의 코드는 React 프로젝트를 처음 생성했을 때 작성되어 있는 코드입니다. (React 의 로고 페이지를 출력합니다.)

 

기본형으로 바꿔주면 다음과 같습니다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

 

3. Export문

export default App

App 컴포넌트들을 다른 모듈에서 사용할 수 있게 합니다. 

 

 

이제 커뮤니티 사이트를 만들어본 App.js는 어떤 모습을 하고 있을 지 보여드리겠습니다.

import {Routes, Route} from "react-router-dom";
import Heading from "./Component/Heading";
import List from "./Component/List";
import Upload from "./Component/Upload";
import Detail from "./Component/Detail";
import Edit from "./Component/Edit";

import Login from "./Component/User/Login";
import Register from "./Component/User/Register";

function App() {
    return (
        <>
            <Heading />
            <Routes>
                <Route
                    path="/"
                    element={<List />}/>
                <Route
                    path="/upload"
                    element={<Upload />}/>
                <Route
                    path="/post/:postNum"
                    element={<Detail />}/>
                <Route
                    path="/edit/:postNum"
                    element={<Edit />}/>
                <Route
                    path="/login"
                    element={<Login />}/>
                <Route
                    path="/register"
                    element={<Register />}/>
            </Routes>
        </>
    )
}
export default App;

 

하나 하나씩 설명해드리겠습니다.

 

1. import 문

//React 라이브러리 Routes, Route를 가져옵니다. 
import {Routes, Route} from "react-router-dom";  

//다음은 컴포넌트(component)를 각각 만들어 App.js로 가져옵니다. 
import Heading from "./Component/Heading";     //메뉴바
import List from "./Component/List";           //글 목록 페이지
import Upload from "./Component/Upload";       //업로드 페이지
import Detail from "./Component/Detail";       //세부 게시물 페이지 
import Edit from "./Component/Edit";           //수정 페이지

import Login from "./Component/User/Login";    //로그인 페이지
import Register from "./Component/User/Register"; //회원가입 페이지

 

2. function App()

function App() {
    return (
        <>
            <Heading />
            <Routes>
                <Route
                    path="/"
                    element={<List />}/>
                <Route
                    path="/upload"
                    element={<Upload />}/>
                <Route
                    path="/post/:postNum"
                    element={<Detail />}/>
                <Route
                    path="/edit/:postNum"
                    element={<Edit />}/>
                <Route
                    path="/login"
                    element={<Login />}/>
                <Route
                    path="/register"
                    element={<Register />}/>
            </Routes>
        </>
    )
}

React의 싱글 페이지 애플리케이션

 

이전에는 Heading 페이지 따로 List 페이지 따로 만들어서 클릭할 때마다 모든 html을 전달하여 화면에 보여주었습니다.

그러다보니 페이지를 이동할 때마다 새로운 html을 받아오고 리소스를 전달받아 해석하여 화면에 보여줬습니다.

 

하지만 요즘 웹에선 제공되는 정보가 정말 많기에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상 문제가 발생할 수 있습니다.

 

예를들어 트래픽이 너무 많이 나올 경우 사용자가 몰려 서버에 부하가 쉽게 걸릴 수 있습니다. 

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰렌더링을 사용자의 브라우저가 담당하도록 하고, 

우선 어플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해주는 싱글 페이지 방식을 사용하고 있습니다.

 

각각의 페이지를 import 받아서 Route, 말 그대로 "노선" 처럼 App.js에서 해당 페이지를 보여줄 수 있습니다.

요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 거라고 이해하면 됩니다.

 

 

---

 

2. Component 폴더내용은 다음 글에서 이어서 작성하도록 하겠습니다.