React는 2013년 Facebook(Meta)이 오픈소스로 공개한 UI 컴포넌트 라이브러리다. 가상 DOM(Virtual DOM)과 선언형 UI로 효율적인 웹 애플리케이션을 구축한다.
핵심 개념
컴포넌트와 JSX
jsx
// 함수형 컴포넌트
function Button({ label, onClick }) {
return (
<button
className="btn"
onClick={onClick}
>
{label}
</button>
);
}
// 사용
<Button label="Click me" onClick={() => alert('clicked!')} />
State와 Effect
jsx
import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // count 변경 시 실행
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
커스텀 훅
jsx
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(r => r.json())
.then(d => { setData(d); setLoading(false); });
}, [url]);
return { data, loading };
}
function UserList() {
const { data, loading } = useFetch('/api/users');
if (loading) return <p>Loading...</p>;
return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
Virtual DOM
상태 변경
↓
새 Virtual DOM 트리 생성
↓
이전 Virtual DOM과 비교 (Diffing)
↓
변경된 부분만 실제 DOM에 반영
관련 개념
참고문헌
