여기 메인 페이지 상품아래마다 재고데이터를 박아주려고 한다 !
가격 아래에 새로운 컴포넌트를 만들어놓고, 그곳안에다가 데이터 바인딩을 하려면 ? 뭘 어쩌긴 어째 ! props를 2번쓰고 뭐 그렇게 해야지..좀 골치아프겠지 ! 그런게 귀찮다면 ?

Context API

react 내장문법임

이러한 문법을 사용하면 된다 !
app 컴포넌트 밖에 만들어야한다 !

context를 이용한 값을 공유하는 변수를 만들어줌!

어떤 범위끼리, 어떤 컴포넌트들끼리 같은 값을 공유하고싶나? 범위를 지정해보자

범위(context)를 생성했으면, 그 범위를 싸맬수 있는 유용한 컴포넌트가 생성되는데 .Provider라고 사용하면 된다.

like this, 여기까지 하면 세팅은 끝 !

그 다음 value={} 라는 props 속성을 써서,우리가 넣고싶은 값(데이터) 등을 넣어주자
"이 범위 안에있는것들은 {재고}라는 값을 공유하게 해주세요~" 라고 적혀있는 거다
value 는 작명하는 부분이 아니다 여기서는 무조건 저렇게 써주어야 한다 !

이렇게 정리될수 있다 !

이제 Props 안써도 된다는게 너무 편하군요

이제 카드라고 만들어놓은 컴포넌트로 내려와서

재고라는 변수를 새롭게 만들어주고
useContext 라는 Hook을 사용하자 ! (Hook이기 때문에 상단에 import 해주는거 잊지말자.)

이제 넣고싶은부분에 데이터 바인딩을 해주면 쏙 ~ 잘들어간다

하지만 우리는 그 데이터 array 안에있는 각각의 값을 넣어주고싶지 않은가?

여기서 만들어놓은 i의 값을 props로 받아온다고 Card 컴포넌트에서 적어놓았다, 저 i는 array 안에있는 오브젝트의 순서를 나타내주기 때문에

다시 요렇게 슉 박아주면 각자의 값이 나오게 된다! 근데..

이 문법 편한가요?? 가깝고,간단한 데이터를 받아올땐 그냥 Props를 쓰는게 좋다..

컴포넌트 안에 컴포넌트안에 컴포넌트에 적용하고 싶은데 그것도 되나?
됩니다 ~! 우리는 useContext로 만들어놨기 때문에 새로운 변수에 담아서 사용하시면 됩니다

내가 만들어놓은 범위를 Detail.js에도 공유하고싶다면
app.js에서 일단 이렇게 먼저 해주자

만들어놓은 범위를 Detail.js로 보내서 쓸수있게 export라고 먼저 적어주고

app.js 하단에 내려와서 라우터 부분에 범위를 설정해주자

Detail.js로 들어와서 상단에 import를 정상적으로 해주고 !
아까 app.js 에서 만들어놓은 context를 그대로 똑같이 입력해주면 사용이 가능하다