react - context API

이 친구는 우리를 props 지옥에서 벗어나게 해주는 친구이다.

컴포넌트가 많아지면 어떤 state 데이터를 넘겨줄 때

부모컴포넌의 자식컴포넌트의 자식컴포넌트의 자식컴포넌트 ......~~~  이런식으로 여러겹 겹칠때도 생겨유~

이걸 props만으로 해결하려고 하면 아주 화날뿐더러 나중에 알아보기도 힘들어집니다유

 

이럴 때 쓰는게 바로 context API !

이친구를 쓰면 어떤 값들을 하위 컴포넌트들이 공유해서 같이 쓸 수 있게 해줍니다.

쉽게 props 없이 컴포넌트끼리 넘겨줄 때 쓰는 방법이라고 생각하면 될듯

 

방법은 다음과같이~

 

 

 

1. 범위 생성

app() 밖에 상단에다가 위에 처럼 써주시면 됩니다.

StockContext 는 범위를 생성할 변수입니다.

 

밑에 보면 이해갈거에유

 

---

 

2. 공유할 컴포넌트를 앞뒤로 감싸기 

<StockContext.Provider>  , </StockContext.Provider> 로 공유할 컴포넌트를 감싸줍니다.

이게 범위설정 

저는 Card 컴포넌트와 공유하고 싶어서 씌움

 

그리고 속성값으로 value={ } 를 쓸건데 값으로는 공유를 원하는 데이터를 써주면 됩니다요

저는 value 값으로 stock 을 넣었습니다이

내가 공유하고 싶은 stock State

 

 

---

3.  useContext() 로 공유된 값 사용하기 

 

import 땡겨오시고

이제 공유했으니 사용해볼건데

usecontext() 라는 훅을 이용할겁니다.   역시 import 하셔야하구요

 

공유받은 컴포넌트로 가서 

 

사용할 변수를 하나 만들어주고 거기에 useContext( ' 내가 만든 범위 변수 ' ) 를 넣어줍니다.

 

저는 stock이라는 State를 땡겨오고 싶었고 그걸 그대로 stock으로 사용하고 싶어서  let stock 해준겁니다.

또 아까 만든 범위변수 StockContext을 넣은겁니다.

 

 

사용해볼까유 ?

쨔잔 ~~ 이제

App 컴포넌트에서 생성된 stock이라는 State 값을 

Card 컴포넌트에서 받아서 stock이라는 변수로 그대로 사용할 수 있게 되었슙니당~

 

---

 

4. 다른 파일로 나눠져 있는 컴포넌트에 전달해주고 싶다면~

 

 

쉽습니다.

범위지정한 변수를 export 해버리고

 

공유 받을 컴포넌트가 있는 파일로 넘어가서

import { '범위지정변수' } from ' ./경로 '  써주면 끝

나머지 순서는 동일합니다

 

 

 

 

단순히 컴포넌트 1~2개를 거쳐간다면 props 로 재껴 버리면 되겠지만 ,

많아지면 이런 방법도 있다 ~~ 라는걸 알아두는걸로~

 

 

끝