React Context (React 전역상태관리 API)

 

prop drilling

최상위 Component 에서 상태를 관리해야 하고 값을 전달해주려고 할때 아래 그림과 같이 최하위 컴포넌트에 전달하기 위해서는

4단계나 건너서 전달해 주어야 한다. 

하지만 이거보다 더 많은 컴포넌트가 중간에 있다면 ......

Project 전체적으로 사용하는 데이터를 전역 데이터라고하는데 이것을 props와 state 로만 관리하게 되면 여러곳으로 내려줘야 한다는 문제점이 있다.

이때 prop을 내려주는게 드릴로 땅을 파는 것 같다고 해서 이런 문제점을 prop drilling 이라고 부른다.

이런문제점을 해결하기 위해서 React 에서 React Context 를 만들었다. 

 

 

React Context 적용방법

Context API는 다음 3단계를 통해 사용할 수 있다.

1. **createContext()**로 저장소 생성
2. **Provider**로 저장소 연결  --> 사용할 컴포넌트를 Provider 로 감싸기
3. **useContext()**로 상태 사용

 

 < App> 컴포넌트 최상위에서 컨텍스트 생성 및 전달하는 컴포넌트를 Provider 로 감싼다.

import {createContext} from 'react'  //  (1) 컨텍스트생성 import

 export const context = createContext() // (2) 컨텍스트 생성 및 export 해준다
                                        //     변수명은 아무거나 가능

App(){
// App Component 코드 (생략)

return ( <Context.Provider value ={ props }> // (3)변수명.Provider태그로 전달할 컴포넌트를 감싼다. //  (4) value 에 전달하고 싶은 값을 넣는다
           <컴포넌트_1>                         
           <컴포넌트_2>
         </Context.Provider>
 )
}

 

 

컴포넌트 1은 자식 컴포넌트를 가지고 있지만

porp을 전달할 필요가 없다.

 

컴포넌트_1(){
//component 1의 코드(생략)


<컴포넌트_1_child> // 자식 컴포넌트
}

 

 

받아오는 컴포넌트에서 App 컴포넌트에서 생성한 Context 와 useContext 로 값을 받아서 사용하면 된다.

import { Context } from 'App' // (5) App 컴포넌트 에서 가져온다
import { useContext } from 'react' // (6) react 에서 useContext import


컴포넌트_1_child(){
const 변수명 = useContext(Context) // (7) App에서 전달한 값 가져오기 성공



}

 

일반적으로 React Context 는 파일을 따로 만들어서 관리한다

< 예제1 >

 

(5) , (6), (7) 에서 (5), (6) 을 항상 import 해야 하기 때문에 묶어서  아래와 같이 작성 하고

import { createContext, useContext } from 'react' 


export const context = createContext() 
                                        
export function ContextProvider(){                 // provider 작성

const 변수명1 = 값1
const 변수명2 = 값2

return ( <Context.Provider value ={ 변수명1, 변수명2 }> 
           { children }
         </Context.Provider>
    )
}

export function useValue(){                       // useContext 사용 변수 전달함수 작성
  return useContext(context)
}

 

 

사용할 컴포넌트에 위에서 작성한 Provider 로 감싸주면

 <ContextProvider>
    <App />  <!-- 이 안의 내용이 Children 으로 넘어간다. -->
 </ContextProvider>

 

 

App 컴포넌트 안에서는 아래와 같이 변수를 가져와서 사용 가능 하다.

const { 변수명1, 변수명2 } = useValue()

 

< 예제 2 >

Context.jxs 파일을 만들고

import { createContext, useContext } from "react"; //컨텍스트 관련 내용 import

const dragDropContext = createContext();  // 만들고 싶은 변수명으로 컨텍스트를 생성한다.

export function DragDropProvider({children}) {
     const dragStart =() =>{

     }
     const dragEnter =() =>{

     }
     const drop =() =>{

     }
						.
                        .
                        .
                        .
                        

return (
    <dragDropContext.Provider value={{ dragStart, dragEnter, drop}} >                                  
   	   {children}   // 이제 children 안의 컴포넌트들은 value 값을 사용가능
    </dragDropContext.Provider>
)
}

export function useDragDrop(){
  return useContext(dragDropContext) // --> {dragStart, dragEnter, drop} 을 반환
 }                                   // 더 간단하게 쓰기 위해 useDragDrop 함수를 만듬

 

 

Main 컴포넌트로 가서 App 컴포넌트로 가서 DragDropProvider로 감싼다.

 <DragDropProvider>
    <App />  <!-- 이 안의 내용이 Children 으로 넘어간다. -->
 </DragDropProvider>

 

 

App 과 모든 하위 폴더에서 사용

const {dragStart} = useDragDrop() // dragStart 만 가지고오고 싶을때

 

const {dragEnd} = useDragDrop() // dragEnd 만 가지고오고 싶을때

 

 

const {dragStart, dragEnd, drop} = useDragDrop() // 3가지 다 가지고오고 싶을때