[React 공식문서 스터디] Managing State_ #1. Reacting to Input with Sate #2. Choosing the State Structure

#1. Reacting to Input with Sate

: state 구조 선택

 

 

 

- 선언형 UI 프로그래밍과 명령형 UI 프로그래밍의 차이점
- 컴포넌트가 있을 수 있는 다양한 시각적 state를 열거하는 방법
- 코드에서 다른 시각적 state 간의 변경을 촉발하는 방법

 

 

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

- 폼 에 입력 → "submit" 버튼 활성화

- "submit" 버튼 누르면 → 폼과 버튼이 비활성화, spinner 나타남

- 네트워크 요청 성공 → 폼 사라지고, "Thank you" 메시지 나타남

- 네트워크 요청 실패 → 오류 메시지 나타남, 폼 다시 활성화

 

명령형 프로그래밍에서 위의 내용은 인터렉션을 구현하는 방법에 직접적으로 해당

각 요소에 "명령" 을 내려 컴퓨터에 어떻게 UI 를 업데이트

 

 

선언형 프로그래밍은 UI를 세밀하게 관리(명령형)하지 않고 각 시각적 상태에 대해 UI를 기술하는 것을 의미

 

명령형 UI 프로그래밍 예시:브라우저 DOM 사용

- 새로운 UI 요소나 새로운 인터렉션을 추가하려면 기존의 모든 코드를 주의깊게 살펴야함

- 버그 발생 여부 확인

 

 

 

 

 

해결 ✔︎ 리액트

- 직접 UI 조작 x

- 표시한 내용 서넝ㄴ하면 리액트가 알아서 해줌

 

 

 

UI를 선언적인 방식으로 생각하기 

위의 예제 리액트로

1️⃣ 컴포넌트의 다양한 시각적 상태를 식별한다

UI를 선언적인 방식으로 생각하기 

• Empty: Form 의  “Submit” button은 비활성화되어 있다.
• Typing: Form 의 “Submit” button이 활성화되어 있다.
• Submitting: Form 은 완전히 비활성화, Spinner 가 표시된다.
• Success: form 대신 “Thank you” message 가 표시된다. 
• Error: '입력중' 상태와 동일하지만 추가로 오류 메시직 표시된다.

 

2️⃣상태 변화를 촉발하는 요소를 파악한다

• Human inputs, 버튼 클릭, 필드 입력, 링크 이동 등
• Computer inputs, 네트워크에서 응답 도착, 시간 초과, 이미지 로딩 등
• => State 변수를 설정해야 UI를 업데이트 할 수 있다.

 

3️⃣useState 사용하여 메모리의 상태를 표현한다

메모리에서 컴포넌트의 시각적 상태를 useState로 표현해야한다

 

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가 모순을 야기하나요? 
  • 예를 들어, isTyping 과 isSubmitting은 동시에 true일 수 없습니다. 이러한 모순은 일반적으로 state가 충분히 제약되지 않았음을 의미합니다. 두 boolean의 조합은 네 가지가 가능하지만 유효한 state는 세 가지뿐입니다. “불가능한” state를 제거하려면 세 가지 값을 하나의 status로 결합하면 됩니다: 'typing', 'submitting', 'success'.
• 다른 state 변수에 이미 같은 정보가 있나요? 
  • isEmpty와 isTyping은 동시에 true가 될 수 없습니다. 이를 각 state 변수로 분리하면 동기화되지 않아 버그가 발생할 위험이 있습니다. 다행히 isEmpty를 제거하고 대신 answer.length === 0으로 확인할 수 있습니다.
• 다른 state 변수를 뒤집으면 동일한 정보를 얻을 수 있나요?
  •  isError는 error !== null을 대신 확인할 수 있기 때문에 필요하지 않습니다.

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

=> 필수 요소 3개만 남음 !

 

5️⃣이벤트 핸들러를 연결하여 state 를 설정한다

 

마지막으로 state 변수를 설정하는 이벤트 핸들러를 생성합니다. 아래는 모든 이벤트 핸들러가 연결된 최종 form입니다:

 

 

---

 

#2. Choosing the State Structure

: 컴포넌트 간의 state 공유

 

 

두 컴포넌트의 state가 항상 함께 변경되기를 원할 때가 있습니다. 그렇게 하려면 두 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모로 이동한 다음 props를 통해 전달하면 됩니다. 이를 state 끌어올리기라고 하며, React 코드를 작성할 때 가장 흔히 하는 작업 중 하나입니다.