React는 상태에 반응하는 컴포넌트 기반 UI 라이브러리다.
이때 UI가 상태 변화에 반응하여 갱신되는 최소 단위는 "컴포넌트"다.
React의 핵심 개념은 다음 다섯 가지로 정리할 수 있다.
1. 선언형 UI (Declarative UI)
기존 방식처럼 "어떻게 그릴지" 직접 명령하지 않고,
"현재 상태에 따라 어떤 UI를 보여줄지"를 선언하는 방식이다.
예시
{isLoggedIn ? <Welcome /> : <Login />}isLoggedIn상태에 따라 UI가 자동으로 바뀐다.
❗ DOM을 직접 수정할 필요 없이, 상태만 바꾸면 된다.
2. 컴포넌트 기반 (Component-Based)
UI를 작고 재사용 가능한 단위(컴포넌트)로 쪼개어 구성한다.
각 컴포넌트는 독립적으로 동작하며, 서로 조합해 더 큰 UI를 만들 수 있다.
예시
function Profile({ name }) {
return <h1>Hello, {name}!</h1>;
}Profile컴포넌트는 이름만 바꿔서 여러 번 재사용 가능하다.
❗ 유지보수와 협업이 쉬운 구조다.
3. 단방향 데이터 흐름 (One-Way Data Flow)
데이터는 항상 부모 → 자식 방향으로만 전달된다.
자식 컴포넌트는 받은 props만 사용하고, 직접 부모의 상태를 바꿀 수 없다.
❗ 데이터 흐름이 명확해 디버깅이 쉽고,
❗ 복잡한 양방향 바인딩이 없어 코드가 깔끔하다.
4. 상태 변화 → UI 자동 갱신 (Reactivity)
React의 이름처럼, 상태(state)가 바뀌면
그에 따라 UI가 자동으로 갱신된다.
이때 UI가 갱신되는 최소 단위는 바로 "컴포넌트"다.
컴포넌트가 자체 state를 가지거나, props가 바뀔 때마다 리렌더링된다.
예시
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>+</button>count가 바뀌면 컴포넌트가 자동으로 리렌더링된다.
5. Virtual DOM
React는 상태가 바뀌었다고 해서 바로 실제 DOM을 바꾸지 않는다.
대신 가상의 DOM(Virtual DOM)을 먼저 만든 뒤,
변화된 부분만 실제 DOM에 최소한으로 반영한다.
❗ 성능을 높이기 위한 핵심 기술
❗ 불필요한 렌더링을 줄여 효율을 높인다
React는 프레임워크가 아닌 라이브러리다
React는 UI(View)만 담당하는 라이브러리다.
라우팅, 상태관리, 데이터 fetching 등은 다른 도구들과 조합해서 사용한다.
❗ 예: React + React Router + Zustand + TanStack Query
