1. Context
React를 사용하면서 아무래도 컴포넌트 단위로 잘게 쪼개려고 하다보니 Prop Drilling이 자주 발생한다. 이로 인해 작성해야 하는 코드도 늘어나게 되고, 혼란만 가중시키게 되며 여간 불편한게 아니다. 이를 해결하기 위해 여러 상태관리 라이브러리(redux, recoil, zustand…)들이 존재하지만 라이브러리를 사용하지 않고 React를 통해 가볍게 처리할 수 있다. 바로 Context를 이용하는 방법이다.
2. 사용 방법
1. 상태관리를 하기 위해 필요한 저장소를 생성한다.
- src에 store폴더(이름은 상관없다)를 만들어 준다.
const CartContext = createContext(
{
// 필요한 초기 세팅
item: []
}
)이런식으로 말그대로 저장소를 생성하면 된다.
2. 위에서 생성한 저장소를 이용할 컴포넌트를 wrapping한다.
<CartContext.provider value={{item : []}}>
{/* 이 안에는 필요한 컴포넌트 작성하면 된다. */}
</CartContext.provider>여기서 value값을 반드시 작성해서 초기값을 세팅 해 두어야 한다.
Q. 그럼 왜 초기 createContext할 때 초기 세팅을 해주나요?
그 이유는 vsc의 자동완성기능을 위해서 미리 어떤 값을 사용할 것이다 얘기를 해주는 것이다.
3. 이제 저장해둔 value를 사용해보자
const cartCtx = useContext(CartContext) // 사용방법 cartCtx.item
이런식으로 사용해주면 된다.
3. state와 결합한 실제 사용 예시
import React, { createContext, useState, useContext } from 'react';
// 1. Context 생성
const CartContext = createContext({
items: [],
addItem: () => {},
removeItem: () => {},
});
export const CartProvider = ({ children }) => {
// 2. useState로 상태 관리
const [items, setItems] = useState([]);
const addItem = (item) => {
setItems((prevItems) => [...prevItems, item]);
};
const removeItem = (id) => {
setItems((prevItems) => prevItems.filter(item => item.id !== id));
};
// 3. Context Provider를 통해 하위 컴포넌트에 상태 및 함수 전달
return (
<CartContext.Provider value={{ items, addItem, removeItem }}>
{children}
</CartContext.Provider>
);
};
// 4. Context 사용 예시 컴포넌트
export const Cart = () => {
const { items, addItem, removeItem } = useContext(CartContext);
return (
<div>
<h2>Cart Items</h2>
<ul>
{items.map((item) => (
<li key={item.id}>
{item.name} <button onClick={() => removeItem(item.id)}>Remove</button>
</li>
))}
</ul>
<button onClick={() => addItem({ id: Date.now(), name: 'New Item' })}>
Add Item
</button>
</div>
);
};
// App 컴포넌트
import React from 'react';
import { CartProvider, Cart } from './CartContext';
const App = () => {
return (
<CartProvider>
<Cart />
</CartProvider>
);
};
export default App;이런식으로 useState와 결합하면 Context value값 수정 및 리렌더링까지 깔끔하게 처리된다.