Context API

Single Page Application는 컴포넌트간 state 공유를 하려면 props를 사용하여 연결시켜주어야합니다. 그러나 props 전송은 한 단계씩 밖에 안됩니다. 많은 중첩이 이루어질 경우에 props를 반복하여 사용해야하기때문에 효율이 좋지 않습니다. 이 경우에 사용할 수 있는 방법 두 가지가 리액트 문법인 context API와 redux 같은 외부 라이브러리 사용입니다.

오늘은 Context API 사용해보겠습니다.

사용하기

1. 부모 위치 파일에서 context(state 보관함)을 하나 만들어 줍니다.
   다른 파일에서도 사용할 수 있도록 하려면 export를 앞에 붙여줍니다.

export let Shop = createContext()

2. 1에서 만든 context로 원하는 컴포넌트를 감싸줍니다.

<Shop>
 <Detail shoes={shoes}/>
</Shop>

3. 공유를 원하는 state를 provider value 안에 넣어줍니다.

<Shop.provider value={{ shoes, main }}>
 <Detail shoes={shoes}/>
</Shop>

4. state를 사용할 파일에서 import를 해줍니다.

import { Shop } from '파일 위치'

5. useContext() 안에 Context를 작성해줍니다. 그러면 Context 안에 들어있는 state들이 Object 형태로 남게 됩니다. (useContext()는 Context 해체해주는 함수입니다.)

let { shoes } = useContext(Shop)

6. 아래 처럼 중괄호로 감싸서 원하는 위치에 사용 가능합니다.

{ shoes }

특징

• state 변경시 재렌더링 안되어도 되는 것에도 재렌더링이 됩니다.

단점

• 성능 이슈
• 컴포넌트 재활용이 어렵다.

이런 단점에서 실전에선 잘 사용하지 않습니다.