[리액트 스터디] useContext / useReducer

미아·2023년 2월 13일

REACT-STUDY

목록 보기

5/7

Context

리액트에서 context란 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능.
=> 꼭 전역적일 필요는 없고, context를 단순히 props로 전달하는 방식이 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달 하는 방법!

Props로만 데이터 전달한다면?

props drilling이라는 문제가 생긴다!

이를 해결하기 위해? 🙋‍♀️useContext의 활용!

=> Context API를 이용한다.
1️⃣ createContext()라는 함수를 불러옴(react 패키지 내의 함수, 즉 React import 필수!)
2️⃣ export 해준다.
3️⃣ 리턴문의 최상위 태그 바꿔주기 변수이름.Provider

export const DiaryStateContext = React.createContext();

.... return (
<DiaryStateContext.Provider value={data}>
)

=> value를 이런식으로 전달하면 태그 안의 모든 컴포넌트에서 사용가능

그럼 활용해보자!

App.js > FirstContext > SecondContext > ThirdContext로 이루어짐

App.js

FirstC.js

import React from "react";
import SecondContext from "./SecondContext";
import ThirdContext from "./ThirsContext";
// App.js에서 부른 부모
const FirstContext = ({ value }) => {
  return (
    <div>
      <SecondContext value={value} />
      <ThirdContext value={value} />
    </div>
  );
};

export default FirstContext;

SecondC.js

import React from "react";

const SecondContext = ({ value }) => {
  return <div>SecondContext {value}</div>;
};

export default SecondContext;

ThirdC.js

import React from "react";

const ThirdContext = ({ value }) => {
  return <div>ThirdContext {value}</div>;
};

export default ThirdContext;

=> 지금 경우엔 크게 안복잡해보이지만, 다양한 Props를 받는다면? 아주 복잡

Context API 이용!

App.js

import { createContext } from "react";
// 1️⃣ createContext 함수 사용, import 시켜줘야한다
export const MyContext = createContext();
function App() {
  return (
    <div className="App">
      <MyContext.Provider value="Hello Context!">
        <FirstContext />
      </MyContext.Provider>

FirstC.js

import React, { useContext } from "react";
import SecondContext from "./SecondContext";
import ThirdContext from "./ThirsContext";
// App.js에서 부른 부모
const FirstContext = () => {
  return (
    <div>
      <SecondContext />
      <ThirdContext />
    </div>
  );
};

export default FirstContext;

SecondC.js = props 전달 안함

import React from "react";

const SecondContext = () => {
  return <div>SecondContext</div>;
};

export default SecondContext;

ThirdC.js

import React, { useContext } from "react";
import { MyContext } from "./App";

const ThirdContext = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

export default ThirdContext;

=> 이런식으로 사용할 컴포넌트에서 useContext로 사용해주면된다.
https://velog.io/@gyeongmi_lee/%EA%B0%84%EB%8B%A8-%EC%9D%BC%EA%B8%B0%EC%9E%A5-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8A%B8%EB%A6%AC%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B3%B5%EA%B8%89%ED%95%98%EA%B8%B0-Context

=> 감정일기장에서 사용한 Context API!