Context API

📌 Context API

• 전역 상태 관리를 간편하게 할 수 있도록 도와주는 리액트의 내장 API
• context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공 가능
• Context: 전역 상태를 저장하고 제공.
• Provider: 상태를 제공하는 컴포넌트.
• Consumer: 상태를 소비하고 사용할 컴포넌트.

 

1. Context, 언제 쓸까?

전역 상태 관리: 컴포넌트안에서 전역적으로 공유해야 할 데이터가 있을 때

(e.g. 테마 설정, 언어 설정, 로그인 데이터, 사용자 인증 정보 등..)

 

props drilling 방지: 컴포넌트 뎁스가 많으면 props를 여러 레벨로 전달해야한다.(= props drilling) 이 때 context api를 사용하면 중간 컴포넌트를 거치지 않고 직접 접근 가능

⇒ 색상 데이터 red를 A2, B3_2 컴포넌트에서 쓰려면 중간의 A1, B1, B2 컴포넌트가 props를 전달해줘야한다. 

이 때 context api를 사용하면 굳이 A1, B1, B2를 거치지 않고 바로 직접 접근 가능!

 

 

동적 데이터: state가 자주 바뀌고 그에 따라 UI가 실시간으로 업데이트 되어야 하는 경우 

(e.g. 알림 상태, 장바구니 아이템 수 등,,)

이유는, Context를 사용하면 값이 변경될 때 해당 값을 사용하는 모든 컴포넌트가 자동으로 리렌더링 되기 때문에

데이터가 바뀌면 UI가 바로 바로 업데이트 됨!

 

 

2. Context, 어떻게 쓸까?

사용자 정보(이름, 나이)를 전역적으로 관리하는 context를 만들어
props없이 하위 컴포넌트에서 사용자 정보를 수정 가능한지 확인해보기..!

 

 

 

CreateContext로 Context 생성 (전역 상태를 저장하고 제공)

// UserContext 파일

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

const UserContext = React.createContext();  // 1️⃣ 

const UserProvider = ({ children }) => {  // 2️⃣ 
    const [user, setUser] = useState({ name: 'Alice', age: 25 }); // 3️⃣

    return (    // 4️⃣
    <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );   
};

export { UserContext, UserProvider };  // 5️⃣

1️⃣ CreateContext를 사용해 사용자 정보를 저장할 UserContext를 생성한다

2️⃣ 1번의 UserContext를 사용할 수 있도록 Provider 컴포넌트를 정의 해준다. (children은 Provider로 감싼 모든 자식 컴포넌트)

3️⃣ useState를 사용해 user의 상태와 이 상태를 업데이트하는 setUser 함수를 정의 해준다. ( {} 안의 사용자 정보는 초기값임 )

4️⃣ UserContext.Provider: 생성한 context의 provider 반환

value={{ user, setUser }}: value라는 props로 { user, setUser } 를 전달해 자식 컴포넌트에서 3번의 함수를 사용할 수 있도록.

{children}: 2번에서 설명한 children을 렌더링. (자식 컴포넌트에서 context의 값을 접근할 수 있게)

 5️⃣ export해서 내보내기

 

 

 

Provider (상태를 제공하는 컴포넌트 적용하기)

// index 파일

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { UserProvider } from './UserContext';

ReactDOM.render(
   <UserProvider>
        <App />
    </UserProvider>,
    document.getElementById('root')
);

App의 최상위 컴포넌트에서 위에서 정의한 UserProvider로 감싸준다.

 

 

 

Consumer (상태를 소비하고 사용할 컴포넌트 만들기)

// UserProfile 파일

import React, { useContext } from 'react';  
// useContext라는 리액트 훅 import (Context API에서 제공하는 데이터를 쉽게 가져올 수 있게 해줌)
import { UserContext } from './UserContext';

const UserProfile = () => {
    const { user, setUser } = useContext(UserContext); 
    // useContext 훅을 사용해 context값을 가져온다.
    // 전역으로 관리되는 사용자 정보에 접근 가능

    const changeName = () => {
        setUser({ ...user, name: 'Bob' });  
    // 기존 사용자 정보(user)를 복사하고, 이름만 변경해 새로운 객체 생성.(리렌더링)
    };

    return (
    <div>
            <h1>사용자 프로필</h1>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={changeName}>이름 바꾸기</button>
        </div>
    );
};

export default UserProfile;

UseContext 훅을 사용해 데이터에 접근하는 사용자의 프로필 컴포넌트를 만든다. 

(예시용이니 간단하게 사용자 이름, 나이를 표시하고 이름 바꾸기 버튼을 클릭하면 사용자 이름이 바뀌도록 만들어 둠)

 

// App파일

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

const App = () => {
    return (
    <div>
            <UserProfile />
        </div>
    );
};

export default App;

App파일에서 위에서 만든 UserProfile 컴포넌트를 사용해주면 끝!

 

 

실행해보면

props를 전달하지 않고 전역으로 제공하는 사용자 정보에 쉽게 접근하고, 수정할 수 있는 것을 확인할 수 있다.