5/30 TIL

TIL: React 컴포넌트 간 상태 공유하기

문제 상황

• PocketItems 컴포넌트가 마운트될 때 localStorage에 저장된 데이터를 가져옵니다.
• NewItemForm 컴포넌트에서 새로운 지출 항목을 추가할 때, PocketItems 컴포넌트가 변경 사항을 즉시 반영하지 않습니다.

해결 방법

두 컴포넌트 간 상태를 공유하기 위해 아래와 같은 방법을 사용할 수 있습니다:

1. 상태를 상위 컴포넌트로 끌어올리기

   • PocketItems와 NewItemForm 컴포넌트를 포함하는 상위 컴포넌트에서 상태를 관리합니다.
   • 상위 컴포넌트에서 상태와 상태 업데이트 함수를 두 하위 컴포넌트에 props로 전달합니다.

2. 커스텀 훅 사용하기

   • useExpenses와 같은 커스텀 훅을 만들어 상태를 관리합니다.
   • 커스텀 훅을 통해 상태와 상태 업데이트 함수를 두 컴포넌트에서 공유합니다.

코드 예시

// 상위 컴포넌트에서 상태 관리
const App = () => {
  const [expenses, setExpenses] = useState([]);

  useEffect(() => {
    const storedExpenses = JSON.parse(localStorage.getItem('expenses')) || [];
    setExpenses(storedExpenses);
  }, []);

  const addExpense = (newExpense) => {
    const updatedExpenses = [...expenses, newExpense];
    setExpenses(updatedExpenses);
    localStorage.setItem('expenses', JSON.stringify(updatedExpenses));
  };

  return (
    <>
      <NewItemForm addExpense={addExpense} />
      <PocketItems expenses={expenses} />
    </>
  );
};

// NewItemForm 컴포넌트
const NewItemForm = ({ addExpense }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const newExpense = { /* 새 지출 항목 데이터 */ };
    addExpense(newExpense);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 폼 필드 */}
      <button type="submit">Add Expense</button>
    </form>
  );
};

// PocketItems 컴포넌트
const PocketItems = ({ expenses }) => {
  return (
    <ul>
      {expenses.map((expense, index) => (
        <li key={index}>{expense.name}</li>
      ))}
    </ul>
  );
};

요약

• PocketItems와 NewItemForm 컴포넌트 간 상태를 공유하기 위해 상위 컴포넌트에서 상태를 관리하거나, 커스텀 훅을 사용합니다.
• 이를 통해 새로운 지출 항목이 추가될 때 PocketItems 컴포넌트가 즉시 업데이트되도록 할 수 있습니다.