정의:
React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리로, 주로 사용자 인터페이스(UI)를 구축하는 데 사용됩니다.
공식 문서:
직접 조작:
전통적인 웹 개발에서는 DOM 요소를 직접 선택하고, 변경 사항마다 해당 요소를 수동으로 업데이트해야 합니다.
예시 (Vanilla JS):
<!-- index.html -->
<div id="counter">Count: 0</div>
<button id="increment">Increment</button>
<script>
const counterEl = document.getElementById("counter");
const incrementBtn = document.getElementById("increment");
let count = 0;
incrementBtn.addEventListener("click", () => {
count++;
counterEl.textContent = "Count: " + count;
});
</script>
코드 설명
문제:
여러 UI 요소와 복잡한 상호작용을 하나하나 처리하다 보면 코드가 길어지고, 상태와 DOM을 일치시키기 어려워집니다.
상태 변화 처리:
사용자가 입력하는 데이터를 기반으로 UI가 동적으로 바뀌어야 하는 경우, 각 요소의 상태를 수동으로 추적하고 업데이트하는 로직이 필요합니다.
예시 설명:
여러 입력 필드, 버튼, API 응답 등으로 상태가 복잡해질 경우, 모든 변경 사항을 추적하며 직접 DOM을 업데이트하는 것은 버그와 성능 문제를 야기합니다.
중복 코드 증가:
같은 UI 구성 요소(예: 버튼, 폼, 카드 등)를 여러 페이지에서 재사용하려면 매번 동일한 코드를 반복해야 합니다.
유지보수 어려움:
한 군데의 변경 사항이 필요한 경우 여러 파일을 모두 수정해야 하므로, 코드의 일관성 및 유지보수가 어려워집니다.