리액트

UI를 만들기 위한 JavaScript 라이브러리입니다. Facebook(현 Meta)에서 만들었습니다.

핵심 개념

컴포넌트

UI를 재사용 가능한 조각으로 나눕니다.

function Button({ text }) {
    return <button>{text}</button>;
}

function App() {
    return (
        <div>
            <Button text="저장" />
            <Button text="취소" />
        </div>
    );
}

선언적 UI

"어떻게 바꿀지"가 아니라 "어떤 상태일 때 어떻게 보일지"를 선언합니다.

// React (선언적)
function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return isLoggedIn ? <Dashboard /> : <Login />;
}

// 바닐라 JS (명령적)
if (isLoggedIn) {
    document.getElementById("root").innerHTML = "<div>Dashboard</div>";
} else {
    document.getElementById("root").innerHTML = "<div>Login</div>";
}

Virtual DOM

상태가 바뀌면 전체 UI를 새로 그리는 대신, 바뀐 부분만 실제 DOM에 반영합니다.

State 변경 → Virtual DOM 비교 → 차이점만 실제 DOM에 반영

왜 쓰는가

비슷한 것들