ReactJS : 부모 구성 요소의 가져온 데이터를 자식에게 전달할 상태로 저장해야합니까?

Question

상당한 크기의 데이터를 하위 구성 요소에 전달해야하는 상황에있을 때이를 수행하는 가장 쉬운 방법은 상태에 저장 한 다음 렌더링 함수 내에서 소품으로이를 자식에게 전달하는 것입니다. 이것을하기에 덜 집중적 인 방법이 있는지 궁금합니다. 예를 들어

, 내가 지금 같은 관계가있는 경우 :

<PhotosPage> 
<PhotoFeed/> 
</PhotosPage> 

나는 내가 '사진 피드'를 가져올 것인지 알고 데이터 PhotosPage 마운트를. 이 데이터를 PhotoPage의 componentDidMount() 함수에서 가져온다고 가정 해 보겠습니다. 나는 단순히 prop로 PhotoFeed 구성 요소에 this.state.feedData를 전달할 수 있습니다 다음

this.setState({feedData: response.data}) 

: 그리고 페치 요청이 단지 상태의 설정을 완료 한 후, 뭔가처럼 나에게 너무 명백한 것 같습니다

<PhotoFeed feedData={this.state.feedData})}/> 

이것은 구성 요소의 나머지 부분을 포함하지 않는 매우 기본적인 예입니다. 이것을하기에 덜 집중적 인 방법이 있습니까? 나는 이것이 관계를 볼 수있는 매우 보편적 인 컨테이너라고 확신하고 redux없이 이것을 할 수있는 더 좋은 방법이 있는지 알고 싶다. 나는 내가 할 필요가 없을 때 내가 상태를 사용하고 있을지도 모른다고 걱정한다.

Answer 1

일반적으로 수용되는 방법으로,이 기술을 컨테이너 구성 요소라고합니다. Here은 이것에 대한 좋은 글입니다.

Here은 다른 옵션을 논의하는 또 다른 사례입니다.