[웹개발 기초] React란 무엇인가? — 컴포넌트부터 상태관리까지, 초보자도 이해되게 정리해봤습니다

안녕하세요!

오늘은 웹 개발 공부하다 보면 정말 빠르게 마주치는 이름, React에 대해 정리해보려고 합니다.

솔직히 처음엔 "React, React" 하길래 그냥 유명한 거겠지 하고 넘어갔어요. 

근데 막상 바이브코딩으로 뭔가 만들려고 하면 AI가 거의 항상 React를 꺼내들더라고요. 

"이게 뭔지도 모르는데 쓰고 있다"는 느낌, 저도 한동안 있었어요.

이 글에서는 React가 왜 생겼는지, 핵심 개념이 뭔지, 그리고 실제로 어디에 쓰이는지까지 한 번에 정리 해놓으려고 합니다.

[웹개발 기초] React란 무엇인가?
컴포넌트부터 상태관리까지, 초보자도 이해되게 정리해봤습니다

1. React가 뭔지, 진짜 쉽게 설명하면

React는 Facebook(현 Meta)이 만든 JavaScript 기반 UI 라이브러리예요.

공식 설명은 "사용자 인터페이스를 만들기 위한 라이브러리"인데, 

이걸 더 쉽게 풀면

"화면을 조각조각 나눠서 만들고, 데이터가 바뀌면 자동으로 화면도 바꿔주는 도구"

 

비유를 하나 들어볼게요.

레고 블록으로 집을 짓는다고 생각해보세요.

지붕 블록, 벽 블록, 창문 블록을 따로따로 만들어두고, 조립해서 집을 완성하는 방식이에요. 

나중에 창문 색을 바꾸고 싶으면? 창문 블록만 교체하면 됩니다. 

집 전체를 다시 지을 필요 없어요.

React가 딱 이 구조예요. 

화면을 블록(컴포넌트) 단위로 만들고, 그걸 조립해서 페이지를 완성합니다. 

데이터가 바뀌면 그 블록만 자동으로 업데이트돼요.

2. React가 왜 만들어졌냐면

React가 나오기 전, 웹 화면을 바꾸는 방법은 이랬어요.

데이터가 바뀔 때마다 JavaScript가 직접 HTML을 찾아가서 바꾸는 방식이었어요.

// 예전 방식 — 직접 DOM을 찾아서 수정

document.getElementById('username').innerText = '홍길동'

document.getElementById('score').innerText = '100점'

document.getElementById('level').innerText = 'Lv.5'

기능이 단순할 땐 괜찮은데, 

화면이 복잡해지고 바꿔야 할 요소가 많아지면 코드가 엄청나게 뒤엉켜요. 

어디서 뭘 바꿨는지 추적도 힘들고, 버그도 많이 생기고요.

Facebook이 이 문제를 해결하려고 만든 게 React예요.

"데이터만 바꾸면 화면은 React가 알아서 업데이트해줄게"

 

이 발상 하나가 웹 개발 방식을 완전히 바꿔놨어요.

3. 핵심 개념 1 — 컴포넌트 (Component)

React에서 제일 중요한 개념이 컴포넌트예요.

컴포넌트는 쉽게 말해 화면을 구성하는 재사용 가능한 조각이에요.

실제 웹페이지를 예로 들면

[헤더 컴포넌트]

[사이드바 컴포넌트]

[카드 컴포넌트] [카드 컴포넌트] [카드 컴포넌트]

[푸터 컴포넌트]

각 영역이 하나의 컴포넌트예요. 

그리고 이 컴포넌트들을 조립해서 전체 페이지를 만드는 거예요.

코드로 보면 이렇게 생겼어요.

// 버튼 컴포넌트

function MyButton() {

  return <button>클릭하세요</button>

}


// 페이지에서 조립해서 사용

function App() {

  return (

    <div>

      <h1>안녕하세요!</h1>

      <MyButton />

      <MyButton />

    </div>

  )

}




<MyButton />을 여러 번 써도 똑같은 버튼이 여러 개 나와요. 한 번 만들어두면 어디서든 재사용할 수 있는 게 컴포넌트의 핵심이에요.

4. 핵심 개념 2 — JSX

위 코드에서 JavaScript 안에 <button>, <div> 같은 HTML이 섞여 있는 게 보이죠?

이게 JSX(JavaScript XML) 라고 해요.

JavaScript 코드 안에 HTML처럼 생긴 문법을 쓸 수 있게 해주는 React만의 문법이에요.

// JSX — JavaScript 안에 HTML처럼 쓰기

function Hello() {

  const name = '티아'

  return <h1>안녕하세요, {name}님!</h1>

}




{} 중괄호 안에 JavaScript 변수나 표현식을 넣을 수 있어요.

처음엔 좀 낯설게 느껴지는데, 쓰다 보면 오히려 화면이랑 로직을 같이 볼 수 있어서 편해져요.

5. 핵심 개념 3 — State (상태)

React에서 두 번째로 중요한 개념이 **State(상태)**예요.

State는 쉽게 말해 **"화면에 영향을 주는 데이터"**예요.

예를 들어 좋아요 버튼이 있다고 해봐요. 

클릭하면 숫자가 올라가고, 버튼 색도 바뀌잖아요. 

이때 "몇 번 눌렸는지", "눌린 상태인지 아닌지" 같은 정보가 State예요.

import { useState } from 'react'


function LikeButton() {

  const [count, setCount] = useState(0)  // 초기값 0


  return (

    <button onClick={() => setCount(count + 1)}>

      ❤️ {count}

    </button>

  )

}




useState를 쓰면 count가 바뀔 때마다 React가 자동으로 화면을 다시 그려줘요. 

내가 직접 "이 숫자 찾아서 바꿔줘" 할 필요 없이요.

이게 React가 편한 이유 중 하나예요. 

데이터(State)만 관리하면 화면은 React가 알아서 해줘요.

6. 핵심 개념 4 — Props (프롭스)

컴포넌트끼리 데이터를 주고받을 때 쓰는 게 Props예요.

부모 컴포넌트가 자식 컴포넌트한테 데이터를 전달하는 방식이에요.

// 자식 컴포넌트 — props로 데이터 받기

function WelcomeCard({ name, score }) {

  return (

    <div>

      <h2>{name}님 환영합니다!</h2>

      <p>현재 점수: {score}점</p>

    </div>

  )

}

// 부모 컴포넌트 — props로 데이터 보내기

function App() {

  return (

    <div>

      <WelcomeCard name="티아" score={100} />

      <WelcomeCard name="홍길동" score={50} />

    </div>

  )

}

같은 컴포넌트인데 넘겨주는 데이터에 따라 다르게 표시돼요.

레고 블록 색깔을 바꾸는 것처럼, 틀은 같은데 내용만 달라지는 거예요.

7. Virtual DOM — React가 빠른 이유

React 얘기 나오면 꼭 나오는 개념이 Virtual DOM이에요.

DOM은 브라우저가 화면을 그리는 구조예요. 기존 방식은 데이터가 바뀔 때마다 이 DOM 전체를 다시 건드려서 느렸어요.

React는 다르게 접근해요.

1. 실제 DOM 말고 가상의 DOM(Virtual DOM) 을 메모리에 따로 만들어둬요
2. 데이터가 바뀌면 가상 DOM에서 먼저 비교해요
3. 실제로 바뀐 부분만 실제 DOM에 업데이트해요

집 전체를 리모델링하는 게 아니라, 바뀐 방 하나만 수리하는 거예요. 그래서 화면이 많이 바뀌는 복잡한 앱에서도 빠르게 동작할 수 있어요.

8. React로 뭘 만들 수 있냐면

React가 실제로 어디에 쓰이는지 보면 감이 잡혀요.

단일 페이지 앱 (SPA) 

페이지 이동할 때 새로고침 없이 화면만 바뀌는 앱이에요. 

Gmail, 트위터 피드 같은 게 이 방식으로 만들어져 있어요.

포트폴리오 사이트 

개인 포트폴리오를 React로 만드는 경우가 많아요. 

컴포넌트 단위로 섹션을 나눠서 깔끔하게 관리할 수 있거든요.

대시보드 / 관리자 페이지 

데이터가 실시간으로 바뀌는 대시보드에 React가 특히 강해요. 

숫자가 바뀌면 화면이 자동으로 업데이트되는 구조가 딱 맞아요.

Next.js의 기반 

이전 글에서 다뤘던 Next.js가 React 기반으로 만들어진 프레임워크예요. 

React를 알면 Next.js 이해도 훨씬 빨라요.

실제로 Netflix, Instagram, Airbnb, 카카오 같은 서비스들도 React를 쓰고 있어요.

9. React, 처음 배울 때 이렇게 접근하세요

React가 처음이라면 한 번에 다 이해하려고 하지 않아도 돼요. 순서대로 접근하면 훨씬 덜 막혀요.

① JavaScript 기초 먼저 

React는 JavaScript 위에서 동작해요. 

변수, 함수, 배열 정도는 알고 시작하는 게 좋아요.

② 컴포넌트부터 익숙해지기 

화면을 쪼개서 컴포넌트로 만드는 사고방식이 제일 중요해요. 

작은 버튼 하나, 카드 하나부터 만들어보세요.

③ State 개념 잡기 

useState로 데이터가 바뀔 때 화면이 자동으로 바뀌는 걸 직접 만들어보면 감이 확 잡혀요.

④ 바이브코딩으로 만들어보기 

개념이 60% 정도 잡히면 Cursor로 "React로 간단한 투두리스트 만들어줘" 해보세요. 

AI가 만들어준 코드를 읽으면서 이해하는 게 제일 빨라요.

React, 겁낼 필요 없어요

처음엔 컴포넌트, JSX, State, Props... 용어가 한꺼번에 쏟아지니까 막막하게 느껴질 수 있어요.

근데 결국 React의 핵심은 딱 하나예요.

"화면을 블록으로 나누고, 데이터가 바뀌면 자동으로 화면이 따라 바뀐다"

이 감각 하나만 잡으면 나머지는 쓰면서 자연스럽게 익혀져요.

오늘 정리한 내용만 기억해도 됩니다.

• React = Facebook이 만든 UI 라이브러리, 화면을 컴포넌트 단위로 만듦
• 컴포넌트 = 재사용 가능한 화면 조각
• JSX = JavaScript 안에 HTML처럼 쓸 수 있는 문법
• State = 화면에 영향을 주는 데이터, 바뀌면 화면 자동 업데이트
• Props = 컴포넌트끼리 데이터를 주고받는 방법
• Virtual DOM = 바뀐 부분만 업데이트해서 빠른 이유

열공하세요! 🙌