[React] React 기초 개념

artp·2025년 9월 24일

React

react

목록 보기

7/44

React 기초 개념

1. 컴포넌트(Component) 기반 아키텍처

React의 가장 큰 특징은 컴포넌트(Component)를 기반으로 UI를 구축한다는 점입니다. 컴포넌트는 화면을 구성하는 독립적이고 재사용 가능한 최소 단위 요소입니다.

장점:
- 유지보수 및 확장성: UI를 레고 블록처럼 작은 단위로 쪼개어 관리하므로, 특정 부분의 코드를 수정하거나 새로운 기능을 추가하기 용이합니다.
- 재사용성: 버튼, 입력창, 카드 등 공통 UI 요소를 컴포넌트로 만들어두면, 여러 페이지나 프로젝트에서 반복적으로 사용할 수 있어 개발 효율이 높아집니다.
- 가독성: 각 컴포넌트가 독립적인 기능을 수행하므로 코드의 전체적인 구조를 파악하기 쉽습니다.

예시: 페이지를 컴포넌트로 분리하기

웹 페이지를 Header, Main, Footer 세 가지 컴포넌트로 나누어 조립하는 예시입니다.

Header.js

// /components/Header.js

function Header() {
  return (
    <header style={{ borderBottom: '1px solid #ccc', padding: '10px' }}>
      <h1>React 핵심 개념 예제</h1>
      <nav>
        <a href="/" style={{ marginRight: '10px' }}>홈</a>
        <a href="/about">소개</a>
      </nav>
    </header>
  );
}

export default Header;

Main.js

// /components/Main.js

function Main() {
  return (
    <main style={{ padding: '20px 0' }}>
      <h2>메인 콘텐츠 영역</h2>
      <p>이곳에 페이지의 주요 내용이 표시됩니다.</p>
    </main>
  );
}

export default Main;

Footer.js

// /components/Footer.js

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid #ccc', padding: '10px', textAlign: 'center' }}>
      <p>© 2025 My React App. All rights reserved.</p>
    </footer>
  );
}

export default Footer;

App.js (컴포넌트 조립)

// /App.js
import Header from "./components/Header";
import Main from "./components/Main";
import Footer from "./components/Footer";

function App() {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App;

2. 선언형 프로그래밍과 상태(State)를 통한 쉬운 화면 업데이트

React는 상태(State)와 선언형(Declarative) 프로그래밍 방식을 통해 동적인 화면 업데이트를 매우 쉽게 구현할 수 있습니다.

선언형 프로그래밍: 개발자는 "어떻게" UI를 업데이트할지 절차를 일일이 작성하는 대신, "무엇을" 보여줄지(목적)만 선언하면 됩니다. React는 상태가 변경될 때마다 이 선언에 맞춰 화면을 자동으로 갱신합니다.
상태(State): 컴포넌트가 가지는 동적인 데이터입니다. 사용자의 입력이나 API 응답 등 변화하는 값을 상태로 관리하면, React가 상태 변경을 감지하여 UI를 리렌더링(re-rendering)합니다.

이는 DOM 요소를 직접 선택하고 수정하는 명령형(Imperative) 프로그래밍 방식과 대조됩니다.

예시: 버튼 클릭 시 카운트 증가

useState Hook을 사용하여 상태(count)를 만들고, 버튼 클릭 시 이 상태를 변경하여 화면을 업데이트하는 예시입니다.

import { useState } from "react";

function Counter() {
  // useState Hook: [상태 값, 상태를 변경하는 함수]
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h3>카운터 예제</h3>
      <p>현재 카운트: <strong>{count}</strong></p>
      <button onClick={handleIncrement}>+1 증가</button>
      <button onClick={handleDecrement} style={{ marginLeft: '5px' }}>-1 감소</button>
    </div>
  );
}

export default Counter;

useState(0): count라는 상태를 0으로 초기화합니다.
setCount(count + 1): setCount 함수가 호출되면 count 상태가 변경됩니다.
React는 count 상태 변화를 감지하고, Counter 컴포넌트를 다시 렌더링하여 화면의 숫자를 자동으로 업데이트합니다. DOM을 직접 조작하는 코드는 전혀 없습니다.

3. 가상 DOM(Virtual DOM)을 통한 빠른 렌더링

React는 가상 DOM(Virtual DOM)을 사용하여 화면 업데이트 성능을 최적화합니다.

전통적인 DOM 조작의 문제점: 실제 DOM(Document Object Model)은 웹 페이지의 구조를 나타내는 객체 모델입니다. DOM을 직접 변경하는 작업은 브라우저의 렌더링 엔진을 다시 동작시켜야 하므로 비용이 크고, 잦은 변경은 성능 저하의 원인이 됩니다.
React의 해결 방식:
1. 변경 감지: state나 props가 변경되면, React는 전체 UI를 메모리 상에 존재하는 가상 DOM에 먼저 렌더링합니다.
2. 비교 (Diffing): 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 찾아냅니다. 이 과정을 "Diffing 알고리즘"이라고 합니다.
3. 최소한의 업데이트 (Reconciliation): React는 'Diffing'을 통해 발견된 변경된 부분만 실제 DOM에 한 번에 적용합니다. 이를 통해 불필요한 DOM 조작을 최소화하고 빠른 렌더링 성능을 보장합니다.

가상 DOM의 동작 흐름

상태 변경: 사용자가 버튼을 클릭하여 setCount()가 호출됩니다.
가상 DOM 생성: React는 변경된 count 값이 적용된 새로운 가상 DOM 트리를 생성합니다.
Diffing: 이전 가상 DOM과 새로운 가상 DOM을 비교하여 <p> 태그 안의 텍스트 노드만 변경된 것을 감지합니다.
실제 DOM 업데이트: React는 다른 부분은 그대로 두고, 실제 DOM에서 변경이 필요한 <p> 태그의 내용만 정확히 수정합니다.

정리

특징	설명	장점
컴포넌트 기반	UI를 독립적이고 재사용 가능한 조각으로 나눔	유지보수 용이, 코드 재사용성 극대화
선언형 프로그래밍	"무엇을" 그릴지 선언하면 상태에 따라 자동 갱신	직관적이고 예측 가능한 UI 로직 작성
가상 DOM	변경 사항만 실제 DOM에 반영하여 성능 최적화	대규모 애플리케이션에서도 빠른 렌더링 속도 보장