Context API (23.09.08)

현·2023년 9월 8일

목록 보기

5/30

💡 Context API

React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공
-> 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지할 수 있음

💭 왜 props drilling을 방지해야 할까?

props drilling은 React 컴포넌트 구조에서 하위 컴포넌트로 데이터를 전달하기 위해 상위 컴포넌트를 거치는 것을 의미한다. 이는 컴포넌트 구조가 깊어지면서 코드가 복잡해지고 유지보수가 어려워지는 문제를 유발한다.

Context API는 이러한 문제점을 해결하기 위한 방법 중 하나이다.

📁 사용 방법

createContext() 함수로 Context 객체 생성
Context.Provider 컴포넌트로 하위 컴포넌트에게 데이터 전달

Provider는 value prop을 통해 데이터를 전달한다.
Consumer 컴포넌트로 Provider에서 전달한 데이터 사용

Consumer는 함수형 컴포넌트 또는 클래스 컴포넌트를 작성할 수 있다.
Context를 사용하는 컴포넌트는 Consumer를 이용해 데이터를 사용하거나, useContext Hook을 사용하여 데이터를 가져올 수 있다.

👀 코드로 살펴보기

🔎 UserContext.js

import React, { createContext } from "react";

// createContexts(초기값) : Context 생성
const UserContext = createContext();

export default UserContext;

🔎 R06_context_api.js

import React, { useState, useContext } from 'react';
import UserContext from '../contexts/UserContext';

const User = () => {

    // useContext(Context명) : 지정된 Context를 사용
    // -> 부모 컴포넌트에서 제공한 값을 꺼내 쓸 수 있다.
    const {user, temp} = useContext(UserContext); // user, temp
    // UserContext에서 user를 꺼내서 변수 user에 저장
    // UserContext에서 temp를 꺼내서 변수 temp에 저장

    console.log(user);
    console.log(temp);

    return(
        <ul>
            <li>{user.name}</li>
            <li>{user.email}</li>
        </ul>
    );
}

const Profile = () => {

    const [user, setUser] = useState(null);

    const print = () => {
        setUser({name:'김미영', email:'my-kim@kh.or.kr'});
    }

    const temp = '임시 변수';

    return(
        /* UserContext가 감싸고 있는 자식 컴포넌트에게
            Context API를 이용해서 user를 제공
        */
        <UserContext.Provider value={ {user, temp} }>
            <div>
                {/* 삼항 연산자를 이용한 컴포넌트 렌더링 제어(조건부 렌더링) */}
                {user != null ? (
                    <>
                        <User />
                        <button onClick={ () => { setUser(null); } }>개인 정보 숨기기</button>
                    </>
                ) : (
                    <button onClick={print}>개인 정보 출력</button>
                )}
            </div>
        </UserContext.Provider>
    );
}

export default Profile;

🔎 App.js

import './App.css';

import Ex1 from './components/Exam1';
import Ex2 from './components/Exam2';

import ContextApi from './components/R06_context_api';


function App() {

  return (

    <>
      {/* jsx 주석 */}
      <h1>Hello React!!!</h1>
  
      <div>리액트 배운다~</div>

      {/* R06_context_api */}
      <ContextApi />
    </>
  );
}

export default App;