useContext 의 React 컴포넌트 간 데이터 흐름 관리와 상태 처리

React 컴포넌트 간 데이터 흐름 관리와 상태 처리

useContext와 컴포넌트 역할 분리

React 애플리케이션에서 컴포넌트 간의 데이터 전달과 상태 관리는 매우 중요한 요소입니다. 이를 효과적으로 관리하기 위해 컴포넌트의 역할을 명확하게 분리하고, 각 컴포넌트가 특정한 역할에 충실하도록 설계할 필요가 있습니다.

TodoForm과 TodoProvider의 역할 분리와 활용

1. 컴포넌트의 역할 명확화

• Form 컴포넌트 (TodoForm)

  • 사용자가 데이터를 입력하는 인터페이스를 제공
  • 사용자가 입력한 데이터를 수집하고 가공한 후, 이를 상태 관리 컴포넌트(Provider)에 전달

• Provider 컴포넌트 (TodoProvider)

  • 수집된 데이터를 저장하고 관리
  • 상태 관리와 함수들을 제공하여, 하위 컴포넌트들이 이를 활용할 수 있도록 TodoContext.Provider를 통해 데이터를 공급

• Context 컴포넌트 (TodoContext)

  • 데이터가 어떻게 공유되고 전달될지 정의
  • 리액트 컴포넌트 트리에서 어디서나 데이터에 접근 가능하도록 해주는 컨테이너 역할 수행

2. 컴포넌트 간 데이터 전달 방식 명확화

• Form 컴포넌트에서 데이터를 생성하고, Provider에 전달
• Provider는 받은 데이터를 그대로 받아 상태에 추가
• 데이터 전달 경로가 명확해짐에 따라 유지보수성과 재사용성이 향상

3. 상태 관리의 단순화 및 재사용성 극대화

• 상태를 업데이트하는 함수는 단순한 작업만 수행

  • 예: 데이터를 추가하거나 삭제하는 작업
  • 데이터 가공이나 검증은 Form 컴포넌트에서 처리

• 상태 관리 코드의 단순화로 다른 상황에서도 쉽게 재사용 가능

4. 코드의 유지보수성과 확장성

• Provider는 상태 관리의 중심으로, 데이터를 가공하거나 처리하지 않음

  • 유지보수성이 높아지고, 새로운 기능을 쉽게 추가 가능

• Form 컴포넌트는 데이터 처리와 가공에 집중하여 다양한 입력 형태나 데이터 처리 로직에 대응 가능

예시: Todo 관리 시스템

위 개념을 바탕으로 Todo 관리 시스템의 구현을 살펴보겠습니다.

TodoForm 컴포넌트

• 사용자가 새로운 Todo를 추가하는 폼
• 사용자가 입력한 텍스트를 addTodos 함수에 전달

const handleSubmit = (e) => {
  e.preventDefault();

  if (!newTodo.trim()) return; // 빈 입력 방지

  const newTodoObj = {
    id: crypto.randomUUID(),
    text: newTodo,
    completed: false,
  };

  addTodos(newTodoObj); // Provider에 정의된 addTodos 함수 호출
  setNewTodo(""); // 입력 필드 초기화
};

TodoProvider 컴포넌트

• Todo 목록을 상태로 관리
• addTodos 함수를 통해 새로운 Todo를 목록에 추가

const addTodos = (newTodo) => {
  setTodos([...todos, newTodo]); // 전달된 newTodo 객체를 상태에 추가
};

// 상태와 함수를 Provider로 공급
return (
  <TodoContext.Provider value={{ todos, addTodos, toggleCompleted, handleDelete }}>
    {children}
  </TodoContext.Provider>
);

TodoContext의 코드

export const TodoContext = createContext({
  todos: [],
  addTodos: () => {},
  toggleCompleted: () => {},
  handleDelete: () => {},
});

장점 요약

이와 같은 컴포넌트 분리 및 역할 명확화는 다음과 같은 장점이 있습니다:

1. 입력 폼과 상태 관리 역할이 명확히 구분되어 코드의 가독성이 향상
2. 상태 관리가 단순해지며 코드의 재사용성이 높아짐
3. 컴포넌트 구조의 확장 가능성이 높아짐

결론

이 원칙은 Todo 관리 시스템뿐만 아니라 다양한 애플리케이션의 데이터 흐름과 상태 관리에 적용될 수 있습니다. Form 컴포넌트에서 데이터를 처리하고, Provider에서 상태로 관리함으로써, 컴포넌트의 역할이 명확해지고, 코드의 복잡도가 줄어들며, 확장 가능성이 높은 애플리케이션을 만들 수 있습니다. 이러한 접근 방식은 React의 기본적인 설계 철학에 부합하며, 다양한 프로젝트에서 유용하게 활용될 수 있습니다. 😊