[TIL] 리액트 시작하기

지현·2026년 6월 16일

React란?

React는 Facebook(현 Meta) 이 2013년에 오픈소스로 공개한 UI 구축을 위한 JavaScript 라이브러리다.
지속적으로 데이터가 변화하는 대규모 애플리케이션을 효율적으로 구축하기 위해 만들어졌으며, 현재 가장 널리 사용되는 프론트엔드 기술 중 하나다.

프레임워크 vs 라이브러리

React를 제대로 이해하려면 먼저 이 둘의 차이를 알아야 한다.

프레임워크 (Framework)

뼈대, 골조
개발자가 정해진 규칙 안에서 코드를 작성해야 함
주도권이 프레임워크에 있음
ex) Angular, Next.js, Django, Spring

라이브러리 (Library)

도서관에서 책을 꺼내오듯 필요한 기능만 가져다 쓰는 방식
특정 기능을 수행하는 도구로서, 개발자가 원하는 시점에 직접 호출
주도권이 개발자에게 있음
ex) React, Lodash, Axios

✅ React는 라이브러리다.
라우팅(React Router), 상태관리(Redux, Zustand) 등은 React가 직접 제공하지 않고 별도 라이브러리를 조합해서 사용한다.
이것이 프레임워크인 Angular와의 가장 큰 차이점이다.

React의 핵심 개념

1. SPA (Single Page Application)

React는 SPA 방식으로 동작한다.

전통적인 웹(MPA)은 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아와 화면 전체를 새로 그린다.
반면 SPA는 하나의 HTML 파일 안에서 JavaScript가 필요한 부분만 동적으로 교체하기 때문에
페이지 깜빡임 없이 앱처럼 부드럽게 동작한다.

MPA vs SPA 비교

	MPA (전통 방식)	SPA (React 방식)
페이지 이동	서버에서 새 HTML 수신	JS가 화면만 교체
속도	첫 로딩 빠름, 이동마다 느림	첫 로딩 느림, 이동 후 빠름
사용자 경험	페이지 깜빡임 있음	앱처럼 부드러움
예시	일반 블로그, 뉴스 사이트	Gmail, 트위터, 유튜브

2. 컴포넌트 (Component)

React 애플리케이션은 컴포넌트 단위로 구성된다.
UI를 독립적이고 재사용 가능한 조각으로 나눠서 개발하는 것이 핵심이다.

좋은 컴포넌트의 조건

단독으로 기능을 수행할 수 있어야 한다.
재사용이 가능하면서 최소한 하나의 기능이 내장되어 있어야 한다.
화면만 보여주는 컴포넌트(Presentational Component)만 있을 수도 있지만, 데이터 처리나 이벤트 핸들링 없이 UI만 그리는 컴포넌트는 좋은 설계라고 보기 어렵다.

// 예시: 버튼 컴포넌트
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

3. Virtual DOM

일반적인 DOM 조작은 변경이 생길 때마다 브라우저가 전체 렌더링을 다시 수행해서 느리다.

React는 Virtual DOM(가상 DOM) 을 사용해 이 문제를 해결한다.

동작 방식
1. 상태(state)가 변경되면 새로운 Virtual DOM을 생성한다.
2. 이전 Virtual DOM과 새 Virtual DOM을 비교(Diffing) 한다.
3. 실제로 변경된 부분만 찾아 Real DOM에 최소한으로 반영한다.

이 과정을 재조정(Reconciliation) 이라고 한다.
덕분에 데이터가 빈번하게 바뀌는 대규모 앱에서도 빠른 성능을 유지할 수 있다.

4. 라이프사이클 (Life Cycle)

React 컴포넌트는 생성되고 → 업데이트되고 → 사라지는 생명주기를 가진다.

클래스형 컴포넌트 방식 (구 방식)

class MyComponent extends React.Component {
  componentDidMount() { /* 마운트 후 실행 */ }
  componentDidUpdate() { /* 업데이트 후 실행 */ }
  componentWillUnmount() { /* 언마운트 전 실행 */ }
  render() { return <div>Hello</div>; }
}

함수형 컴포넌트 방식 (현재 표준)

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 마운트 시 실행
    return () => {
      // 언마운트 시 실행 (클린업)
    };
  }, []); // 의존성 배열

  return <div>Hello</div>;
}

현재는 함수형 컴포넌트 + Hooks 방식이 표준이다.
클래스형은 레거시 코드에서 마주칠 수 있으므로 읽을 줄은 알아야 한다.

프로젝트 시작하기

방법 1: Create React App (CRA)

npx create-react-app my-app
cd my-app
npm start

설정 없이 바로 시작할 수 있어 입문자에게 적합하다.
다만 빌드 속도가 느리고 불필요한 설정이 많아 최근에는 잘 사용하지 않는 추세다.

방법 2: Vite (권장) ⭐

npm create vite@latest   # 최신 Vite 버전으로 프로젝트 생성

CRA보다 빌드 속도가 훨씬 빠르다.
가볍고 설정이 유연해서 현재 가장 많이 사용되는 방식이다.
실행 후 프레임워크(React), 언어(JS/TS) 등을 선택하면 된다.

터미널 창에 명령어 입력 (npm create vite@latest) > 프로젝트 이름 입력 > react 선택 > JavaScript 선택
npm run dev 입력 시 아래와 이미지와 같이 초기화면이 뜬다.

폴더 구조

Vite 기준으로 생성된 기본 폴더 구조는 다음과 같다.

my-app/
├── public/              # 정적 파일 (빌드 시 그대로 복사됨)
│   └── favicon.ico      # 거의 바뀌지 않는 이미지 (파비콘 등)
│
├── src/                 # 실제 개발이 이루어지는 폴더
│   ├── assets/          # 개발 중 변경될 수 있는 이미지, 폰트 등
│   ├── components/      # 재사용 가능한 컴포넌트 모음
│   ├── pages/           # 라우트별 페이지 컴포넌트
│   ├── App.jsx          # 루트 컴포넌트
│   └── main.jsx         # 진입점 (ReactDOM.render)
│
├── index.html           # 앱의 HTML 껍데기
├── vite.config.js       # Vite 설정 파일
└── package.json         # 프로젝트 정보 및 의존성 목록

public vs src/assets 차이

	`public/`	`src/assets/`
용도	거의 바뀌지 않는 정적 파일	개발 중 변경될 수 있는 리소스
예시	파비콘, robots.txt	배경 이미지, 아이콘, 폰트
처리 방식	빌드 시 그대로 복사	Vite가 최적화(압축, 해시) 처리
참조 방법	`/파일명` 으로 절대경로	`import` 구문으로 가져옴

정리

개념	핵심 요약
React	UI 구축을 위한 JavaScript 라이브러리
SPA	하나의 HTML에서 JS가 화면을 동적으로 교체, 앱처럼 부드러운 UX
컴포넌트	재사용 가능한 UI 단위, 최소 하나의 기능 내장
Virtual DOM	변경된 부분만 Real DOM에 반영해 성능 최적화
라이프사이클	마운트 → 업데이트 → 언마운트, 현재는 useEffect로 관리
프로젝트 시작	Vite 사용 권장 (`npm create vite@latest`)