[REACT] 핵심특징 7가지

⚛️ React의 7가지 핵심 특징 정리

1️⃣ 컴포넌트 기반 구조 (Component-Based Architecture)

React는 UI를 작고 독립적인 컴포넌트(Component) 단위로 쪼개어 개발합니다.
각각의 컴포넌트는 자신의 상태(state)와 UI를 관리하며, 조합하여 복잡한 화면을 쉽게 구성할 수 있습니다.
이 방식은 재사용성, 유지보수성, 협업 효율성을 모두 높여줍니다.

 

function Header() {
  return <h1>안녕하세요!</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>컴포넌트 조합으로 화면 구성</p>
    </div>
  );
}

---

2️⃣ 가상 DOM (Virtual DOM)

React는 브라우저 DOM을 직접 조작하지 않고, 메모리에 가상의 DOM(Virtual DOM)을 만들어 변경 사항만 비교(diff)한 후
필요한 부분만 최소한으로 업데이트합니다.
이로 인해 불필요한 렌더링을 줄이고 성능이 대폭 향상됩니다.

 

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

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

---

3️⃣ 단방향 데이터 흐름 (One-Way Data Flow)

React는 부모 → 자식 방향으로만 데이터가 흐르는 단방향 데이터 플로우 구조를 가집니다.
데이터 흐름이 단순해 예측 가능성이 높고, 디버깅이 쉽습니다.

 

function Child({ text }) {
  return <p>{text}</p>;
}

function Parent() {
  return <Child text="단방향 데이터 흐름 예제" />;
}

---

4️⃣ 선언적 UI (Declarative UI)

React는 명령형 방식으로 DOM을 직접 조작하지 않고, “무엇을 보여줄지”를 선언합니다.
상태(state)가 변경되면 React가 알아서 UI를 다시 렌더링해주므로 코드가 간결하고 유지보수가 쉽습니다.

 

function App() {
  const [loggedIn, setLoggedIn] = React.useState(false);
  return <div>{loggedIn ? "로그인 성공!" : "로그인이 필요합니다"}</div>;
}

---

5️⃣ Hooks를 통한 상태 관리 (Hooks & State)

useState, useEffect 같은 Hooks를 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 제어가 가능합니다.
복잡한 상태는 Redux, Zustand, Recoil 등의 라이브러리와 연동하여 관리할 수 있습니다.

 

function Timer() {
  const [sec, setSec] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setSec(s => s + 1), 1000);
    return () => clearInterval(id); // cleanup
  }, []);

  return <div>{sec}초</div>;
}

---

6️⃣ 풍부한 생태계 & 커뮤니티 (Rich Ecosystem & Community)

React는 라우팅(react-router), 상태 관리, UI 라이브러리(Material UI, Chakra UI) 등 다양한 생태계를 갖추고 있으며
전 세계적으로 커뮤니티가 활발하여 문제 해결 속도가 빠르고 자료가 풍부합니다.

 

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav><Link to="/about">About</Link></nav>
      <Routes>
        <Route path="/about" element={<div>About Page</div>} />
      </Routes>
    </BrowserRouter>
  );
}

---

7️⃣ 다양한 플랫폼 지원 (Cross-Platform Support)

React는 웹(React DOM)뿐 아니라 모바일(React Native), 데스크톱(Electron), SSR(Next.js) 등
다양한 플랫폼에서 활용할 수 있습니다.

 

import { View, Text, Button } from "react-native";

export default function MobileApp() {
  return (
    <View>
      <Text>Hello React Native</Text>
      <Button title="확인" onPress={() => {}} />
    </View>
  );
}

---

📊 한눈에 보는 요약

특징설명장점

🧩 컴포넌트 기반	UI를 재사용 가능한 단위로 구성	유지보수성 ↑, 재사용성 ↑
⚡ Virtual DOM	변경 부분만 렌더링	성능 ↑
🔄 단방향 데이터 흐름	부모 → 자식 데이터 전달	예측 가능성 ↑
🧠 선언적 UI	상태 기반 자동 UI 업데이트	코드 간결성 ↑
🪝 Hooks	상태·생명주기 제어 및 확장성	재사용성 ↑
📦 생태계	라우팅·UI·상태관리 등 풍부	생산성 ↑
🌐 멀티 플랫폼	웹 / 모바일 / 데스크톱 지원	확장성 ↑