React – React 시작하기 – 개요 – 1 – SPA의 개념과 React의 역할

작성자 wooah
React – React 시작하기 – 개요 – 1 – SPA의 개념과 React의 역할

React – React 시작하기 – 개요 – 1 – SPA의 개념과 React의 역할

안녕하세요! 😊 오늘은 웹 개발의 흐름을 송두리째 바꿔놓은 **SPA(Single Page Application)**의 개념과, 이 SPA에서 React가 어떤 역할을 맡고 있는지에 대해 재미있고 알기 쉽게 풀어드릴게요. 마치 웹페이지라는 무대에서 React라는 배우가 어떤 배역을 맡고 있는지 보는 느낌으로 함께 살펴보면 좋겠죠?

SPA란 무엇인가요?

💡 “싱글 페이지 어플리케이션”이란?

SPA는 한 번 페이지를 로딩한 뒤, 전체 페이지를 다시 불러오지 않고 필요한 데이터만 받아와서 화면을 갱신하는 방식의 웹 애플리케이션이에요.

예를 들어, 우리가 예전 웹사이트에서는 버튼을 누를 때마다 페이지가 깜빡이며 새로고침되었잖아요? 😖 하지만 SPA는 처음에 HTML, CSS, JavaScript를 다 받아오고, 그 이후부터는 필요한 부분만 동적으로 갱신하기 때문에 더 빠르고 매끄러운 사용자 경험을 제공해줘요!

🏠 전통적인 웹사이트 vs SPA

항목 전통적인 웹사이트 SPA (Single Page Application)
페이지 전환 전체 페이지 새로고침 일부 화면만 갱신
요청 방식 서버에 HTML 요청 주로 API(JSON 등) 요청
속도 느릴 수 있음 빠르고 부드러움
사용자 경험 끊김 있음 앱처럼 자연스러움

🎬 비유로 이해해볼까요?

전통 웹사이트는 마치 영화 볼 때마다 극장을 다시 나갔다 들어오는 느낌이라면, SPA는 한 번 입장한 후 영화 장면만 바뀌는 무대극 같은 느낌이에요!

React는 SPA에서 어떤 역할을 하나요?

React는 SPA에서 무대 감독과도 같은 역할을 합니다. HTML로 직접 화면을 바꾸는 게 아니라, 상태(state)라는 정보를 기반으로 필요한 부분만 딱 바꿔주는 방식이에요.

🧠 상태(state)에 따라 UI를 자동으로 바꿔주는 React

React의 핵심은 아주 간단해요.

“데이터가 바뀌면 화면도 같이 바뀌도록 한다!”

React는 우리가 직접 DOM을 조작하지 않고, 상태를 관리해서 필요한 부분만 업데이트해줘요. 예를 들어 버튼 클릭 시 숫자가 올라가는 카운터 앱을 React로 만들면 다음과 같아요.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

여기서 useState는 상태를 관리하는 훅(Hook)이고요, 버튼을 클릭하면 count 값이 올라가면서 <p> 태그 안의 숫자도 자동으로 변경돼요. 이게 바로 React가 SPA 환경에서 동작하는 방식이에요!

SPA를 구성하는 핵심 요소들과 React의 조화

SPA는 단순히 React만으로 되는 게 아니고요, 아래와 같은 구성 요소들과 함께 돌아가요:

구성 요소 설명 React와의 관계
클라이언트 라우팅 (예: react-router-dom) 주소(path)에 따라 어떤 화면을 보여줄지 결정 React 컴포넌트를 경로에 따라 렌더링
상태 관리 (예: useState, Redux, Recoil) 데이터 변화에 따라 UI 갱신 UI와 데이터 연결 고리
API 호출 (예: axios, fetch) 서버와 데이터 통신 필요한 데이터만 가져와 화면 구성
렌더링 최적화 (예: useMemo, React.memo) 불필요한 렌더링 방지 성능 향상 및 리소스 절약

왜 React로 SPA를 만들어야 할까요?

React는 SPA 개발에 있어서 정말 찰떡같은 궁합이에요. 그 이유는 다음과 같아요:

1. 빠른 인터랙션 처리

한 번 로딩 후에는 사용자 액션마다 즉각적인 반응을 보여줘요. 사용자 경험이 확 좋아집니다!

2. 컴포넌트 기반 아키텍처

화면을 **작은 조각(컴포넌트)**으로 쪼개서 관리할 수 있기 때문에 재사용성과 유지보수성이 훨씬 좋아요.

3. Virtual DOM을 이용한 성능 최적화

React는 내부적으로 Virtual DOM이라는 가상 구조를 만들어서, 실제 DOM을 직접 수정하기 전에 어떤 부분이 바뀌었는지 계산한 후 꼭 필요한 부분만 업데이트해요.

예시: 간단한 SPA 라우팅 구현

React에서는 react-router-dom을 사용해서 SPA 방식의 페이지 이동을 구현할 수 있어요. 아래는 아주 기본적인 예시예요:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>홈 페이지</h2>;
}

function About() {
  return <h2>소개 페이지</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <xss-Link to="/">홈</xss-Link> | <xss-Link to="/about">소개</xss-Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

위 코드를 보면 알겠지만, 실제로 페이지가 이동하는 것처럼 보이지만 전체 새로고침은 전혀 일어나지 않아요! 😎

React를 사용할 때 주의할 점

마지막으로, SPA와 React를 사용할 때 주의할 점들을 정리해볼게요:

항목 주의사항
SEO 문제 SPA는 검색엔진 최적화(SEO)에 불리할 수 있어요. Next.js 같은 프레임워크를 사용하는 것도 고려해보세요.
첫 로딩 속도 앱의 크기가 크면 초기에 로딩 시간이 길어질 수 있어요. 코드 스플리팅으로 해결 가능해요.
브라우저 히스토리 SPA는 주소는 바뀌어도 페이지를 새로고침하지 않기 때문에, URL 관리를 잘 해야 해요.
초기 설정 복잡도 React와 함께 다양한 라이브러리를 써야 하기 때문에 세팅이 복잡할 수 있어요. create-react-app 또는 Vite를 활용하면 편리해요.

마무리하며…

SPA는 현대 웹의 대세이고, React는 그 중심에서 중요한 역할을 맡고 있어요. 마치 자동차의 엔진이 부드럽게 돌아가야 운전이 즐겁듯, React는 화면을 부드럽고 빠르게 바꿔주며 사용자 경험을 끌어올려주는 핵심 도구입니다.

앞으로도 React와 함께 SPA의 세계를 한 걸음씩 배워나가 보아요! 궁금한 점 있으시면 언제든지 편하게 물어보세요 🙋‍♀️🙋‍♂️

다음 글에서는 React와 다른 프레임워크의 비교에 대해 더욱 자세히 알아보겠습니다! 🚀

답글 남기기