React Component중첩, props, state

- Component중첩

 

컴포넌트1 > 컴포넌트2 > 컴포넌트3

 

이런식으로 있으면 중첩으로 props를 계속 전달해주면된다.

 

컴포넌트1에 있는 state를 컴포넌트3에서 쓰고싶다? 그리고 변경함수까지

 

전부 props->props로 계속 전달할 수 있다.

 

대체방식으로는 redux같은것이 있지만 우선 알아두자

 

이런식으로 컴포넌트 1에있는 재고를 컴포넌트3에서 관리한다고 생각해보자

 

컴포넌트1-> 컴포넌트2 로 props

컴포넌트2-> 컴포넌트3 으로 props하면 될것이다.

 

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

 

첫번째에 컴포넌트에 선언된, 가장상위 App컴포넌트에 선언된자료

 

<Detail shoes={shoes} 재고 = {재고} 재고변경={재고변경}></Detail>

그 안에있는 두번째 컴포넌트 Detail에 state랑 state변경함수 둘다 props로 전송해준다.

 

<div className="row">
        <div className="col-md-6">
          <img src={"https://codingapple1.github.io/shop/shoes"+(찾은상품.id+1)+".jpg"} width="100%" />
        </div>
        <div className="col-md-6 mt-4">
        <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}</p>

         <Info 재고 = {props.재고[id]}></Info>

          <button className="btn btn-danger" onClick={()=>{
            var newArray = [...props.재고]
            newArray[id] = newArray[id]-1
            props.재고변경(newArray)
          //  props.재고변경([9,10,11])
          }}>주문하기</button> 
          <button className="btn btn-danger" onClick={()=>{
            history.push('/')
           }}>뒤로가기</button> 
        </div>
      </div>
      
      .....
      
      function Info(props){
  return(
    <p>재고 : {props.재고}</p>
  )
}

그럼 이와같이 Detail함수중 집중해서 봐야할곳 맨아래 Info라고 만든 컴포넌트에 다시 props를 보내기위해

         <Info 재고 = {props.재고[id]}></Info>

이곳에서 다시 props에있는걸 또다시 props로 전송해준다. 

 

<button className="btn btn-danger" onClick={()=>{
            var newArray = [...props.재고]
            newArray[id] = newArray[id]-1
            props.재고변경(newArray)
          //  props.재고변경([9,10,11])
          }}>주문하기</button>

그리고 버튼안에 onClick 콜백함수안에서

 

배열을 복사해 삽입하는방식으로 클릭할 때 마다 값이 1씩 떨어지게 설정해준다.

 

---

요악하자면

 

props는 계속 하위컴포넌트로 전송할 수 있다.