[React] Component 중첩 시 state 전달

컴포넌트 중첩 시 state 전달

중요한 데이터들은 상위컴포넌트에 모아놓는 것이 좋다.

위에서 밑으로 데이터가 흐르기 때문이다!

밑에서 위로 데이터가 가는 건 좋지 않다.

하위까지 props로 전달했었는데

하위의 하위도 props로 전달한다.

 

주문하기 버튼을 누르면 재고 state에서 1을 빼려면?

- 재고변경() 함수를 부모컴포넌트 App.js가 가지고 있으므로 props로 전송해줘야한다.

 

정리

하위 컴포넌트가 몇개든 데이터를 전송하려면 props를 쓴다.

하위 컴포넌트가 상위 컴포넌트 state 변경하려면 state 변경함수 쓴다. => 그게 상위 컴포넌트에 있으면 props로 전송한다.

=> 컴포넌트 개수만큼 앱이 복잡해진다.

=> Context API나 redux로 데이터 전송이 아니라, 부모 컴포넌트에 있는 데이터를 사용할 수 있다.