[FE 45] _23.05.19 _ Day 28 (React SPA)

리액트 SPA(Single Page Application)는 리액트(React) 라이브러리를 사용하여 개발된 웹 애플리케이션입니다.

SPA는 사용자가 애플리케이션을 로드할 때 초기 HTML 문서를 한 번만 받고, 이후에는 서버와의 동적인 데이터 교환을 통해 필요한 컨텐츠를 업데이트합니다.

이로써 전통적인 다중 페이지 애플리케이션과는 달리 페이지를 새로고침하지 않고도 부드러운 사용자 경험을 제공할 수 있습니다.


리액트 SPA의 특징

컴포넌트 기반:
리액트는 UI를 독립적인 컴포넌트로 나누고, 각 컴포넌트를 조합하여 애플리케이션을 구축합니다. 이는 재사용 가능하고 유지보수가 쉬운 코드를 작성할 수 있게 합니다.

가상 DOM (Virtual DOM):
리액트는 가상 DOM을 사용하여 UI 업데이트를 효율적으로 처리합니다. 가상 DOM은 실제 DOM과 동기화되어 있으며, 변경된 부분만 실제 DOM에 반영하여 성능을 최적화합니다.

라우팅:
리액트 라우터(React Router)와 같은 라이브러리를 사용하여 클라이언트 측 라우팅을 관리할 수 있습니다. 이를 통해 URL을 기반으로 특정 컴포넌트를 렌더링하고, 사용자가 애플리케이션 내에서 다른 뷰로 이동할 수 있습니다.

상태 관리:
리액트 컴포넌트는 상태(state)를 가질 수 있습니다. 복잡한 애플리케이션에서는 Redux, MobX, 또는 React Context API와 같은 상태 관리 라이브러리를 사용하여 전역 상태를 관리할 수 있습니다.

비동기 통신: AJAX, Axios, fetch API 등을 사용하여 서버와 데이터를 비동기적으로 통신합니다. 이를 통해 데이터를 가져와서 애플리케이션의 UI를 업데이트하거나 서버에 데이터를 전송할 수 있습니다.

리액트 SPA는 모바일 앱과 유사한 사용자 경험을 제공하며, 성능과 사용자 인터페이스의 일관성을 개선할 수 있습니다.

---

fe-sprint-react-twittler-spa 과제 구조 

/
├── /Twittler React SPA
│   ├── README.md
│   ├── /public                        # create-react-app이 만들어낸 파일, yarn/npm start로 실행할 시에 쓰입니다
│   └── /src                           # React 컴포넌트가 들어가는 폴더
│        ├── static                    # dummyData가 들어가는 폴더
│        │    └── dummyData.js
│        ├── Pages                     # 페이지를 표시하는 컴포넌트가 들어가는 폴더
│        │    ├── About.css
│        │    ├── About.js
│        │    ├── MyPage.css
│        │    ├── MyPage.js
│        │    ├── Tweets.css
│        │    └── Tweets.js
│        ├── App.css
│        ├── App.js
│        ├── Footer.js
│        ├── index.js
│        └── Sidebar.js
├  package.json
└ .gitignore

---

react-router 라이브러리 설치하기

npm install react-router-dom

---

리액트에서 라우팅을 구현하려면 보통 React Router 라이브러리를 사용합니다. React Router는 리액트 애플리케이션 내에서 클라이언트 측 라우팅을 관리하는 데 도움이 되는 많은 기능을 제공합니다. 다음은 React Router를 사용하여 라우팅을 설정하는 기본적인 단계입니다:

 

1. React Router 설치: 우선 React Router를 설치해야 합니다. npm을 사용하는 경우, 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다

npm install react-router-dom

2.  라우터 설정: 라우터는 애플리케이션의 최상위 컴포넌트에 설정됩니다. 일반적으로 App.js와 같은 파일에서 라우터를 설정합니다. React Router의 BrowserRouter 컴포넌트를 사용하여 라우터를 감싸줍니다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 라우팅할 컴포넌트들을 이곳에 작성 */}
    </Router>
  );
}

3. Route 구성: Route 컴포넌트를 사용하여 경로와 해당 경로에 대한 컴포넌트를 연결합니다. Route 컴포넌트는 경로에 따라 특정 컴포넌트를 렌더링합니다. 예를 들어, /about 경로에 About 컴포넌트를 연결하려면 다음과 같이 작성할 수 있습니다.

import { Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        {/* 다른 경로와 컴포넌트를 추가할 수 있습니다 */}
      </Switch>
    </Router>
  );
}

Switch 컴포넌트는 여러 Route 컴포넌트 중에서 첫 번째로 일치하는 경로의 컴포넌트만 렌더링합니다. 이를 통해 중복된 경로에 대한 충돌을 방지할 수 있습니다.

 

4.  링크 생성: 라우터를 사용하여 애플리케이션 내에서 다른 경로로 이동하려면 Link 컴포넌트를 사용합니다. Link 컴포넌트는 클릭할 수 있는 링크를 생성하고, 브라우저의 주소창의 URL을 업데이트합니다. 예를 들어, About 페이지로 이동하는 링크를 생성하려면 다음과 같이 작성할 수 있습니다.

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/about">About</Link>
        </li>
        {/* 다른 링크를 추가할 수 있습니다 */}
      </ul>
    </nav>
  );
}

이렇게 설정하면 /about 경로로 이동할 때 About 컴포넌트가 렌더링됩니다. React Router는 다양한 기능을 제공하며, 중첩된 라우팅, 경로 매개변수, URL 쿼리 등의 기능을 활용할 수 있습니다. React Router 공식 문서를 참조하면 더 많은 사용법과 예제를 확인할 수 있습니다.

---

과제는 따로 포스팅 해야겠다!