React Context 사용해보기

 

 

 

컴포넌트의 구조가 깊게 얽혀 있다면... props 유지보수가 어렵게 된다.

이때, Context를 사용한다.

회사에서 여러 프로젝트에 쓰인 리액트 소스를 보니 userSession을 Context 반복작업을 해놓은 것을 봤다.

 

예제이므로 간단하게 콤포넌트 구조를 보자면, 아래와 같다.

App => Page => Header, Content, Footer

 

예제는 3단 구조이나 실무에서는 이렇게 간단한 시스템은 거의 없다.

 

1. 우선 Context를 js 파일하나 만들어 선언한다.

import { createContext } from 'react';

export const UserContext = createContext(null);

 

2. App.js 에서 작성한 UserContext를 불러온다.

유저정보를 db에서 불러와 저장하는 로직이 들어갈 수 있겠지.

import { useState } from "react";
import Page from "./component/Page";
import { UserContext } from "./context/UserContext";

function App() {

  return (
    <UserContext.Provider value={"사용자"}>    
      <Page/>
    </UserContext.Provider>      
  );
}

export default App;

 

3. 이제 깊숙한 하위 컴포넌트에서 저 "사용자"를 사용해본다.

Content.js

import React, { useContext } from 'react';

import { UserContext } from '../context/UserContext';

const Content = () => {
    
    const userName = useContext(UserContext);

    return (
        <div className='content'     >
            <h1>Content 페이지 Context 변수의 값 : {userName} </h1>
        </div>
    );
};

export default Content;

 

 

그리고 실행을 해보면.