state로 입력에 반응하기
선언형과 명령형의 차이
- 선언형
- 원하는 결과를 명시하고 컴퓨터가 그 결과를 얻기 위해 어떻게 수행할지 결정하는 방식
- 무엇을 원하는지를 설명하지 구체적인 지시사항은 제공하지 않음
- 명령형
- 하나부터 열까지 어떤 행동을 취해야 하는지를 지시하는 방식
UI를 선언형으로 생각하기
- 컴포넌트의 다양한 시각적 상태를 식별한다.
- 상태 변화를 촉발하는 요소를 파악한다.
- 사람 아니면 컴퓨터의 입력으로 촉발한다
- 시각화하면 더 좋다
useState를 사용하여 메모리의 상태를 표현한다.
- 중복이 있어도 되니 되도록 모든 상태를 표현한다
- 비필수적인 state 변수를 제거한다.
- 앞서 표현한 상태들 중 중복되거나 의미없는 state는 제거한다
- 이벤트 핸들러를 연결하여 state를 설정한다.
- 살아남은 state를 변경시키는 이벤트 핸들러에 state 변화 로직을 작성한다.
-
한번에 여러 시각적 상태 표시하기
-
reducer로 불가능한 state 제거하기
요약
- 선언형 프로그래밍은 UI를 세밀하게 관리(명령형)하지 않고 각 시각적 상태에 대해 UI를 기술하는 것을 의미
- 컴포넌트를 개발할 때
- 모든 시각적 상태를 식별
- 사람 및 컴퓨터가 상태 변화를 촉발하는 요인을 결정
useState로 상태를 모델링
- 버그와 모순을 피하려면 비필수적인 state를 제거
- 이벤트 핸들러를 연결하여 state를 설정