리액트 공식문서 정리 : state로 입력에 반응하기

리액트에서는 코드에서 ui를 직접 수정하는 대신에 다양한 state 별로 표시하려는 ui를 구현한 다음, 입력에 대한 응답으로 state 변경을 촉발한다.

리액트는 ui를 개별적으로 직접 조작하는 대신 컴포넌트가 있을 수 있는 다양한 상태를 기술하고, 사용자 입력에 반응하여 각 상태들 사이를 전환함.

선언형 ui와 명령형 ui의 차이점

명령형 프로그래밍 : 인터랙션을 직접적으로 구현하는 방법이다

이렇게 직접 ui를 조작하면 복잡한 시스템에서 관리하기가 기하급수적으로 어려워짐.

리액트는 직접 ui를 조작하지 않음. 컴포넌트를 직접 활성화하거나 비활성화 하지도 보여주거나 숨기지도 않음.

대신 표시할 내용을 선언하면 리액트가 ui를 업데이트할 방법을 알아낸다.

리액트로 UI구현하는 과정

1. 컴포넌트의 다양한 시각적 상태를 식별합니다.
2. 상태 변화를 촉발하는 요소를 파악합니다.
3. useState를 사용하여 메모리의 상태를 표현합니다.
4. 비필수적인 state 변수를 제거합니다.
5. 이벤트 핸들러를 연결하여 state를 설정합니다.

1. 컴포넌트의 다양한 상태 식별, 먼저 다양한 상태의 목업을 만든다.

• 비어있음: form의 “Submit”버튼은 비활성화되어 있습니다.
• 입력중: form의 “Submit”버튼이 활성화되어 있습니다.
• 제출중: form은 완전히 비활성화되어있고 Spinner가 표시됩니다.
• 성공시: form 대신 “Thank you”메세지가 표시됩니다.
• 실패시: ‘입력중’ 상태와 동일하지만 추가로 오류 메세지가 표시됩니다.

로직을 추가하기 전에 다양한 상태에 대한 목업을 만들고

목업에서 prop으로 제어해본다. prop의 이름은 원하는 것으로 정해도 되고 중요하지 않음.

목업을 사용하면 로직을 연결하기 전에 ui를 빠르게 반복해볼 수 있다.

2. 상태변경을 촉발하는 요인 파악

두종류의 입력에 대한 응답으로 상태 변경이 촉발 될 수 있음.

• 사람의 입력: 버튼 클릭, 필드 입력, 링크 이동
• 컴퓨터의 입력: 네트워크 응답 도착, 시간 초과, 이미지 로딩

두 경우 모두 state변수를 설정해야 UI 업데이트 가능.

• text 입력을 변경(사람) → text box 공백 여부 여부에 따라, state전환
• 제출 버튼을 클릭(사람)하면  → 제출중 state로 전환
• 네트워크 응답 성공(컴퓨터)시 → 성공 state로 전환
• 네트워크 요청 실패(컴퓨터)시 → 일치하는 오류 메세지와 함께 오류 state로 전환

이 흐름을 종이에 그려서 시각화해보면 도움이 된다.

3. 메모리 상태를 useState로 표현

컴포넌트의 시각적 상태를 useState로 표현한다.

이 과정은 단순함이 핵심. 가능한 적은 수의 ‘움직이는 조각’을 만든다.

복잡할수록 버그가 많이 발생함.

const [answer, setAnswer] = useState('');
const [error, setError] = useState(null);

가능한 모든 시각적 상태를 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);

4. 비필수적인 state 변수 제거하기

목표는 state가 사용자에게 보여주기를 원하는 유효한 UI를 나타내지 않는 것을 방지하는 것.

• state가 모순을 만드는가?
  → isTyping 과 isSubmitting은 동시에 true일 수 없다. 그렇다면 굳이 2개의 state가 필요 없다.
• 다른 state 변수에 이미 같은 정보가 있나?
  →isEmpty와 isTyping은 동시에 true가 될 수 없다.
• 다른 state 변수를 뒤집으면 동일한 정보를 얻을 수 있나?
  → isError는 error !== null을 대신 확인할 수 있기 때문에 필요하지 않음.

이렇게 정리하고 나면 3개(7개가 줄어든!)의 필수 state 변수만 남는다.

const [answer, setAnswer] = useState('');
const [error, setError] = useState(null);
const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 'success'

5. 이벤트 핸들러를 연결하여 state 설정

마지막으로 state 변수를 설정하는 이벤트 핸들러를 생성함.