React - 컨텍스트 API

Context API

정의

• 다른 컴포넌트에 데이터를 전달 할 때, prop 사용없이 데이터를 전달 할 수 있게 해주는 리액트 내장 API

필요성

• 전역적으로 필요한 데이터는 최상위 컴포넌트 App에서 state를 이용하여 관리 및 prop을 이용하여 이 값을
  전달하는데, 다수의 컴포넌트를 거쳐야 할 때는, 이 과정이 매우 복잡해진다.
  이를 Context API를 이용하면 쉽게 해결이 가능하다

사용법

생성

• Context API는 createContext 메소드를 이용하여 생성 가능하다

• 생성 시에는 인수 하나를 넣어줘야 하며, 이 값은 후술할 provider의 값이 없을 경우 사용된다

  • 예시코드

  import {createContext} from 'react';
  const testContextAPI = createContext('');
    
  export default testContextAPI;
  

값 전달하기

• 값을 전달하는 방법에는 3가지 방법이 존재한다

Provider

• Provider를 사용하여 해당 컴포넌트를 감싸면 공급자 컴포넌트의 하위 컴포넌트에 Context의 값을 제공하는 역할을 담당한다
• 예시

//TContext.js
import {createContext} from 'react';
//단일 데이터 방식
const testContextAPI = createContext('white');
//다중 데이터 방식
const testContextAPI = createContext({
    {
      userData: {
    	name: 'Blackburn',
    	age: '22'
	  }
    }
  }
);
    
export default testContextAPI;


//App.js
	.
	.
	.
return (
    <TContext.Provider value={"green"}>
        <ExComponent> </ExComponent>
    </TContext.Provider>
);

• 위의 코드에서 value의 값은 필수사항이며, Provider를 사용하였으나 value를 삽입하지 않을 경우, 오류가 발생한다.
  • 공급자 컴포넌트(TContext.Provider) 하위의 컴포넌트인 ExComponent에서는 Context API의 값을 가져와 사용 할 수 있다.

Consumer

• Consumer 컴포넌트를 이용하면 기존의 prop을 이용하여 값을 불러오지 않고, 데이터의 조회가 가능하다
• Consumer 컴포넌트는 다음의 방식을 이용하여 사용이 가능하다

사용 방법

return(
<컴포넌트명.Consumer>
	{
	value=> (
        <>
        	{값 이름}
        </>
	)}
</컴포넌트명.Consumer>
);

예시 코드

import UserData from './Data/UInfo';

const UserUI = () => {
    return(
        <UserData.Consumer>
            {
                value => (
                    <>
	                    <li> `이름 : ${value.name}`</li>
	                    <li> `나이 : ${value.age}`</li>
	                    <li> `전화번호 : ${value.phoneNumber}`</li>
                    </>
                )
            }
        </UserData.Consumer>
    );
}

useContext

• useContext() 후크를 사용하면, 어떤 컴포넌트에서도 제공한 값에 접근이 가능하다

사용 방법

function ExFunc(){
  const contextData = useContext(context 이름);  
};

• 위와 같이 값을 가져와 사용이 가능하다

예시 코드

import UserData from './Data/UInfo';

function UserUI(){
    const { userInfo } = React.useContext(UserData);
    return(
        <>
        	  <li> `이름 : ${userInfo.name}`</li>
	          <li> `나이 : ${userInfo.age}`</li>
	          <li> `전화번호 : ${userInfo.phoneNumber}`</li>
        </>
    );
}

---

참고한 자료

[React] Context API의 개념 및 사용법

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

리액트를 다루는 기술