쇼핑몰 프로젝트(중첩 컴포넌트)

만약 상세페이지에 재고량을 표시하는 기능을 구현하고 싶다.
이때 재고량에 대한 코드는 Info라는 컴포넌트에서 구현하고 싶어서 Detail컴포넌트와 별도의 컴포넌트를 생성한다. 이 과정은 다음과 같다.

각각 상품에 대한 재고량은 state에 저장하는 것은 이제 관습이라는 것도 알았고, 가장 상위 컴포넌트에 저장해서 받아쓰는 식으로 해야 데이터의 흐름이 꼬이지 않는 것도 관습이라는 것을 알았다.

그렇다면 Info는 App에 저장되어 있는 재고를 어떻게 받아올까?

똑같이 props를 이용하면 된다.
Detail 태그 안에서 재고를 받아온다.

(App.js)
function App(){
  let [재고, 재고변경] = useState([10,11,12]);
  return (
    <div>
      <HTML많은곳/>
      <Detail 재고={재고} />
    </div>
  )
}

Detail 컴포넌트 속 Info태그에서는 똑같이 재고를 받아오는데, 이때 이미 한번 받아온 과정이니 props를 붙이도록 한다.

function Detail(props){
  return (
    <div>
      <HTML많은곳/>
      <Info 재고={props.재고}></Info>
    </div>
  )
}
function Info(props){
  return <p>재고 : { props.재고[0] }</p>
}

정리)
하위 컴포넌트가 몇개든 데이터를 전송하려면 props를 사용하면 된다.
state변경 함수 또한 받아올 경우 또한 props로를 사용
(ex. shoes = {shoe} shoes변경함수 = {shoes변경함수} )

하지만 많은 컴포넌트는 prop지옥을 만들게 되고, 이를 해결하기 위해
Context API 혹은 redux를 사용한다.