[React] 코딩애플 blog-part2-6 (Component 3개 만들고 props로 데이터 전송)

 

오늘은 상품의 재고가 몇개 남았는지 표시해볼 것이다.

일단 재고 데이터를 state에 저장해보자

 

let [inventory,inventoryChange] = useState([10,11,12])

저장한 state는 Detail.js가 아닌 App.js에서 만들어야 한다.

이유는 중요한 데이터들은 상위 컴포넌트에 보관하는것이 중요하다!!

모든 데이터는 위에서 밑으로 흐르기 때문!

다시 Detail.js에서 컴포넌트로 UI를 만들어 보자!

 

function Info() {
  return <p>재고</p>;
}

이렇게 되면 컴포넌트 구조는 다음과 같다.

이제 아까 만든 재고 state 데이터를 바인딩 해야한다.

 

App → props → Detail

Detail → props → Info

 

props 를 두번 사용하여 전송한다.

 

App.js

<Route path="/detail/:id">
          <Detail sticker={sticker} inventory={inventory} />
        </Route>

 

Detail.js

          <Info inventory={props.inventory} />

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

주문하기를 누르면 재고 state에서 -1 하기

 

 

<내가 짠 코드>

 

*주의할점 : App.js에서 inventoryChange 변경함수도 전달해줘야한다!

 

<button
            className="btn btn-danger"
            onClick={() => {
              let newArray = [...props.inventory];
              newArray[0]--;
              props.inventoryChange(newArray);
            }}
          >
            Order
          </button>

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

이렇게 하면 0번째 상품 재고가 감소하는 것을 볼 수 있다.

 

 

<답안>

(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>
    </div>
  )
}

그런데 문제를 풀다가 의문이 생겼다.

답안을 보면 props.재고변경([9,10,11])이런식으로 전체의 변경하셨다.

왜 이렇게 했을까 의문이 생겨서 질문을 하려다가 누군가 같은 질문을 올린것을 보고 찾아보았다.

 

<답변>

useState로 만든 state 변경함수는 언제나 () 안에 있는 값으로 state를 바꿔치기 해주는 함수라서
원래 state가 [1,2,3] 인데 첫째만 +1 해주고 싶으면 항상 변경함수( [2,2,3] ) 이렇게 써야합니다
싫다면 옛날 class 문법으로 컴포넌트와 state 만들었을 때 setState() 함수 쓰면 object자료의 경우 원하는 곳만 변경가능합니다
혹은 다른 라이브러리 추가하거나 vue 쓰면 됩니다

 

리액트를 만만하게 보면 안되겠구나,,하는 생각이 들었다. 😓

그래도 part2를 무사히 끝내서 기분이 좋다. ^_^