[LAB-9] 입력한 텍스트에서 마지막 글자가 제외됩니다.

[qorbaxk]

질문 작성자

백승연

문제 상황

• 사용자가 입력한 텍스트를 객체에 저장하여 파이어베이스에 넘기는 작업을 진행합니다.

• 다른건 문제가 없는데, 텍스트를 직접 입력하는 제목과 내용에서 문제가 발생합니다.

• 입력한 텍스트가 보여지는건 잘 보여지는데 (setTitle과 setText 를 이용하여 value 값으로 보여주는데는 문제가 없음)

• dispatch로 redux를 이용하여 만든 slice 객체에는 마지막으로 작성한 글자만 빼고 저장이 됩니다.

• 그래서 파이어베이스에도 마지막글자가 빠진 채 저장이 됩니다.

• 어떻게 해결해야 할까요?

• 예시이미지로 보면 제목이 하이 라고 입력했는데도 하 만

• 내용에는 하이입니다. 라고 점을 찍었는데도 하이입니다 만 나오는 걸 확인할 수 있습니다

  프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.

• feature/diary

• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요.

• withpet.zip

환경 정보

• Windows
• Node.js v18.12.1
• React v18.0.2

[yamoo9]

문제 원인

작성된 코드를 보면 https://github.com/yamoo9/likelion-FEQA/issues/117#issuecomment-1449394354 답변에서 발생한 이슈와 동일한 문제를 보여 줍니다. 아래 첨부된 영상을 보면 사용자 입력이 끝난 시점에서 e.target.value 값을 setTitle 업데이트 함수에 전달하지만, 그 아래 위치한 디스패치 코드에 전달되는 title은 아직 업데이트 전이기 때문에 마지막 글자가 빠진 것입니다. 😥

문제 해결

React 컴포넌트 상태는 즉각적으로 처리되는 것이 아니므로 useEffect 훅을 사용해 상태 변경이 확인된 후 Redux에 디스패치 해야 합니다.

const Diary: React.FC = () => {

  // 컴포넌트 상태
  const [title, setTitle] = useState<string>('');

  // 컴포넌트 상태가 업데이트 된 이후 콜백
  useEffect(() => {
    console.log('업데이트 된 title: ', title);
    dispatch(getDiary({ ...diary, title }));
  }, [title]);

  return (
    <>
      {/* ... */}
      <input
        // ...
        value={title}
        onChange={e => {
          setTitle(e.target.value)
        }}
      />
    </>
  );
};

그러면 아래 영상처럼 title 상태 업데이트 이후 디스패치 되므로 정상적으로 저장될 것입니다. 😊

[qorbaxk]

감사합니다! 이대로 해보겠습니다!