컴포넌트의 다양한 시각적 state 확인하기 UI가 사용자에게 보여줄 경우의 수를 확인해 아래의 경우를 생각해 볼 수 있다.
- Empty: 폼은 비활성화된 “제출” 버튼을 가지고 있다.
- Typing: 폼은 활성화된 “제출” 버튼을 가지고 있다.
- Submitting: 폼은 완전히 비활성화되고 스피너가 보인다.
- Success: 폼 대신에 “감사합니다” 메시지가 보인다.
- Error: “Typing” state와 동일하지만 오류 메시지가 보인다.
무엇이 state 변화를 트리거하는지 알아내기 Input을 트리거 하는 방법은 사용자의 인터렉션에 의한 휴먼 인풋 그리고 네트워크 응답, 타임아웃에 의한 컴퓨터 인풋이 있다.
폼을 제출하는 경우 state의 변경은 아래 경우에서 발생할 수 있다.
- 휴먼 인풋: 텍스트 입력 시, 제출 버튼 클릭시
- 컴퓨터 인풋:네트워크 요청 성공 / 실패
메모리의 state를 useState로 표현하기 useState를 활용해 이전에 정의했던 내용을 state로 표현한다. state는 움직이는 조각이며 적게 정의 될 수록 좋다.
이전 단계에서 정의한 부분을 정리하면 아래와 같이 state가 정리된다. 가능하면 모든 경우를 정리하고 추후에 좁혀나가며 정리하는 식으로 진행한다
const [isEmpty, setIsEmpty] = useState(true);
const [isTyping, setIsTyping] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const [isError, setIsError] = useState(false);
불필요한 state 변수를 제거하기 아래 리스트를 보며 불필요한 state를 제거한다.
- state에 역설은 없는지 확인 isTyping과 isSubmitting이 동시에 ture인 역설적인 경우는 없다. → **'typing', 'submitting', 'success'**을 하나의 state로 합친다
- 다른 state에 담겨 있는 정보는 아닌지 확인 isEmpty와 isTyping은 동시에 true가 될 수 없고 값이 빈 경우와 타이핑 중인 경우는 문자열의 길이에 담겨있다. → answer.length === 0으로 타이핑 중인지 아닌지 체크
- 다른 변수의 역에서 정보를 구할 수 있는지 확인 isError는 error !== null로도 대신 확인할 수 있다
const [answer, setAnswer] = useState('');
const [error, setError] = useState(null);
const [status, setStatus] = useState('typing');
state 설정을 위해 이벤트 핸들러를 연결하기 state 설정을 위해 이벤트 핸들러를 연결한다