1. 국정운영
1) 글로벌 상태 관리
상태: 변경 중인 데이터입니다. 사용자 인터페이스에 동적으로 표시되는 데이터.
Side Effect: 함수(또는 구성요소) 입력 외에 함수의 결과에 영향을 미치는 요인. 예) 네트워크 요청, API 호출…
부작용이 최대한 배제되도록 컴포넌트를 생성해야 합니다. 입력은 또한 가짜 데이터를 나타낼 수 있어야 합니다.
=> 프레젠테이션 구성 요소
그러나 다음과 같은 부작용에 의존하는 상태가 있을 수 있습니다. B. 충전 상태. 응용 프로그램을 만들 때 이러한 모든 상황을 고려해야 합니다.
(1) React로 앱을 디자인하는 방법
https://en.reactjs.org/docs/thinking-in-react.html
리액션으로 생각하기 – 리액팅
사용자 인터페이스 구축을 위한 JavaScript 라이브러리
www.reactjs.org
1단계: 사용자 인터페이스를 구성 요소 계층으로 나눕니다.
구성 요소는 무엇이어야 합니까? => 개인 책임의 원칙. 구성 요소는 한 가지 작업만 수행해야 합니다.
구성 요소가 커짐에 따라 더 작은 하위 구성 요소로 나눌 수 있습니다.
구성 요소를 분해할 때 계층 구조로 정렬합니다.
2단계: React로 정적 버전 만들기
데이터 모델로 UI만 렌더링하는 정적 버전을 만듭니다. 정적 버전을 만들 때 상태를 사용하면 안 됩니다.
간단한 예제는 위에서 아래로 빌드하기가 더 쉽지만 더 큰 프로젝트는 아래에서 위로 빌드하고 개발하면서 테스트를 작성하기가 더 쉽습니다.
3단계: UI 상태의 최소 및 전체 표현 찾기
상태별 값의 변화에 대응합니다. 따라서 UI를 대화형으로 만들려면 상태를 사용해야 합니다. 가능한 최소 상태를 사용하고 나머지는 필요에 따라 즉석에서 계산하도록 합니다.
예) TODO 목록 상태 = TODO 항목을 저장하는 배열. TODO 항목 수 = TODO 항목 배열의 길이.
4단계: 상태가 있어야 하는 위치 찾기
어떤 구성 요소가 상태를 변경하거나 소유할지 파악해야 합니다. React에는 실패하는 단방향 데이터 흐름이 있다는 점에 유의해야 합니다.
국가의 위치가 결정되기 전에
- 이 상태를 사용(영향)하는 모든 구성 요소를 찾습니다.
- 해당 구성 요소의 공통 구성 요소 찾기(모든 해당 구성 요소 위에 하나의 구성 요소)
- 공통 또는 상위 구성 요소에는 상태가 있어야 합니다.
- 상태를 소유하는 적절한 구성 요소가 없으면 상태를 소유하는 구성 요소를 만들고 공통으로 소유하는 구성 요소의 최상위 계층에 추가합니다.
5단계: 역방향 데이터 흐름 추가(증가 상태)
계층 구조의 맨 아래에 있는 구성 요소는 맨 위에 있는 상태 값을 변경해야 할 수 있습니다.
이 경우 상태 리프팅을 사용할 수 있습니다. 상단 구성 요소는 setState() 함수를 지원하고 하단 구성 요소는 상단 구성 요소의 값을 변경합니다.
(2) 두 개의 국무부
현지의
상태는 특정 구성 요소 내에서만 관리됩니다. 다른 구성 요소와 데이터를 공유하지 않는 양식 데이터의 예입니다. 와 같은 입력 값을 받을 때 B. 입력 상자 또는 선택 상자.
해고하다
제품 또는 여러 구성 요소에서 관리되는 상태입니다. 다른 구성 요소와 상태를 공유하고 영향을 미칩니다.
예) 상품 선택 여부, 데이터 불러오기 여부…
다른 구성 요소가 다른 상태 유형을 사용하는 경우 => 전역 상태가 필요하지 않습니다. = 출처가 달라도 상관없음 X
다른 구성 요소에서 사용하는 상태 유형이 동일한 경우 => 소스는 동일해야 합니다 = 전역 상태여야 합니다.
(3) 글로벌 상태의 데이터 무결성
데이터 무결성: 데이터의 정확성을 보장하기 위해서는 데이터의 변경이나 수정을 제한하고 항상 데이터 상태를 올바르게 유지하여 안정성에 영향을 미치는 요소를 방지해야 합니다.
=> 같은 데이터는 항상 같은 곳에서 나와야 합니다. 유일한 진실의 근원
전역적으로 상태를 관리해야 하는 경우
예) 다크모드/라이트모드, 전역화 설정, 되돌리기/다시하기 히스토리 기능
(4) 상태 관리 도구
리액트 콘텐츠 / Redux / MobX
전역 상태 메모리를 제공하고 소품 드릴링 문제를 해결합니다.
상태 관리 도구는 필수가 아닙니다. 따라서 국가 관리의 기본 요소인 국가가 어디에 위치해야 하는지 먼저 파악해야 한다.
2) 프로펠러 드릴링
드릴링 소품
부모 구성 요소의 상태를 구성 요소에 전달하기 위해 구성 요소 간에 prop을 전달하는 목적으로만 사용되는 구성 요소를 통해 데이터가 전달되는 현상입니다.
문제
이는 소품이 여러 번(5회 미만) 통과되면 큰 문제는 아니지만 규모가 커지고 구조가 복잡해지면서 다음과 같은 문제가 발생한다.
- 코드의 가독성이 매우 떨어짐
- 코드 유지 관리가 어려워짐
- state를 변경할 때 props 전달 과정에 불필요하게 관여하는 컴포넌트에서도 re-rendering이 발생합니다. => 성능 저하
해결
- 구성 요소 관련 조건을 최대한 가깝게 유지
- 상태 관리 라이브러리 사용
————————————————– —
로컬 상태: 특정 구성 요소에서만 사용되는 상태입니다. 다른 구성 요소와 상태를 공유하지 않습니다.
전역 상태: 전체 또는 여러 구성 요소에서 사용되는 상태입니다. 다른 구성 요소와 상태를 공유하고 영향을 미칩니다.
글로벌 상태가 필요한 이유
서로 다른 구성 요소가 동일한 상태를 처리하는 경우 이에 대한 소스는 하나만 있어야 합니다. 소스가 여러 개인 경우 상태가 바뀔 때마다 여러 소스를 모두 동기화해야 하고 구조가 복잡해지고 유지보수가 어렵다. 즉, 같은 상태를 다룰 때는 같은 소스를 사용해야 하며, 이는 전역적 공간으로 볼 수 있다.