[React] Context API

---

 

 

컴포넌트가 중첩되어있을 경우, 자식에서 자식으로 props를 사용하여 계속 넘겨야 하기 때문에 데이터 공유가 힘들다.

이 때 Context API를 사용할 수 있다.

 

 

◽ Context API 사용하기

1. 변수를 선언한다.

import {createContext} from "react";

let TestContext = createContext()
// 다른 컴포넌트와 공유할 경우 export를 붙여준다.
// export let Context = createContext()

 

2. 아래와 같이 공유할 컴포넌트를 감싸준다.

// 공유할 변수는 여러개 작성할 수 있다.
<TestContext.Provider value={ {stock, item} }>
  <Detail shoes={item} />
</TestContext.Provider>

 

3. 공유할 컴포넌트를 import 한다.

import {TestContext} from "../App";

function Detail(props) {
    let testVal = useContext(TestContext)
    console.log(testVal);
    
    // 디스트럭쳐링 문법으로 아래처럼 사용할 수 있다.
    // let { stock } = useContext(TestContext)
    
    // ...
}

 

로그 메세지

 

 

 

 

◽ Context API를 사용하지 않는 이유

1. state를 변경할 때 비효율적으로 불필요한 컴포넌트까지 모두 재렌더링 된다.

2. useContext()를 사용하는 컴포넌트에서는 일일이 Context를 import 하는 것이 번거로울 수 있다.

 

= 그래서 리덕스같은 외부라이브러리를 사용한다.

 

 

---

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌