Context API useContext

React Context API에 대해 알아보자.

Context API는 컴포넌트 구조에서 데이터를 주고받을때는 부모컴포넌트에서 자식컴포넌트에게 Props를 이용하여 데이터를 준다. 하지만 자식의 자식의 자식의 자식에게 데이터를 준다하면 props를 여러번 쓰게 되는 불편함이 있을거다. 이 불편함을 ContextAPI가 데이터를 전역적으로 뿌려줄 수 있다.

 

먼저 기본적인 공식문서를 올려놓겠다.https://ko.reactjs.org/docs/context.html#when-to-use-context

Context – React

 

App컴포넌트에서 하위 -> 하위 컴포넌트까지 데이터를 전달해주는 코드를 작성해보았다. 컴포넌트가 3개뿐이어서 그렇지 몇백개가되어버린다면 머리아플거다. 

 

1. import createContext 

import { createContext } from 'react';

제일 먼저 createContext 를 import 해준다. 

 

2. 변수를 만들어서 createContext의 리턴값을 받아준다.

const contextData = createContext();

 

3. contextData.Provider 데이터를 사용할 컴포넌트를 감싸준다. 전역으로 사용할 데이터는 value={{data}} 이렇게 담아주면된다.

<contextData.Provider value={{data}}>
    <AAA data={'App에서 찾아왔습니다'}></AAA>
</contextData.Provider>

 

 

일단 이렇게까지 최상위 컴포넌트에서 context를 만들어보았다. 다음은 하위컴포넌트에서 useContext훅을 사용하여 데이터를 받아보겠다.

 

function AAA(){
  let data = useContext(contextData); //contextData = createContext();
  console.log(data)
  return(
    <>
      <div>AAA컴포넌트에서 contextData출력 {data.data}</div>
    </>
  )
}

변수 data에 만들어놨던 contextData를 useContext인자로 넣어 만들어준다. 그러면 data에는 하나의 객체가 들어가는데 그 객체안에 value에있는 데이터들이 나오게된다.

이렇게 나온객체를 사용하면된다. 

다른js파일에서 사용할려면 createContext()를 export 하여서 사용해주면된다. 

 

import { createContext, useContext } from 'react';

const contextData = createContext();

function App() {
  const data='App에서 찾아왔습니다';
  return (
    <div className="App">
      <contextData.Provider value={{data}}>
        <AAA></AAA>
      </contextData.Provider>
    </div>
  );
}

function AAA(){
  let data = useContext(contextData);
  console.log(data)
  return(
    <>
      <div>AAA컴포넌트에서 contextData출력 {data.data}</div>
      <BBB></BBB>
    </>
  )
}

function BBB(){
  let data = useContext(contextData)
  return(
    <>
      <div>BBB컴포넌트에서 contextData출력 {data.data}</div>
    </>
  )
}

export default App;

 

*여기서 추가로

 

createContext() 파라미터로 값을 넣을 수 있는데 이값은 초기값으로 넣어줄 수 있다. 

상위컴포넌트에서 Provider로 감싸주지않았는데 하위컴포넌트에서 useContext로 가져다 쓸려고할때 기본값이 들어간다. 

const contextData = createContext('초기값입니다');
function App() {
  const data='App에서 찾아왔습니다';
  return (
    <div className="App">
      {/* <contextData.Provider value={{data}}>  */}
        <AAA></AAA>
      {/* </contextData.Provider> */}
    </div>
  );
}

이렇게 Provider를 감싸지 않고 다른컴포넌트에서 가져다 사용할려고 하면

 

이렇게 기본값이 출력이되는걸 볼 수 있다.