React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공
-> 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지할 수 있음
props drilling
은 React 컴포넌트 구조에서 하위 컴포넌트로 데이터를 전달하기 위해 상위 컴포넌트를 거치는 것을 의미한다. 이는 컴포넌트 구조가 깊어지면서 코드가 복잡해지고 유지보수가 어려워지는 문제를 유발한다.
Context API는 이러한 문제점을 해결하기 위한 방법 중 하나이다.
Provider
는 value prop을 통해 데이터를 전달한다.
Consumer
는 함수형 컴포넌트 또는 클래스 컴포넌트를 작성할 수 있다.
Context를 사용하는 컴포넌트는 Consumer를 이용해 데이터를 사용하거나, useContext Hook을 사용하여 데이터를 가져올 수 있다.
import React, { createContext } from "react";
// createContexts(초기값) : Context 생성
const UserContext = createContext();
export default UserContext;
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;
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;
처음 실행한 화면이다.
'개인 정보 출력' 버튼을 클릭하면 개인 정보로 세팅해 놓은 텍스트가 출력된다.
'개인 정보 숨기기' 버튼을 클릭하면 다시 개인 정보가 숨겨진다.