[Hook] useContext

예를들어 함수1에서 함수 5까지 동일한 변수를 넘겨줘야 한다고 할때, props 를 이용하여 매번 인자값을 pass 하여 넘겨주는게 번거롭다. 

또한 경우에 따라 전역변수 처럼 사용해야 할 때가 있다. 이를 위해 사용하는것이 useContext 훅 이다.  DI 와도 흡사해 보인다. 

 

여러 컴포넌트에서 동시에 접근하여 사용하는 경우 (예 : 로그인 정보) 사용하면 좋다. 

 

//정의

import React from "react";

export const testContext = React.createContext({
  value1 : "test",
  value2 : 100,
  ....
});


//사용

import { useContext } from "react";
import {testContext } from ...;


const { value1 } = useContext(testContext);
const { value2 } = useContext(testContext);

 

만일 값을 바꾸고 싶을 경우,  Provider 를 이용해 값을 배정한다.

import { TestContext } from "...";

...

<TestContext.Provider value = { 배정값1, 배정값2 } />

...