판주야 Redux는…#1
프론트엔드
판주야 Redux는…#1
두줄요약
정적 HTML을 JavaScript로 동적으로 바꾸는 방식과 React의 상태 관리를 비교했습니다. React가 상태 기반 UI 코드의 가독성을 높이는 이유를 소개합니다.
구조와 흐름
- 정적 HTML 페이지를 JavaScript로 동적으로 변경하는 기본 예시
- DOM 선택과
innerHTML변경을 통한 화면 콘텐츠 갱신 - React
useState와 setter를 통한 상태값 기반 화면 갱신
선택 이유
- 복잡한 웹 앱의 사용자 상호작용과 다수 HTML 요소 변경 요구
- DOM 직접 조작 대신 화면에 집중 가능한 선언적 코드 구성
- 화면 요소와 상태 변경 코드의 직관성·가독성 향상
주의할 점
- 단순 예제에서는 React 초기 선언과 생략된 준비 코드로 인한 복잡성
- React가 전체 JavaScript 코드량을 항상 줄여주는 방식은 아니라는 관점
적용해볼 점
- 여러 화면 요소의 변경 로직을 DOM 탐색 대신 상태와 setter로 표현
- 상태 기반 UI 갱신 방식 이해 후 Redux 주제로 확장
