⚛️ React의 7가지 핵심 특징 정리
1️⃣ 컴포넌트 기반 구조 (Component-Based Architecture)
React는 UI를 작고 독립적인 컴포넌트(Component) 단위로 쪼개어 개발합니다.
각각의 컴포넌트는 자신의 상태(state)와 UI를 관리하며, 조합하여 복잡한 화면을 쉽게 구성할 수 있습니다.
이 방식은 재사용성, 유지보수성, 협업 효율성을 모두 높여줍니다.
return <h1>안녕하세요!</h1>;
}
function App() {
return (
<div>
<Header />
<p>컴포넌트 조합으로 화면 구성</p>
</div>
);
}
2️⃣ 가상 DOM (Virtual DOM)
React는 브라우저 DOM을 직접 조작하지 않고, 메모리에 가상의 DOM(Virtual DOM)을 만들어 변경 사항만 비교(diff)한 후
필요한 부분만 최소한으로 업데이트합니다.
이로 인해 불필요한 렌더링을 줄이고 성능이 대폭 향상됩니다.
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는 부모 → 자식 방향으로만 데이터가 흐르는 단방향 데이터 플로우 구조를 가집니다.
데이터 흐름이 단순해 예측 가능성이 높고, 디버깅이 쉽습니다.
return <p>{text}</p>;
}
function Parent() {
return <Child text="단방향 데이터 흐름 예제" />;
}
4️⃣ 선언적 UI (Declarative UI)
React는 명령형 방식으로 DOM을 직접 조작하지 않고, “무엇을 보여줄지”를 선언합니다.
상태(state)가 변경되면 React가 알아서 UI를 다시 렌더링해주므로 코드가 간결하고 유지보수가 쉽습니다.
const [loggedIn, setLoggedIn] = React.useState(false);
return <div>{loggedIn ? "로그인 성공!" : "로그인이 필요합니다"}</div>;
}
5️⃣ Hooks를 통한 상태 관리 (Hooks & State)
useState, useEffect 같은 Hooks를 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 제어가 가능합니다.
복잡한 상태는 Redux, Zustand, Recoil 등의 라이브러리와 연동하여 관리할 수 있습니다.
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) 등 다양한 생태계를 갖추고 있으며
전 세계적으로 커뮤니티가 활발하여 문제 해결 속도가 빠르고 자료가 풍부합니다.
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) 등
다양한 플랫폼에서 활용할 수 있습니다.
export default function MobileApp() {
return (
<View>
<Text>Hello React Native</Text>
<Button title="확인" onPress={() => {}} />
</View>
);
}
📊 한눈에 보는 요약
🧩 컴포넌트 기반 | UI를 재사용 가능한 단위로 구성 | 유지보수성 ↑, 재사용성 ↑ |
⚡ Virtual DOM | 변경 부분만 렌더링 | 성능 ↑ |
🔄 단방향 데이터 흐름 | 부모 → 자식 데이터 전달 | 예측 가능성 ↑ |
🧠 선언적 UI | 상태 기반 자동 UI 업데이트 | 코드 간결성 ↑ |
🪝 Hooks | 상태·생명주기 제어 및 확장성 | 재사용성 ↑ |
📦 생태계 | 라우팅·UI·상태관리 등 풍부 | 생산성 ↑ |
🌐 멀티 플랫폼 | 웹 / 모바일 / 데스크톱 지원 | 확장성 ↑ |
'REACT' 카테고리의 다른 글
[REACT] 문자열함수(JAVASCRIPT) (0) | 2025.10.03 |
---|---|
[REACT] fatch, axios 사용법 (0) | 2025.09.28 |
[REACT] useEffect로 알아보기 (0) | 2025.09.28 |
[REACT] USESTATE 변수관리법 (0) | 2025.09.28 |