사전 진단 퀴즈 5단계 (선언적 UI와 상태)

---

<strong>정답</strong>: 개발자가 화면을 '어떻게(How)' 그릴지 단계별로 지시하는

대신, 데이터에 따라 화면이 '무엇(What)'을 보여줄지만 선언하도록 방식이 바뀌었습니다.

<strong>풀이 과정</strong>: 바닐라 자바스크립트는 요소를 찾고, 생성하고,

속성을 부여하고, 화면에 부착하는 모든 과정을 개발자가 직접 제어해야 합니다. 반면 리액트의 선언적 방식에서는 화면의 최종 결과물(JSX)만 정의해 두면, 데이터가 변했을 때 리액트 엔진이 알아서 기존 화면과 새로운 화면을 비교하여 변경된 부분만 실제 DOM에 업데이트해 줍니다.

---

<strong>정답</strong>: 일반 변수의 값을 변경하면 내부 데이터만 바뀔 뿐 화면은

업데이트되지 않습니다. 반면 useState의 설정 함수(setter)를 통해 값을 변경하면 리액트가 상태 변화를 감지하고 해당 컴포넌트를 다시 렌더링하여 화면에 변경된 숫자를 반영합니다.

<strong>풀이 과정</strong>: 리액트 컴포넌트는 기본적으로 자신의 상태(State)나

부모로부터 받은 데이터(Props)가 변경될 때만 새로고침(리렌더링)을 수행합니다. 일반 let 변수는 값이 바뀌어도 리액트 엔진에게 화면을 다시 그리라는 신호를 보내지 못합니다.

---

<strong>정답</strong>: 부모 컴포넌트에서 총액 상태를 변경할 수 있는 '상태 변경

함수(State Updater)'를 만든 뒤, 그 함수 자체를 자식에게 Props로 넘겨주어 자식이 실행하도록 만들어야 합니다.

<strong>풀이 과정</strong>: 리액트는 데이터가 무조건 위에서 아래로(부모에서

자식으로)만 흐릅니다. 자식이 부모의 데이터를 직접 바꿀 수 있는 권한은 없습니다. 따라서 부모가 리모컨(상태 변경 함수)을 자식에게 빌려주고, 자식은 필요할 때 그 리모컨의 버튼을 눌러 부모의 데이터를 간접적으로 수정하는 방식을 취해야 합니다.

---

<strong>정답</strong>: 아무것도 적지 않으면 컴포넌트가 렌더링될 때마다 매번

실행되고, 빈 배열을 넣으면 컴포넌트가 화면에 처음 나타날 때(Mount) 딱 한 번만 실행됩니다.

<strong>풀이 과정</strong>: useEffect는 리액트의 렌더링 과정과 무관하게 외부

시스템(API 호출, 타이머 등)과 동기화하기 위한 '부수 효과'를 처리합니다. 두 번째 인자인 배열은 "이 배열 안의 값이 바뀔 때만 다시 실행해"라는 조건을 의미합니다. 따라서 빈 배열을 주면 관찰할 값이 없으므로 처음 렌더링 후에만 실행되고 다시는 실행되지 않습니다.

---

React 공식 문서: React로 사고하기

React 공식 문서: State: A Component's Memory

React 공식 문서: Synchronizing with Effects