[React] 01. React란? 왜 웹 개발에서 많이 사용할까?

웹 개발을 공부하다 보면 HTML, CSS, JavaScript를 어느 정도 배운 뒤에 자연스럽게 React라는 이름을 자주 만나게 됩니다. 처음에는 “JavaScript만으로도 화면을 만들 수 있는데 왜 React를 또 배워야 하지?”라는 생각이 들 수 있습니다.

이번 글에서는 React를 어렵게 외우는 방식이 아니라, 왜 React가 등장했고, 어떤 문제를 해결하기 위해 사용하는지를 중심으로 정리해보겠습니다.

1. React란?

React는 사용자 화면, 즉 UI(User Interface)를 만들기 위한 JavaScript 라이브러리입니다. 여기서 UI는 버튼, 입력창, 목록, 카드, 게시글 화면처럼 사용자가 직접 보고 조작하는 화면 요소를 말합니다.

React의 가장 큰 특징은 화면을 하나의 큰 덩어리로 만드는 것이 아니라, 작은 컴포넌트(Component) 단위로 나누어 만든다는 점입니다.


function Button() {
  return <button>확인</button>;
}

function Card() {
  return (
    <div>
      <h3>게시글 제목</h3>
      <p>게시글 내용입니다.</p>
      <Button />
    </div>
  );
}

위 코드에서 Button과 Card는 각각 하나의 컴포넌트입니다. 작은 컴포넌트를 만든 뒤, 필요한 곳에서 조합해서 하나의 화면을 구성할 수 있습니다.

2. 기존 JavaScript 방식의 불편함

React를 이해하려면 먼저 기존 JavaScript 방식에서 어떤 불편함이 있었는지 생각해보면 좋습니다. 예를 들어 버튼을 누를 때마다 화면의 숫자가 증가하는 기능을 만든다고 가정해보겠습니다.


<h1 id="count">0</h1>
<button id="plusBtn">+1 증가</button>

<script>
  let count = 0;

  const countText = document.getElementById("count");
  const plusBtn = document.getElementById("plusBtn");

  plusBtn.addEventListener("click", function () {
    count++;
    countText.innerText = count;
  });
</script>

간단한 예제에서는 큰 문제가 없어 보입니다. 하지만 화면이 복잡해지면 이야기가 달라집니다.

어떤 HTML 요소를 선택해야 하는지 계속 찾아야 합니다.
데이터가 바뀔 때마다 화면도 직접 수정해야 합니다.
비슷한 UI가 많아지면 코드가 반복됩니다.
페이지가 커질수록 유지보수가 어려워집니다.

즉, 기존 방식은 데이터 변경과 화면 변경을 개발자가 직접 계속 연결해주어야 합니다. React는 이 불편함을 줄이기 위해 많이 사용됩니다.

3. React는 화면을 데이터 중심으로 생각한다

React에서는 화면을 직접 하나하나 수정하기보다는, 데이터가 바뀌면 React가 그 데이터에 맞게 화면을 다시 그려준다는 흐름으로 생각합니다.


import { useState } from "react";

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        +1 증가
      </button>
    </div>
  );
}

export default Counter;

위 코드에서 count는 화면에 표시되는 데이터입니다. 버튼을 클릭하면 setCount를 통해 값이 바뀌고, React는 바뀐 값에 맞게 화면을 다시 보여줍니다.

이처럼 React에서는 “HTML을 찾아서 직접 바꾼다”보다는 상태값이 바뀌면 화면도 함께 바뀐다는 방식으로 개발합니다.

4. 컴포넌트란?

컴포넌트는 React에서 가장 중요한 개념입니다. 쉽게 말하면 화면을 구성하는 재사용 가능한 조각입니다.

예를 들어 게시판 화면을 만든다고 하면 다음과 같이 나누어 생각할 수 있습니다.

Header 컴포넌트
SearchBox 컴포넌트
PostList 컴포넌트
PostCard 컴포넌트
Pagination 컴포넌트

이렇게 나누면 코드가 한 파일에 길게 몰리지 않고, 각 역할별로 정리할 수 있습니다. 또한 같은 버튼, 같은 카드, 같은 입력창을 여러 화면에서 재사용하기도 좋아집니다.


function PostCard() {
  return (
    <article>
      <h3>React 공부 시작하기</h3>
      <p>React의 기본 개념을 정리한 글입니다.</p>
      <button>자세히 보기</button>
    </article>
  );
}

export default PostCard;

위처럼 게시글 카드 하나를 컴포넌트로 만들어두면, 목록 화면에서도 사용하고, 추천 게시글 영역에서도 사용할 수 있습니다.

5. React를 사용하면 좋은 점

1) 화면을 컴포넌트 단위로 나눌 수 있다

React는 화면을 작은 단위로 분리해서 만들 수 있습니다. 그래서 코드 구조를 파악하기 쉽고, 수정해야 할 위치도 비교적 명확해집니다.

2) 재사용이 쉽다

한 번 만든 버튼, 카드, 입력창 컴포넌트를 여러 화면에서 다시 사용할 수 있습니다. 반복되는 UI가 많은 웹 프로젝트에서 특히 유용합니다.

3) 데이터 변경에 따른 화면 처리가 편하다

React는 상태값이 바뀌면 그 값에 맞게 화면을 다시 렌더링합니다. 그래서 개발자는 화면을 직접 수정하는 코드보다, 데이터의 흐름과 상태 관리에 더 집중할 수 있습니다.

4) SPA 개발에 많이 사용된다

React는 한 페이지 안에서 여러 화면을 전환하는 SPA(Single Page Application) 개발에도 많이 사용됩니다. 예를 들어 목록 페이지, 상세 페이지, 작성 페이지를 이동할 때 전체 페이지를 매번 새로고침하지 않고, 필요한 화면만 바꾸는 방식으로 구성할 수 있습니다.

6. React는 프레임워크가 아니라 라이브러리다

React를 설명할 때 자주 나오는 말이 있습니다. 바로 React는 프레임워크가 아니라 라이브러리라는 말입니다.

프레임워크는 프로젝트 구조나 개발 방식까지 어느 정도 정해주는 경우가 많습니다. 반면 React는 기본적으로 UI를 만드는 역할에 집중합니다.

그래서 실제 React 프로젝트에서는 필요에 따라 여러 도구를 함께 사용합니다.

React Router: 페이지 이동 처리
Axios 또는 fetch: API 요청 처리
Vite: 개발 서버와 빌드 도구
Tailwind CSS: 화면 스타일링

처음부터 모든 도구를 한 번에 외우려고 하면 어렵습니다. 처음에는 React의 핵심인 컴포넌트, JSX, props, state부터 차근차근 익히는 것이 좋습니다.

7. React 프로젝트는 어떻게 시작할까?

요즘 React 프로젝트를 처음 만들 때는 Vite를 사용하는 경우가 많습니다. Vite는 개발 서버 실행과 빌드를 빠르고 간단하게 도와주는 도구입니다.


npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

위 명령어를 실행하면 기본 React 프로젝트를 만들고, 개발 서버를 실행할 수 있습니다. 브라우저에서 안내되는 주소로 접속하면 React 화면을 확인할 수 있습니다.

다만 이번 1편에서는 설치보다 개념 이해가 우선입니다. 다음 글에서 Vite를 이용해 실제 React 개발환경을 만드는 과정을 자세히 다루겠습니다.

8. React를 공부할 때 중요한 순서

React를 처음 공부할 때는 무작정 프로젝트부터 만들기보다, 아래 순서대로 개념을 쌓는 것이 좋습니다.

React가 왜 필요한지 이해하기
Vite로 개발환경 만들기
JSX 문법 이해하기
컴포넌트 만들기
props로 값 전달하기
state로 화면 데이터 관리하기
이벤트 처리하기
map으로 목록 출력하기
useEffect로 외부 데이터 가져오기
React Router로 페이지 이동하기

이 흐름대로 공부하면 React 문법을 단순히 외우는 것이 아니라, 실제 화면이 어떻게 구성되고 동작하는지 자연스럽게 이해할 수 있습니다.

9. 정리

이번 글에서는 React가 무엇인지, 왜 웹 개발에서 많이 사용되는지 살펴보았습니다. React를 한 문장으로 정리하면 다음과 같습니다.

React는 화면을 컴포넌트 단위로 나누고, 데이터 변화에 따라 UI를 효율적으로 다시 그려주는 JavaScript 라이브러리입니다.

처음에는 JSX, 컴포넌트, props, state 같은 용어가 낯설 수 있습니다. 하지만 결국 React의 핵심은 복잡한 화면을 작은 조각으로 나누고, 데이터에 따라 화면을 자연스럽게 바꾸는 것입니다.

다음 글에서는 React 프로젝트를 직접 실행할 수 있도록 Vite를 이용한 React 개발환경 만들기를 정리해보겠습니다.

GWDEVELBlog 정리
React는 처음에는 문법이 낯설지만, 컴포넌트 단위로 화면을 나누는 방식에 익숙해지면 게시판, 리뷰 서비스, 관리자 페이지 같은 실제 웹 화면을 훨씬 체계적으로 만들 수 있습니다.

'Tech Stack > React' 카테고리의 다른 글

[React] 02. Vite로 React 개발환경 만들기 (0)	2026.05.21