따라서 명령형 방식은 변수 값 변경과 DOM 업데이트를 모두 직접 처리해야 합니다.

const increment = () => {
  count += 1;  ----- ➊
  document.getElementById('countDisplay').innerText = `Count: ${count}`; ----- ➋
};

반면, 리액트는 선언적 프로그래밍(declarative programming) 방식을 따릅니다. 이는 UI를 만들 때 ‘무엇을 보여줄지(what)’를 선언하는 방식입니다. 선언형 방식에서는 화면에 출력하는 숫자를 1씩 증가시키고 싶다면 단순하게 숫자만 1을 증가시키면 됩니다. 즉, 숫자 값을 바꾸는 상태(state)만 변경하면 됩니다. 증가한 숫자를 화면에 반영하는 것은 리액트가 내부적으로 알아서 처리합니다. UI를 직접 조작할 필요 없이 상태만 관리하면 되기 때문에 코드는 더 간결하고 직관적입니다.