🚩 선언적 UI란?
선언적 UI는 어떻게 화면을 업데이트해야 하는지를 구체적으로 명령(절차적, Imperative)하지 않고, 어떤 화면이 나타나야 하는지만 표현(선언적, Declarative)합니다.
즉, 개발자는 원하는 결과(UI의 최종 상태)만 선언하면, React가 내부적으로 DOM 조작과 상태변경을 자동으로 관리합니다.
- 선언적 방식(Declarative)
1<div>{count}</div>
count라는 상태가 있으면 화면에 표시해라
- 절차적 방식(Imperative)
1const div = document.createElement('div'); 2div.textContent = count; 3document.body.appendChild(div);
div 요소를 생성하고 count를 표시한 뒤 DOM에 삽입하라
💡 React에서의 선언적 UI 예시
1import { useState } from 'react'; 2 3function Counter() { 4 const [count, setCount] = useState(0); 5 6 return ( 7 <div> 8 <p>Count: {count}</p> 9 <button onClick={() => setCount(count + 1)}> 10 증가 11 </button> 12 </div> 13 ); 14}
위 코드의 의미는 다음과 같습니다.
- 선언적 접근
- 화면에 count 상태를 보여줘
- 버튼 클릭 시 상태를 1씩 증가시켜
개발자는 직접 DOM 요소를 선택하거나 변경하지 않습니다. React가 상태 변경 시 DOM을 최적화해서 자동으로 업데이트해줍니다.
🎖️ 선언적 UI의 장점
- 코드 간결성
- UI의 최종 결과만 명시적으로 작성하면 됩니다.
- 생산성 향상
- 상태 변화 시 UI 갱신 로직을 React가 처리해주므로 빠른 개발이 가능합니다.
- 상태 관리의 용이성
- 상태에 따라 자동으로 UI가 변화하므로 상태 관리가 명확합니다.
- 최적화와 성능 향상
- React가 UI 변경 사항을 효율적으로 처리하기 때문에 개발자가 직접 DOM을 관리하는 것보다 성능이 좋습니다.
- 유지보수의 용이성
- 선언적 접근 방식으로 코드의 흐름과 의도가 명확해집니다.
🔍 선언적 UI의 핵심 원리 (React)
React의 선언적 UI는 내부적으로 다음과 같은 과정을 통해 구현됩니다.
- 상태(State)가 변경되면
- React가 상태 변경을 감지하고
- Virtual DOM을 통해서 최적의 UI 변경점을 계산하여
- 실제 DOM에 반영합니다.
개발자는 그저 원하는 UI 상태만 명시적으로 표현하면 됩니다.
🚩 요약
React의 선언적 UI는 어떻게 보다는 무엇을에 집중하여, 원하는 상태를 명확히 표현하는 방식입니다. 개발자가 직접 DOM을 다룰 필요 없이, React가 상태 변경을 기반으로 자동으로 UI를 관리해주는 것이 핵심입니다.