[React] ContextAPI

Main·2023년 7월 10일
0

React

목록 보기
2/31
post-thumbnail

ContextAPI ?

ContextAPI는 리액트의 내장 기능으로, 컴포넌트 끼리 값을 쉽게 공유할 수 있게 해주며, Props Driling을 방지한다. 주로 전역 상태를 관리할때 사용된다.

ContextAPI 사용방법

Context를 사용하기 위해서는 Context를 생성해야한다.
Context는 createContext를 이용하여 생성할 수 있다.
createContext 안에는 초기값을 넣어주면 된다.

import { createContext } from "react";

exprot const userContext = createContext({ user:"test" });

Consumner은 Context를 구독하는 컴포넌트이다.
Consumer를 값을 전달해줄 컴포넌트에 감싸준다.
Consumer은 콜백함수 형태로 context에서 정의한 값을 가져올 수 있다.

import { useState } from "react";
import { createContext } from "react";

export const userContext = createContext({user:"test"});

function App() {
  const [user, setUser] = useState("");
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const onClickSubmit = (e) => {
    e.preventDefault();
    if (id === "test" && password === "1234") {
      setUser("test");
    }
  };
  return (
    <UserContext.Consumer>
    {(value)=>(
    <>
        <form onSubmit={onClickSubmit}>
    	<p>현재 아이디 : {value.user}</p>
        <input
          type="text"
          value={id}
          placeholder="아이디"
          onChange={(e) => setId(e.target.value)}
        />
        <input
          type="password"
          value={password}
          placeholder="비밀번호"
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">로그인</button>
      </form>
</>
  	)}

    </UserContext.Consumer>
  );
}

export default App;

자식 컴포넌트에 값을 전달하기 위해서는 Provider를 사용해야한다.
Provider는 컴포넌트 계층 구조에서 Context 객체를 전달하는 역할을 한다.
Provider를 이용하여 Context를 사용할 컴포넌트를 감싸준 후 value에 전역으로 관리할 값들을 넣어준다.

import { useState, createContext } from "react";
import Main from "./Main";
export const UserContext = createContext({ user: "test" });

function App() {
  const [user, setUser] = useState("");
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const onClickSubmit = (e) => {
    e.preventDefault();
    if (id === "test" && password === "1234") {
      setUser("test");
    }
  };
  return (
    <>
      {user ? (
        <UserContext.Provider value={{ user }}>
          <Main />
        </UserContext.Provider>
      ) : (
        <UserContext.Consumer>
          {(userInfo) => (
            <div>
              <p>초기 아이디 : {userInfo.user}</p>
              <form onSubmit={onClickSubmit}>
                <input
                  type="text"
                  value={id}
                  placeholder="아이디"
                  onChange={(e) => setId(e.target.value)}
                />
                <input
                  type="password"
                  value={password}
                  placeholder="비밀번호"
                  onChange={(e) => setPassword(e.target.value)}
                />
                <button type="submit">로그인</button>
              </form>
            </div>
          )}
        </UserContext.Consumer>
      )}
    </>
  );
}

export default App;

Main 컴포넌트

import React, { useContext } from 'react'
import UserContext from './context/usercontext';

export default function Main() {
  const {user} = useContext(UserContext);
  return (
    <div>{user}님 환영합니다!</div>
  )
}

ContextAPI 단점

  • Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 되기 때문에 불필요한 렌더링이 발생하여 성능 저하의 문제가 나타날 수 있다.
  • Context API는 상태 관리 도구가 아니며, 상태 관리 자체는 직접 관리해야 한다.

정리

  • Context.Provider는 컴포넌트 계층 구조에서 Context 객체를 전달하는 역할을 한다. Provider를 사용하여 Context를 구독하는 모든 하위 컴포넌트들이 Provider가 제공하는 값을 사용할 수 있게 된다.
  • Context.Consumer는 Context를 구독하는 컴포넌트입니다. Consumer를 사용하여 Provider에서 전달받은 Context 값을 사용할 수 있습니다. Consumer는 Provider로부터 값을 받아올 때 콜백 함수를 사용합니다. 이 콜백 함수의 인자로 전달되는 값은 Provider에서 전달한 Context 값이 된다.
  • Provider는 Context 값을 제공하고 Consumer는 해당 값을 사용하는 역할을 하며, 이 둘을 결합하여 props를 사용하지 않고도 컴포넌트 트리의 어디에서든 Context 값을 사용할 수 있다.
    단, 이는 전역 공간을 사용하는것이기 때문에 반드시 필요한 데이터가 아니라면 사용을 최소화 하는것이 좋다.
profile
함께 개선하는 개발자

0개의 댓글