component가 3개 중첩되면 state전달

App.js가 있고 Detail.js가 있어서 state를 받아올 수 있다. 여기서 Detail.js에 또 컴포넌트를 만들면 App.js에서 3번째 컴포넌트로 state를 어떻게 전달할까?

//App.js
function App() {
	let [재고, 재고변경] = useState([10,11,12]);
	return (
  		<Detail shoes={shoes} 재고={재고}/>
  	)
};//App의 state를 작명해서 내보냄

//Detail.js
function Detail(props) {
	
    return (
    	<재고 재고={props.재고}></재고> //재고라고 작명하고 props.재고로 받아서 내보냄
    )
}
function 재고(props) {
  	return (
    	<p>재고 : {props.재고[0]}</p>
  	)
};

이렇게 props로 계속 보내서 사용할 수 있다. 받아온걸 props로 다시 작명해 보내고 다시 props로 사용하면 된다. 만약, 재고변경이란 변경함수를 Detail에서 사용하려면

//App.js에서
<Detail shoes={shoes} 재고={재고} 재고변경={재고변경}/>

//Detail.js
<button className="btn btn-danger" onClick={()=>{
              var 재고2 = [...props.재고];
              var 재고2어레이 = 재고2.map(function(a) {
                return (a - 1);
              })
              props.재고변경(재고2어레이);
}}>주문하기</button>

똑같이 props로 받아와서 사용할 수 있다. 위의 예제는 사본을 만들어 주문하기 버튼을 누르면 props.재고의 어레이가 다 1씩 감소되는 예제이다.