리액트 : Context API (전역에서 데이터 사용)

* props : 부모 > 자식 > 그 자식 > 그 자식의 자식 ....

*  props drilling 발생 : 이 props가 어떤 컴포넌트로부터 왔는지 파악하기 어려움 + 유지보수 어려움

 

*  useContext : 전역에서 데이터 관리 가능

---

(1) Context API 필수 개념 3가지 

1. createContext : context 생성
2. Consumer : context 변화 감지
3. Provider : context 전달 (to 하위 컴포넌트)

(2) 주의 사항 : 렌더링 문제

• provider (내 코드에서는 <GrandFather>) 가 제공한 value값이 달라지면
  useContext 사용하는 모든 컴포넌트가 리렌더링됨!
  => 이것의 대안 : 메모이제이션

(3) 코드로 구현 

1. src 폴더 안에 context 폴더 생성 > js 파일 생성
2. creatContext import하기
3. 변수 생성 후 export하기
4. provider로 주입할 수 있는 구간에 전역으로 적용되는 코드
   => export const FamilyContext = createContext(null);
5. 생성된 코드를 사용하면 끝!

 

1. <GrandFather>

[props] 

const houseName = '스파르타';

const pocketMoney = '10000';

return

<Father houseName={houseName} pocketMoney={pocketMoney}></Father>;

 

[context]

 

const houseName = '스파르타';

const pocketMoney = '10000';

return;

<FamilyConext.Provider

   value={{ houseName: houseName, pocketMoney: pocketMoney }}>

    <Father />

</FamilyConext.Provider>;

▶context에서 전역으로 데이터를 사용할 수 있기에 더욱 간편!

▶context.Provider를 사용하여 하위 컴포넌트로 context 전달 

▶context.Provider는 value값에 {객체}가 들어감. key:value값으로 전달하기 

 

2. <Father>

[props]

function Father({houseName, pocketMoney}){

  return <Child  houseName = {houseName} pocketMoney = {pocketMoney}></Child>

}

[context]

function Father(){

  return <Child/>

}

▶Father컴포넌트는 이제 중간에서 전달 안 해도 됨!

 

3. <Child>

[context]

function Child() {

    const data = useContext(FamilyContex); //useContext(Context명칭)

    return;

    <div>

        <span>집 이름은 {data.houseName}</span>

        <span>용돈은 {data.pocketMoney}</span>

    </div>;

}

▶props로 내려준 값을 사용한 것이 아닌 context를 통해 값을 받아옴!

▶데이터 가져오는 방법 : useContext(Context명칭)

 

끝.