[React] context API 사용 vs 미사용

사용하지 않은 예제

function App() {
	return (
    	<div>
        	<div>상단 메뉴</div>
            <Profile username="mike" />
            <div> 하단 메뉴 </div>
            </div>
    );
}

function Profile({username}) {
	return (
    	<div>
        <Greeting username={username}/>
        </div>
    );
}
function Greeting({username}) {
	return <p>{`${username}님 안녕하세요`}</p>;
}

Profile은 컴포넌트로 속성 값만을 전달하고 username을 사용하지 않음

 

 

 

사용한 예제

const UserContext = React.createContext("");
function App() {
  return (
    <div>
      <UserContext.Provider value="mike">
        <div>상단 메뉴 </div>
        <Profile />
        <div>하단 메뉴</div>
      </UserContext.Provider>
    </div>
  );
}

function Profile() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

function Greeting() {
  return (
    <UserContext.Consumer>
      {(username) => <p>{`${username}님 안녕하세요`}</p>}
    </UserContext.Consumer>
  );
}

UserContext.Provider 컴포넌트를 이용해서 데이터를 전달함

 

UserContext.Consumer 컴포넌트를 이용해서 데이터를 사용함

 

Consumer 컴포넌트는 데이터를 찾기 위해 상위로 올라가면서 가장 가까운 Provider 컴포넌트를 찾는다.

 

만약 최상위에 도달할 때까지 Provider 컴포넌트를 찾지 못한다면 기본값이 사용됨 

 

Provider 컴포넌트의 속성값이 변경되면 하위의 모든 Consumer 컴포넌트는 다시 렌더링 됨

 

만약 Profile 컴포넌트가 다시 렌더링되지 않도록 하기 위해선 React.memo를 사용해야함

 

즉 createContext를 값을 넘겨주기 위해 사용한 Provider가불필요하게 렌더링이 되고 

 

이를 막기위해 (최초의 렌더링 한번만) 서는 React.memo를 이용하라는 것.

 

createContext를 이용하면 그저 속성값만 전달해주는 component를 만들 필요는 없지만 계속 불필요하게 렌더링이 된다는 단점이 있고 이를 보완하기 위해 React.memo를 사용한다는 것.

 

콘텍스트 API 중첩해서 사용한 예

import logo from "./logo.svg";
import "./App.css";
import React, { Profiler } from "react";

const UserContext = React.createContext("");
const ThemeContext = React.createContext("dark");
function App() {
  return (
    <div>
      <ThemeContext.Provider value="light">
        <UserContext.Provider value="mike">
          <div> 상단 메뉴</div>
          <Profile />
          <div>하단 메뉴</div>
        </UserContext.Provider>
      </ThemeContext.Provider>
    </div>
  );
}
function Profile() {
  return (
    <div>
      <Greeting />
    </div>
  );
}
function Greeting() {
  return (
    <ThemeContext.Consumer>
      {(theme) => (
        <UserContext.Consumer>
          {(username) => (
            <p
              style={{ color: theme === "dark" ? "gray" : "green" }}
            >{`${username} 님 안녕하세요`}</p>
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}
export default App;