React - context api

📌 목차

• Introduction
• context api
• Conclusion

📌 Introduction

안녕하세요. 오늘은 context api를 사용해서 전역에서 상태 값을 관리하는 법에 대해서 알아보겠습니다.

📌 context api

context api를 사용하기에 앞서 두가지 hook을 알야합니다.

1. createContext
2. useContext

입니다.

createContext는 말그대로 context를 만들어줍니다.

const MyContext = createContext("defaultValue");

첫번째 인자로 초기 값을 설정할 수 있습니다.

useContext는 createContext로 만든 값을 사용하게 됩니다.

const text = useContext(MyContext);

그럼 이제 간단한 전역으로 만든 context api를 한번 볼까요?

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

const MyContext = createContext("defaultValue");

function Child() {
  // context를 사용하게 되요.
  const text = useContext(MyContext);
  return <div>HI? {text}</div>;
}

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

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

function ContextSample() {
  const [value, setValue] = useState(true);

  const onClick = () => {
    setValue(!value);
  };

  return (
    // ⭐️ 바로 이부분에서 전역 value 값을 전달을 해줄 수 있습니다.
    <MyContext.Provider value={value ? "GOOD" : "BAD"}>
      <GrandParent text="GOOD" />
      <button onClick={onClick}>CLICK</button>
    </MyContext.Provider>
  );
}

export default ContextSample;

📌 Conclusion

이렇게 한번 context api에 대해서 알아보았습니다. context api로는 복잡하지 않은 app은 redux를 쓰지 않고도 구현을 한다고 하네요. 그만큼 많이 강력하기도 하지만 두가지 대안이 있다는 것이 vuex에 비해 아쉽습니다. 그럼 다음 포스팅에서 만나요 안녕~