Context API를 사용한 전역 값 관리

Taegwan·2023년 1월 5일
0

react

목록 보기
1/1

Context API를 사용하여 전역 값을 관리하는 방법을 알아보자.

먼저 ContextSample.js를 생성하여 아래 처럼 작성해 보자.

import React from "react";

function Child({text}) {
  return <div>안녕하세요? {text}</div>;
}

function Parent({ text }) {
  return <Child text={text} />;
}

function GrandParent({ text }) {
  return <Parent text={text} />;
}

const ContextSample = () => {
  return <GrandParent text="GOOD" />;
};

export default ContextSample;

내가 원하는건 위코드 ContextSample에서 Child로 바로 주는 것이다.

이때 사용하는것이 Context이다. 그럼 아래처럼 수정해보자.

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

const MyContext = createContext("defaultValue");

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>;
}

function Parent({ text }) {
  return <Child text={text} />;
}

function GrandParent({ text }) {
  return <Parent text={text} />;
}

const ContextSample = () => {
  return <GrandParent text="GOOD" />;
};

export default ContextSample;

위 코드에서는 createContext, useContext를 사용하였다

const MyContext = createContext("defaultValue");

MyContext를 만들어서 createContext함수를 사용하여 Context에서 사용할 기본값인 defaultValue를 넣는다.

function Child() {
	const text = useContext(MyContext);
	return <div>안녕하세요? {text}</div>;
}

그다음 Child에서는 MyContext에 있는 값인 defaultValue를 불러와 사용한다.

useContext는 Context에 있는 값을 읽어와서 사용하게해주는 React에 내장되어있는 Hook이다.

우리는 아직 ContextValue를 지정해주지 않아서 defaultValue가 나타난다

만약 MyContext값을 지정해주고 싶다면 MyContext를 사용하려는 맨위에 있는곳 ContextSample에서 Provider라는 컴포넌트를 사용해야한다.

아래 코드처럼 수정해보자.

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

const MyContext = createContext("defaultValue");

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>;
}

function Parent() {
  return <Child />;
}

function GrandParent() {
  return <Parent />;
}

const ContextSample = () => {
  return (
    <MyContext.Provider value="GOOD">
      <GrandParent />
    </MyContext.Provider>
  );
};

export default ContextSample;

GrandParent 컴포넌트를 MyContext.Provider컴포넌트를 감싸고 value="GOOD"으로 설정해 주었다.

그다음 Parent, GrandParent에 text를 삭제해 주었다.

아래 결과를 보자

구조는 MyContext.Provider를 통해서 value="GOOD"으로 설정해주고
const MyContext = createContext("defaultValue")에 값이 설정되어서 Child컴포넌트에서

useContext를 사용해서 MyContext에 있는 값을 그대로 불러온 후 const text = useContext(MyContext) 를 사용할수있다.

그리고 const MyContext = createContext("defaultValue")는 다른파일에서 작성후 불러와서 사용할 수 있다.

다시 정리해 보면 Context를 만들때는 const MyContext = createContext("defaultValue") 이렇게 createContext()를 이용하여 만들며 createContext("defaultValue")의 "defaultValue"는 기본값이다.

이 기본값은 만약에 MyContext.Provider컴포넌트를 사용하지 않았을때의 기본적인 값이다.

만약 그 값을 직접 설정하고 싶다면

<MyContext.Provider value="GOOD">
      <GrandParent />
</MyContext.Provider>

위 코드처럼 MyContext.Provider컴포넌트를 사용해서 value를 지정해주면된다.

이 value의 값은 유동적으로 변경이 가능하다. 아래 코드처럼 수정해 보자

import React, { createContext, useContext, useState } from "react";

const MyContext = createContext("defaultValue");

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>;
}

function Parent() {
  return <Child />;
}

function GrandParent() {
  return <Parent />;
}

const ContextSample = () => {
  const [value, setValue] = useState(true);
  return (
    <MyContext.Provider value={value ? "GOOD" : "BAD"}>
      <GrandParent />
      <button onClick={() => setValue(!value)}>CLICK ME</button>
    </MyContext.Provider>
  );
};

export default ContextSample;


useState를 사용하여 버튼 클릭시 true면 GOOD, false면 BAD가 나타 날 것이다.

이렇게 Context를 이용하여 컴포넌트 깊은곳에서 직접 호출하여 사용할 수 있다.

참고 : 패스트캠퍼스 올인원패키지 리엑트

profile
React를 사용하는 Front-End 개발자입니다.

0개의 댓글