한 박자 느린 todo title의 업데이트😜

이전 글에서 todo를 수정하고 모달 창을 닫았을 때 todo 내용은 바로 업데이트가 되는데 todo 제목은 새로고침을 하거나, 다른 todo가 있다면 한 번 클릭해줘야(즉, TodoTitle 컴포넌트의 useEffect의 의존성 배열에 담긴 변수가 변경되어야) 수정된 제목으로 업데이트된다고 말했다.

이 부분을 수정했다. Todo의 제목을 업데이트하는 함수는 TodoTitle 컴포넌트에 있고, Todo를 수정하는 함수는 TodoDetail 컴포넌트에 있기 때문에, TodoTitle 컴포넌트에서는 todo를 수정해도 알려주지 않는 이상 모른다.

그래서 context에 기본 값을 새로 추가해주었다.

// Context 

const GlobalContextProvider = ({ children }) => {
  const initialToken = localStorage.getItem('token');
  const [state, dispatch] = useReducer(globalReducer, {
    token: initialToken,
    id: null,
    create: null,
    edit: 0, // ✅ 기본 값 추가 
  });

 // ... 다른 코드들 
};


// useReduce함수에도 해당 action 추가

const globalReducer = (state, action) => {
  switch (action.type) {
    case 'detail':
      return { ...state, id: action.payload };
    case 'login':
      return { ...state, token: action.payload };
    case 'logout':
      return { ...state, token: action.paylod };
    case 'create':
      return { ...state, create: action.payload };
    case 'delete':
      return { ...state, id: action.paylod };
    case 'edit': // ✅ edit 케이스 추가
      return { ...state, edit: action.payload};
    default:
      return state;
  }
};

TodoDetail 컴포넌트에서는 모달 수정을 완료할 때마다 dispatch함수를 실행시켜 edit값을 변경해주고, TodoTitle 컴포넌트에서는 edit값을 가져와서 의존성 배열에 넣는다.

// TodoDetail 컴포넌트

  const onTodoEditHandler = async (event) => {
    event.preventDefault();
    editTodo(id, token, newTitle, newDetail);
    dispatch({ type: 'edit', payload: 1 });
    setShow(false);
  };

// TodoTitle 컴포넌트

  useEffect(() => {
    token &&
      getTodo(token).then((result) => {
        setDatas(result.data.data);
      });
  }, [create, id, edit]);

TodoDetail 컴포넌트에는 모달을 띄우고 닫을 수 있도록 show state가 있다. 초기값은 false고 버튼이 클릭될 때마다 true 또는 false값으로 변경된다. 처음에는 이 show state를 dispatch 함수의 payload로 넣어줬는데, undefined가 뜨더라. edit의 기본 값을 null로 주고 true -> false -> true -> fal...로 값을 바꾸려고 했는데
null -> undefined이 되는 첫 번째 순간에만 업데이트가 되고 그다음부터는 계속 undefined였기 때문에 업데이트가 안됐다.

글을 수정하는 거라 id값도 안 바뀌고, 수정한 제목과 내용을 담는 state를 써볼까 했는데, 제목이나 내용을 수정하지 않으면 바뀌지 않을 것 같다.

Math.random()도 생각했지만 진짜 만에 하나로 같은 수가 나올 수도 있는 위험한 메서드니까 제외하고, 그럼 글을 수정한 시각이 어떨까?
글을 수정하는 시간은 매번 달라질 테니까 겹칠 경우도 없다. 그래서 Date.now()를 payload로 추가했다.

콘솔에 매번 다른 숫자가 찍히는 게 보임~!

이제 다음 리팩토링 때는 리덕스 사용할 예정이다.