[React] useContext 훅 사용해보기

Mincho·2023년 2월 25일

React

목록 보기

4/14

🔴 useContext 사용이유

리액트에서 작업 할 때, 특히 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨줄 때 props를 이용하곤 한다. 하지만 대규모 프로젝트 같은 경우 props로 값을 넘겨줄때 여러개의 컴포넌트를 통해 쓸데없이 넘겨주게 되면 코드의 복잡성이 증가하고 까다로운 작업이 될 수 있다. 이에 대해 useContext를 통해 간단한 작업을 할 수 있다.

🟠 예제코드

😃 context 만들어주기

import React from "react";

const TextContext = React.createContext({});

export default TextContext;

위와 같이 React.createContext를 통해 Context컴포넌트를 하나 만들어 준다.

import TextContext from "./text-context";

const TextProvider = (props) => {
  return (
    <TextContext.Provider value={{ id: 1, name: "Hyun", isState: false }}>
      {props.children}
    </TextContext.Provider>
  );
};

export default TextProvider;

만들어준 TextContext 컴포넌트를 통해 Provider로 접근하고 value에는 모든 컴포넌트에서 사용하고 싶은 값들을 넣어준다.그리고 {props.children}을 통해 감싸줄 컴포넌트를 살려준다.

😆 context 사용해보기

import "./App.css";
import { useEffect, useState } from "react";
import TextProvider from "./components/store/TextProvider";
import Test from "./components/ContextTest";

function App() {
  const [data, setData] = useState(0);

  useEffect(() => {
    console.log(data);
  }, [data]);

  function plusHandler() {
    setData(data + 1);
  }

  function minusHandler() {
    setData(data - 1);
  }

  return (
    <TextProvider>
      <>
        <div>{data}</div>
        <input type="button" value="+1해주기" onClick={plusHandler} />
        <input type="button" value="-해주기" onClick={minusHandler} />
      </>
      <Test />
    </TextProvider>
  );
}

export default App;

이전 글에 사용했던 코드의 App.js에서 return되는 컴포넌트들을 TextProvider로 감싸준다!!!(중요)

import { useContext } from "react";
import ReserveData from "./ReserveData";
import TextContext from "./store/text-context";
import Container from "./UI/Container";

const Test = () => {
  const dataCtx = useContext(TextContext);
  return (
    <Container>
      <div>name : {dataCtx.name}</div>
      <ReserveData />
    </Container>
  );
};

export default Test;

App컴포넌트의 하위 컴포넌트인 Test컴포넌트에 useContext([만들어준 context])를 넣고 변수에 담아준다. 이 변수를 통해 컨텍스트 값에 접근 할 수 있다.

import React, { useContext, useState } from "react";
import TextContext from "./store/text-context";
import styles from "./ReserveData.module.css";

const ReserveData = () => {
  const textCtx = useContext(TextContext);
  const [isTrue, setIsTrue] = useState(textCtx.isState);

  const booleanHandler = () => {
    setIsTrue(!isTrue);
  };

  return (
    <div>
      <input
        value={isTrue ? "True" : "False"}
        type="button"
        onClick={booleanHandler}
      />
    </div>
  );
};

export default ReserveData;

Test컴포넌트 아래에 ReserveData컴포넌트다. Test와 같이 컨텍스트를 사용하였고, 컨텍스트에 있는 isState 값을 가져왔다.
가져온 값에 대해서 button을 클릭하면 false => true / true => false가 되도록 이벤트를 넣어 주었다!