📖 TIL - React Reducer와 불변성: Todo 앱에서 배운 작은 교훈의 복습

✨ 문제 상황

Todo 앱에서 아이템 수정 시 reducer를 사용하면서 발생한 의문:

// ❌ 처음 작성한 코드
case "setModifyItem": 
  return (state.todoItem = action.todoItem);

"단순히 값만 전달하는데 왜 기존 상태를 유지해야 하지?" 라는 의문이 들었습니다.

💡 깨달은 점

1. 리듀서와 불변성

// ✅ 올바른 방식
case "setModifyItem":
  return {
    ...state,          // 기존 상태 복사
    todoItem: action.todoItem  // 새로운 값 설정
  };

• 리듀서는 항상 새로운 상태 객체를 반환해야 함
• 직접적인 상태 수정은 피해야 함
• 스프레드 연산자로 기존 상태를 복사 후 수정

2. 단순 값 반환의 문제점

// ❌ 잘못된 방식
case "setModifyItem":
  return action.todoItem; // 기존 상태 손실

• 기존 상태의 다른 속성들이 사라짐
• React의 상태 관리 규칙에 위배

3. Context에서 상태 사용

const { state } = useContext(TodoContext);

• useContext를 통해 필요한 상태만 가져오기
• 구조 분해 할당으로 깔끔한 코드 작성

⭐️ 핵심 포인트

1. 리듀서는 항상 새로운 객체 반환
2. 기존 상태 보존의 중요성
3. 불변성 유지를 통한 안정적인 상태 관리

🎯 배운 점

불변성 유지를 해야된다는걸 익히 알면서도 자주 실수하여 다시금 리마인드 시킨다..
기존의 데이터를 다룰때는 꼭 기존 상태를 보존 후 다루어야 한다.