리액트란 무엇인가

🤔 리액트가 등장한 이유 — 문제부터 이해하기

리액트를 배우기 전에 왜 리액트가 만들어졌는지 이해하면 모든 개념이 훨씬 자연스럽게 연결됩니다. 2013년 페이스북이 리액트를 공개했을 당시, 웹 개발 세계는 큰 고통을 겪고 있었습니다.

문제의 본질은 이렇습니다. 복잡한 웹 앱에서 UI와 데이터를 동기화하는 것이 극도로 어려웠습니다. 예를 들어 페이스북의 메시지 알림을 생각해보세요. 상단 내비게이션의 알림 숫자, 사이드바의 메시지 목록, 대화 창 내부 — 이 세 곳이 동일한 데이터를 서로 다른 방식으로 보여줍니다. 새 메시지가 오면 세 곳을 동시에 올바르게 업데이트해야 합니다. jQuery로 이것을 구현하면 각 요소를 직접 선택해서 값을 바꾸는 명령 코드가 뒤엉키고, 버그가 끊이질 않습니다.

⚡ 선언형(Declarative) vs 명령형(Imperative)

리액트가 가져온 가장 중요한 패러다임 전환은 선언형 UI입니다. 이것이 무엇인지 구체적으로 비교해봅시다.

카운터 예시로 비교합니다. 버튼을 누르면 숫자가 올라가는 단순한 기능입니다.

명령형(바닐라 JS): "어떻게 할지"를 단계별로 지시합니다.

// DOM을 직접 선택하고, 값을 꺼내고, 계산하고, 다시 집어넣는다
let count = 0
document.getElementById('btn').addEventListener('click', () => {
  count++
  document.getElementById('display').textContent = String(count)
})

선언형(리액트): "어떤 상태일 때 UI가 어떻게 보여야 하는지"를 선언합니다.

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

리액트 코드는 "count가 몇이든 항상 그 값을 <p>에 보여준다"고 선언합니다. 상태가 바뀌면 리액트가 알아서 필요한 DOM 업데이트를 계산해 실행합니다. 개발자는 "이 버튼을 클릭했을 때 count를 바꿔라"만 지시하면 됩니다.

이 차이가 작아 보이지만, UI가 복잡해질수록 그 격차는 기하급수적으로 커집니다.

🧩 컴포넌트 — UI를 레고처럼 조립한다

리액트의 또 다른 핵심 개념은 컴포넌트(Component)입니다. 컴포넌트는 UI를 구성하는 독립적인 조각입니다. 레고 블록과 같습니다 — 각각 독립적으로 만들어지고, 조합해서 더 큰 구조를 만들 수 있습니다.

실제 서비스를 컴포넌트로 분해하면 이렇게 됩니다:

• <App /> (전체 앱)
  • <Header /> (상단 내비게이션)
    • <Logo />, <NavMenu />, <UserAvatar />
  • <Main />
    • <PostList /> → <PostCard /> × N
  • <Footer />

각 컴포넌트는 자신의 UI, 상태, 로직을 캡슐화합니다. PostCard를 수정해도 Header에 영향이 없습니다. 이것이 규모가 큰 앱에서 리액트가 빛나는 이유입니다.

🌐 SPA(Single Page Application)란

리액트로 만든 앱은 대부분 SPA(싱글 페이지 애플리케이션)입니다. 전통적인 웹은 페이지를 이동할 때마다 서버에서 새 HTML을 받아 전체 화면이 새로고침됩니다. SPA는 처음 한 번 HTML을 받고, 이후 페이지 이동은 자바스크립트가 처리해 필요한 부분만 업데이트합니다.

구분	전통적 웹	SPA (리액트)
페이지 이동	서버 요청 → 전체 새로고침	JS가 URL 변경 + 컴포넌트 교체
속도	이동마다 느림	초기 로딩 후 빠름
UX	깜빡임 있음	앱처럼 부드러움
SEO	기본 제공	추가 설정 필요 (Next.js 등)

🗺️ 이 시리즈의 학습 로드맵

앞으로 배울 내용을 미리 살펴봅시다. 리액트 학습은 크게 4단계로 나뉩니다:

1. 기초 (2~10강): 환경 설정 → JSX → 컴포넌트 → Props → State → 이벤트 → 조건/리스트 → 폼
2. 훅 심화 (11~18강): useEffect → 데이터 패칭 → 상태 끌어올리기 → 합성 → useRef → 커스텀 훅 → Context → useReducer
3. 실전 (19~28강): 미니 프로젝트 → 라우팅 → 스타일링 → 비동기 상태 → 성능 → 에러 처리 → 환경변수 → 배포
4. 통합 (29~30강): 날씨 앱 프로젝트 → 다음 학습 방향

각 단계는 앞 단계를 기반으로 합니다. 급하게 뒤로 건너뛰지 말고 순서대로 따라오세요 — 특히 Props와 State는 이후 모든 것의 기반입니다.

✅ 정리

• 리액트는 복잡한 UI와 데이터 동기화 문제를 해결하기 위해 만들어졌습니다.
• 선언형 UI: "무엇을 보여줄지"를 선언하면 리액트가 DOM 업데이트를 처리합니다.
• 컴포넌트: UI를 독립적인 조각으로 분리해 재사용하고 조합합니다.
• 리액트는 SPA 방식으로 페이지 전환 없이 빠르고 부드러운 UX를 제공합니다.
• 다음 강의에서 실제로 리액트 프로젝트를 생성하고 실행해봅니다.