소유자 상태를 업데이트하는 올바른 방법

Question

두 개의 구성 요소, 문의 양식 및 입력이 있습니다.

많은 튜토리얼에 설명되어있는대로 입력에서 연락처로 onChangeEvent를 전달하고 해당 입력은 소유자 상태를 정밀하게 입력합니다.

하지만 연락처에서 'prop'나 컨텍스트로 'this'를 전달하고 onChangeEvent를 전달하지 않고 소유자 상태를 업데이트 할 수 있습니다.하지만 좋은 생각입니까?

onChangeEvent를 전달하지 않고 소유자 상태를 업데이트하는 다른 옵션이 있습니까?

Answer 1

React 구성 요소는 최종적으로 일반 자바 스크립트 객체이므로 기술적으로 수행 할 수 있다고 믿습니다. 따라서이를 소품으로 전달할 수 있습니다.

그러나, 여러 가지 이유로, 일반적으로 좋은 생각이 아니다 : 함께

• 이 단단히 커플 두 개의 구성 요소를. 다른 곳에서 입력 구성 요소를 재사용하고 싶다면 똑같은 상태로 전달해야합니다.
• 이 링크를 사용하면 다른 구성 요소가 한 구성 요소의 내부 상태를 조작 할 수 있습니다. 이는 우수한 OO 설계를 위반하는 것입니다.

그러나 이와 같이 작업 할 때는 매우 장황한 경향이 있습니다. 그것들은 또한 하나의 복잡한 트리가 소품을 전달하고 그들 사이에서 핸들러를 변경하는 경우에 대해 추론하기가 어려워집니다.

문제의 한 가지 해결책은 Flux 디자인 패턴을 사용하는 것입니다. 즉 Redux 구현입니다.

Redux에는 하나의 전역 상태, 즉 구성 요소가 조각 (하위 개체)을 볼 수있는 일반 개체가 있습니다. 구성 요소는이 상태를 소품으로 받고 단순한 방식으로 렌더링합니다. 이 상태를 변형시키는 일련의 동작이 있으며 사용자 상호 작용의 결과로 모든 구성 요소가 이러한 동작을 실행할 수 있습니다. 여전히 "국가"의 개념이 있지만 저장 버튼 등을 누르기 전에 양식의 상태와 같은 지역의 물건을 위해 예약되어 있습니다.