Context API
by 개발하는지호Context API
기본적으로 React에서 데이터를 전달하기 위해서는 Props를 통해 상위 컴포넌트에서 하위 컴포넌트로 전달하는 방식을 사용한다.
컴포넌트가 중첩된 정도가 2~3개 정도면 Props를 활용할 수도 있지만, 4~5개 이상 중첩된 구조일 경우에는 관리가 복잡해질 수 있다.
이처럼 컴포넌트가 4~5개 이상 중첩되어 Props를 전달하는 방식을 마치 드릴을 파고 내려가는 것 같다고 하여 Props Drilling 패턴이라고한다.
사용 방식
1. 우선 createContext()를 가져온다.
import { createContext } from "react";
export const TodoContext = createContext(); // Todos 데이터 제공 용도의 Context
export const TodoDispatchContext = createContext(); // Todos Dispatch() 제공 용도의 Context
2. 이제 이를 활용할 곳을 덮는다. 그리고 전역으로 사용할 객체를 넣는다.
<TodoContext.Provider value={todos}>
<TodoDispatchContext.Provider value={dispatch}>
{children}
</TodoDispatchContext.Provider>
</TodoContext.Provider>
3. 사용하고자하는 위치에서 useContext를 import 한다.
import { useContext} from "react";
4. 사용 하고자하는 Context를 useContext() 안에 담고, 읽기 쉬운 이름으로 추상화 한다.
// 읽기 쉬운 이름으로 추상화
export const useTodos = () => useContext(TodoContext);
export const useTodosDispatch = () => useContext(TodoDispatchContext);
5. 사용하는 Component에 import 해서 적용한다.
const TodoBody = () => {
const todos = useTodos();
const filterTodos = (todos, selectedCategory) => selectedCategory === 'ALL' ? todos : todos.filter(todo => todo.category === selectedCategory);
const filteredTodos = filterTodos(todos.data, todos.category);
return (
<ul className='px-0 my-8'>
{filteredTodos.map((todo,index) => <TodoItem todo={todo} key={index}/>)}
</ul>
)
}
