React Hooks : useContext() & Context API : createContext()

 

 

리액트로 개발을 하다보면 특정 함수나 값을 원하는 컴포넌트에게 전달하기 위해서,

여러 개의 컴포넌트를 거치고 거쳐서 전달해야하는 경우가 많다.

컴포넌트 1,2개 정도는 중간 다리 역할로 괜찮지만 그 이상 넘어가버리면 굉장히 복잡할 것이다.

이러한 경우를 방지하기 위해서는 Context API 를 사용해야한다.

 

React Context API 를 사용하면 컴포넌트 상관없이 전역적으로 특정 값을 사용할 수 있다.

 

 

Context API 사용법

 

- createContext : context 생성

- useContext : context 조회

 

step1) createContext, useContext Hooks를 불러온다.

 

import React, { createContext, useContext } from 'react';

 

step2) 변수에 createContext 함수를 담고 인자로 기본값을 준다.

 

const Name = createContext(null);

 

step3) 최종 전달 컴포넌트에 변수를 하나 만들고 useContext 함수에 인자로 위에서 만든 Name변수를 가져온다.

리턴할 때 최종으로 내보낼 변수를 입력해준다.

 

function Child(){

    const text = useContext(Name);

    return <div> Hello {text} </div>

}

 

step4) export 할 컴포넌트에서 return 뒤는 소괄호로 묶어준다.

context를 만들면 그 안에 Provider라는 컴포넌트가 들어있는데, 이 컴포넌트를 통해 context의 값을 정할 수 있다.

값을 정할 때는 value에 값을 설정해준다.

그리고 Provider 컴포넌트로 렌더링할 컴포넌트를 감싸준다.

 

function Context(){

    return (

    <Name.Provider value="subin">

        <GrandParent />

    </Name.Provider>

    )

}

 

 

 

 

Context API를 사용해서 dispatch를 어디서든 조회해서 사용할 수도 있다.

이 때 useState 대신 useReducer를 사용해야만 dispatch를 전역적으로 사용할 수 있게 된다.