Context

모든 컴포넌트에서 공유할 수 있는 상태를 저장하는 방법

Context 의 필요성

Context 는 모든 컴포넌트에서 상태를 공유하기 위해 필요합니다. - 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달해야하는 경우 - 컴포넌트 2계층 이상으로 데이터를 전달해야하는 경우

상태를 관리하다 보면 부모 컴포넌트에서 자식 컴포넌트 단방향으로만 데이터를 전달하는 경우 외에도 자식에서 부모로, 또는 컴포넌트 여러 계층을 넘어 데이터를 전달해야하는 경우가 있습니다.

이를 구현하기 위해서는, Global State 를 사용할 수 있습니다.

그러나 이러한 방법은 다음과 같은 단점이 있습니다.

•

Global State를 사용하면 코드가 복잡해질 수 있습니다. 또한, Global State 에 대한 접근을 제어하기가 어렵습니다.

•

부모-자식 관계를 사용하면 컴포넌트의 결합도가 높아질 수 있습니다. 또한, 부모 컴포넌트가 변경되면 자식 컴포넌트도 변경해야 합니다.

하지만, React Context 를 도입하면 이러한 단점을 해결할 수 있습니다. React Context 를 사용하면 다음과 같은 장점이 있습니다.

•

데이터를 쉽게 공유할 수 있습니다.

•

코드가 간결해집니다.

•

유지 관리가 쉽습니다.

Context vs Props

일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는, props 사용합니다. 그런데, 이렇게 단순히 1계층 정도의 관계에서는 props 사용하는 것이 가장 간단하겠지만, 2계층, 3계층.. .N계층 이상으로 컴포넌트간의 데이터 전달이 필요하다면, 계속적으로 props 를 내려주게 되어 코드가 복잡해지고 유지보수성이 떨어집니다.

이러한 점을 보완하기 위한 개념이 바로 Context 입니다.

컨텍스트를 사용하면, 상위 컴포넌트에서 한 계층씩 계속적으로 props 를 내릴 필요없이 모든 컴포넌트에서 바로 데이터를 전달 받을 수 있습니다. 이렇게 하면, props 를 반복적으로 내릴 필요없어 코드도 간결해지고 유지보수성도 올라갑니다.

Context 사용 목적

컨텍스트는 모든 컴포넌트에서 데이터를 전달받을 수 있는 개념입니다. 그렇기 때문에, 여러 컴포넌트에서 공통적을 사용하거나 자주 사용해야하는 데이터에 적합합니다.

예를 들면, 로그인 여부와 로그인 정보 등이 있겠습니다. 또한, 페이지 이동을 여러 번 하면서 사용자로부터 조금씩 여러 데이터를 입력받는 UI 의 경우에도, 매번 페이지 이동하면서 파라미터를 넘길 필요 없이 컨텍스트를 이용해도 좋겠습니다.

Context 주요 개념

Provider

: Context를 제공하는 컴포넌트입니다.

Consumer

: Context에서 데이터를 가져오는 컴포넌트입니다.

Context Value

: Context에서 제공하는 데이터입니다.

React Context 적용과정

React Context 를 사용하기 위해서는 다음과 같은 단계로 진행합니다.

Context 를 생성합니다.

Provider 컴포넌트를 정의합니다.

Context 를 전달받아 사용할 컴포넌트들을 정의된 Provider 를 통해 지정합니다.

Consumer 컴포넌트 또는 useContext 사용하여 Context 에서 데이터를 가져옵니다.

문법

•

Context 생성

•

Provider 컴포넌트 정의

•

Provider 적용

•

Consumer 컴포넌트 사용

Context 생성

•

기본 문법

import { createContext } from 'react';
const 컨텍스트이름 = createContext(기본값);
JavaScript
복사

import React from 'react';
const 컨텍스트이름 = React.createContext(기본값);
JavaScript
복사

•

MyContext.jsx

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;
JavaScript
복사

Provider 컴포넌트 정의

Provider 컴포넌트는 React Context를 제공하는 역할을 합니다. Provider 컴포넌트는 다음과 같은 속성을 가지고 있습니다.

•

기본 문법

<MyContext.Provider value={ {값1, 값2, ...} }>
      {children}
</MyContext.Provider>
JavaScript
복사

•

MyProvider.jsx

// MyProvider.js

import React, { useState } from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const [myState, setMyState] = useState('Hello Context~!');

  return (
    <MyContext.Provider value={{ myState, setMyState }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;
JavaScript
복사

value 속성을 통해 여러 컴포넌트에서 공유할 데이터를 지정합니다.

여기서 지정한 value 를 Consumer 컴포넌트에서 전달받아 사용할 수 있습니다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 됩니다.

Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다. 값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다. Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시됩니다.
- https://ko.legacy.reactjs.org/docs/context.html

Provider 적용

Context 로 부터 데이터를 전달받을 컴포넌트를 지정합니다.

•

기본 문법

// App.js
import React from 'react';
import { 컴포넌트이름1 } from './컴포넌트파일이름1';
import { 컴포넌트이름2 } from './컴포넌트파일이름2';
import Provider이름 from './Provider파일이름';

const App = () => {
  return (
    <Provider이름>          {/* Context 를 제공받을 컴포넌트들을 감싸줍니다. */}
      <div>
        <컴포넌트이름1 />   {/* Context 를 제공받을 수 있게 됩니다. */}
        <컴포넌트이름2 />   {/* Context 를 제공받을 수 있게 됩니다. */}
      </div>
    </Provider이름>
  );
};

export default App;
JavaScript
복사

•

App.js

// App.js

import React from 'react';
import MyClassComponent from './MyClassComponent';
import MyFunctionalComponent from './MyFunctionalComponent';
import MyProvider from '.contexts/MyProvider';

const App = () => {
  return (
    <MyProvider>
      <div>
        <MyClassComponent />
        <MyFunctionalComponent />
      </div>
    </MyProvider>
  );
};

export default App;
JavaScript
복사

Consumer 컴포넌트 사용

•

클래스형 컴포넌트에서 Consumer 사용

클래스 컴포넌트에서는 컴포넌트 기반으로 Consumer를 사용합니다.

import 컨텍스트이름 from './컨텍스트파일이름';


class 클래스컴포넌트 extends React.Component {
  render() {
			return (
				<컨텍스트이름.Consumer>
				    {({ 값1, 값2( ) }) => (
				      <div>
				        <p>{값1}</p>
				        <button onClick={() => 값2('변경할 값')}>컨텍스트 변경</button>
				      </div>
				    )}
				</컨텍스트이름.Consumer>
			);
  }
}

export default 클래스컴포넌트;
JavaScript
복사

•

함수형 컴포넌트에서 Consumer 사용

함수형 컴포넌트에서는 useContext() Hook으로 Consumer를 사용합니다.

import React, { useContext } from 'react';
import 컨텍스트이름 from './컨텍스트파일이름';

// 함수 컴포넌트에서 useContext 사용
const 함수형컴포넌트 = () => {
  const { 값1, 값2 } = useContext(컨텍스트이름);

  return (
    <div>
        <p>{값1}</p>
        <button onClick={() => 값2('변경할 값')}>컨텍스트 변경</button>
    </div>
  );
};

export default 함수형컴포넌트;
JavaScript
복사

클래스형 컴포넌트에서 Consumer 사용

import React from 'react';
import MyContext from './MyContext';

// 클래스 컴포넌트에서 Consumer 사용
class MyClassComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {({ myState, setMyState }) => (
          <div>
            <p>{myState}</p>
            <button onClick={() => setMyState('Updated!')}>Update State</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

export default MyClassComponent;
JavaScript
복사

함수형 컴포넌트에서 Consumer 사용

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

// 함수 컴포넌트에서 useContext 사용
const MyFunctionalComponent = () => {
  const { myState, setMyState } = useContext(MyContext);

  return (
    <div>
      <p>{myState}</p>
      <button onClick={() => setMyState('Updated!')}>Update State</button>
    </div>
  );
};

export default MyFunctionalComponent;
JavaScript
복사

Context 출력이름 설정 - displayName

export const MyContext = React.createContext();
MyContext.displayName = 'MyContextName'
JavaScript
복사

브라우저의 React 개발도구에서 랜더링된 컴포넌트 이름을 지정할 수 있습니다.

예시 코드

Context 를 사용하여 로그인 여부를 처리는 예시코드를 살펴봅니다.

로그인이 되지 않았을 때

•

Context 의 로그인 여부 데이터(isLogin)가 false 일 때

로그인 되었을 때 화면

•

Context 의 로그인 여부 데이터(isLogin)가 true 일 때

설치

•

React 앱 생성

npx create-react-app context-app
Shell
복사

•

router 라이브러리 설치

npm install react-router-dom
Shell
복사

프로젝트 구조

작업파일

•

./contexts/LoginContextProvider.jsx

•

./contexts/LoginContextConsumer.jsx

•

./components/Header/Header.jsx

•

./components/Header/Header.css

•

./pages/Home.jsx

•

./pages/About.jsx

•

./pages/Login.jsx

•

./pages/Join.jsx

•

./pages/User.jsx

•

App.js

•

index.css

•

App.css

./contexts/LoginContextProvider.jsx

import React, { useEffect, useState } from 'react';

export const LoginContext = React.createContext();
LoginContext.displayName = 'LoginContextName'

const LoginContextProvider = ({ children }) => {
  const [isLogin, setIsLogin] = useState(false);

  const logout = () => {
    setIsLogin(false)
  }

  useEffect(() => {

    setTimeout(() => {
      setIsLogin(true);
    }, 3000);
    
  }, []);

  return (
    <LoginContext.Provider value={ {isLogin, logout} }>
      {children}
    </LoginContext.Provider>
  );
};

export default LoginContextProvider;
JavaScript
복사

./contexts/LoginContextConsumer.jsx

import React, { useContext } from 'react';
import { LoginContext } from './LoginContextProvider';

const LoginContextConsumer = ({ children }) => {
  const { isLogin } = useContext(LoginContext);
  
  return (
    <div>
      <h3>로그인 여부: {isLogin ? '로그인' : '로그아웃'}</h3>
      {children}
    </div>
  );
};

export default LoginContextConsumer;
JavaScript
복사

./components/Header/Header.jsx

import React, { useContext } from 'react';
import { Link } from 'react-router-dom'
import './Header.css'
import { LoginContext } from '../../contexts/LoginContextProvider';

const Header = () => {

    // ✅ isLogin   : 로그인 여부 - Y(true), N(false)
    // ✅ logout()  : 로그아웃 함수 - setIsLogin(false)
    const { isLogin, logout } = useContext(LoginContext);
    return (
      <header>
          <div className="logo">
              <Link to="/">
                <img src="https://i.imgur.com/fzADqJo.png" alt="logo" className='logo' />
              </Link>
          </div>
          <div className="util">
              <ul>
                {/* 로그인 여부에 따라 조건부 랜더링 */}
                { !isLogin ? 
                  <>
                    <li><Link to="/login">로그인</Link></li>
                    <li><Link to="/join">회원가입</Link></li>
                    <li><Link to="/about">소개</Link></li>
                  </>
                :
                  <>
                    <li><Link to="/user">마이페이지</Link></li>
                    <li><button className='link' onClick={ () => logout() }>로그아웃</button></li>
                  </>
                }
              </ul>
          </div>
      </header>
  )
}

export default Header
JavaScript
복사

./components/Header/Header.css

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #000;
}

.logo {
    width: 80px;
}

.util ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 12px;
}

.util ul li {

}
CSS
복사

./pages/Home.jsx

import React from 'react';
import LoginContextConsumer from '../contexts/LoginContextConsumer';
import Header from '../components/Header/Header';

const Home = () => {

    return (
        <>
            <Header />
            <div className='container'>
                <h1>Home</h1>
                <hr/>
                <h2>메인 페이지</h2>
                <LoginContextConsumer />
            </div>
        </>
    )
}

export default Home
JavaScript
복사

./pages/About.jsx

import React from 'react';
import LoginContextConsumer from '../contexts/LoginContextConsumer';
import Header from '../components/Header/Header';

const About = () => {

    return (
        <>
            <Header />
            <div className='container'>
                <h1>About</h1>
                <hr/>
                <h2>소개 페이지</h2>
                <LoginContextConsumer />
            </div>
        </>
    )
}

export default About
JavaScript
복사

./pages/Login.jsx

import React from 'react'
import Header from '../components/Header/Header'
import LoginContextConsumer from '../contexts/LoginContextConsumer'

const Login = () => {
  return (
    <>
        <Header />
        <div className='container'>
            <h1>Login</h1>
            <hr/>
            <h2>로그인 페이지</h2>
            <LoginContextConsumer />
        </div>
    </>
  )
}

export default Login
JavaScript
복사

./pages/Join.jsx

import React from 'react'
import Header from '../components/Header/Header'
import LoginContextConsumer from '../contexts/LoginContextConsumer'

const Join = () => {
  return (
    <>
        <Header />
        <div className='container'>
            <h1>Join</h1>
            <hr/>
            <h2>회원가입 페이지</h2>
            <LoginContextConsumer />
        </div>
    </>
  )
}

export default Join
JavaScript
복사

./pages/User.jsx

import React from 'react';
import LoginContextConsumer from '../contexts/LoginContextConsumer';
import Header from '../components/Header/Header';

const Home = () => {

    return (
        <>
            <Header />
            <div className='container'>
                <h1>User</h1>
                <hr/>
                <h2>마이 페이지</h2>
                <LoginContextConsumer />
            </div>
        </>
    )
}

export default Home
JavaScript
복사

App.js

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';

import LoginContextProvider from './contexts/LoginContextProvider';
import About from './pages/About';
import Home from './pages/Home';
import User from './pages/User';
import Login from './pages/Login';
import Join from './pages/Join';

const App = () => {
  return (
    <BrowserRouter>
      <LoginContextProvider>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/join" element={<Join />} />
          <Route path="/user" element={<User />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </LoginContextProvider>
    </BrowserRouter>
  );
};

export default App;
JavaScript
복사

index.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans', sans-serif;
  font-size: var(--font-size-main);
}
ul { list-style-type: none; }
a { text-decoration: none; color: black; }
button { cursor: pointer; }
.link { background-color: transparent; color: black; border: none; font-size: var(--font-size-main); }


:root {
  --font-size-main : 20px;
}
CSS
복사

App.css

.container {
  width: 1024px;
  margin: 50px auto;
}

hr { margin-bottom: 50px; }
CSS
복사