선언적 코드 (declarative code), 명령형 코드 (imperative code)

선언적 코드란?

선언적 코드(declarative code)는 "어떻게(how)"가 아니라 "무엇을(what)" 해야 하는지를 기술하는 코드를 의미한다. 즉, 과정을 상세히 지시하기보다는, 원하는 결과를 표현하는 방식.

---

명령형 코드(Imperative Code)와 비교

명령형 코드
개발자가 실행 과정을 상세히 지시해야 한다. 각 단계를 세밀히 설명하기 때문에 코드의 가독성이 떨어질 수 있다.

🖥️ javascript

const numbers = [1, 2, 3, 4];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}
console.log(doubled); // [2, 4, 6, 8]

선언적 코드
원하는 결과를 간결하게 표현하며, 세부적인 처리는 추상화되어 숨겨져 있다.

🖥️ javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

---

React와 선언적 코드

React는 대표적인 선언형 UI 라이브러리.
화면 상태에 따라 UI가 어떻게 보여야 하는지 결과만 정의하면 React가 이를 효율적으로 갱신한다.

명령형 방식 (Vanilla JS)
DOM을 직접 조작하여 UI를 업데이트.

🖥️ javascript

const root = document.getElementById('root');
const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', () => {
  const message = document.createElement('div');
  message.textContent = 'Button Clicked!';
  root.appendChild(message);
});
root.appendChild(button);

선언적 방식 (React)
상태에 따라 UI를 자동으로 갱신.

🖥️ jsx

function App() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <div>
      <button onClick={() => setClicked(true)}>Click me</button>
      {clicked && <div>Button Clicked!</div>}
    </div>
  );
}

React는 상태를 정의하면, 상태에 맞는 UI를 자동으로 렌더링하므로 선언적 프로그래밍의 특징을 가진다.