[React_study] Context API

* SPA의 단점

• 컴포넌트간 state 공유가 어렵다.
• 부모 컴포넌트 => 자식 컴포넌트 props전송은 가능
• props가 10개 ~ 20개 중첩이 되어 있으면 너무 헷갈리고 파악하기 어렵다. (Prop Drilling)

 

* 해결방법

• Redux와 같은 외부 라이브러리 사용
• Context API를 사용 (오늘 알아볼 내용)

---

* Context API를 이용해 props없이 state를 공유하는 방법

- setting

• createContext() 함수를 가져와서 context를 만들어준다.
  • (context를 쉽게 비유해서 설명하자면 state 보관함이다)
• Context로 원하는 곳을 감싸고 공유를 원하는 state를 value안에 적으면 된다.
• Context로 감싼 모든 컴포넌트와 자식컴포넌트는 state를 props전송없이 직접 사용이 가능하다.

(App.js)

export let Context = React.createContext();

function App(){
  let [item, setItem] = useState([10,11,12]);

  return (
    <Context.Provider value={ {item} }>
      <Detail/>
    </Context.Provider>
    
  )
}

 

 

* Context안에 있던 state를 사용하려면

1. 만들어둔 Context를 import해온다.
2. useContext()안에 넣는다.
3. useContext()안에 넣은 Context에는 공유 하였던 모든 state가 남는다. 변수에 담아서 사용하면 된다.

(참고) Detail 안에 있는 모든 자식컴포넌트도 useContext() 쓰면 자유롭게 재고 state를 사용가능하다.

// Detail.js

import {useState, useEffect, useContext} from 'react';
import {Context} from './../App.js';

function Detail(){
  let { item } = useContext(Context)

  return (
    <div>{ item }</div>
  )
}

 

---

* Context API의 단점

• state변경시 렌더링이 필요없는 컴포넌트까지 전부 재렌더리잉 된다. (성능적인 문제가 생긴다.)
• useContext()를 사용하고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import하는게 귀찮아질 수 있다.
• 그로인해 redux와 같은 외부 라이브러리를 주로 사용한다.