![](https://images.velog.io/images/ksung1889/post/df429922-ee97-42c1-9baf-4213801de6f2/image.png

App.js에 있는 state 데이터를 가 쓰거나 변경하고 싶으면 어떻게 하나?

App에서 Detail, 그리고 Detail에서 Info로 state를 전송
= props 문법을 2번 쓰면 됨

하위 컴포넌트들이 상위 컴포넌트의 state를 변경하고 싶을 때도 state변경함수를 props로 전달만 해주면 된다.

App -> Detail -> Info 이렇게 데이터를 전송해야합니다.
그냥 props 문법을 2번 써줘야함.

     (App.js)

function App(){

  let [재고, 재고변경] = useState([10,11,12]);

  return (
    <div>
      <HTML많은곳/>
      <Detail 재고={재고} 재고변경={재고변경} />
    </div>
  )
}

(Detail.js)

function Detail(props){

  return (
    <div>
      <HTML많은곳/>
      <button onClick={()=>{ props.재고변경([9,10,11]) }}> 주문하기 </button>
      <Info 재고={props.재고}></Info>
    </div>
  )
}

function Info(props){
  return <p>재고 : { props.재고[0] }</p>
}