230725) 데이터 수정하여 저장할 때 async, await 사용 사례

React, react-router-dom을 이용하여 useState를 통해 데이터를 저장하고, 수정하고, 삭제하는 연습을 하는 과정에서 아래와 같은 순서로 데이터를 수정하려고 시도하였는데 문제점이 발생하였다.

 

1. newData라는 변수명을 만들어 이곳에 수정된 데이터를 저장한다.

2. updatedDatas라는 변수명을 만들어 이곳에 수정된 데이터를 반영한 데이터리스트(배열)을 저장한다.

 

하지만 분명 newData를 console.log로 찍어 봤을 때는 데이터가 잘 들어가는 것처럼 보임에도 불구하고 막상 제대로 배열에 반영이 되지 않는 듯한 모습을 보였다. 혹시 하는 마음에 async await을 이용하여 비동기 처리가 되겠끔 하고, newData의 저장이 확실히 끝나고 난 뒤 updatedDatas 동작이 실행되게 하니 정상적으로 문제가 해결되었다.

 

작성한 코드의 예시는 아래와 같다.

 

const submitHandler = async (e) => {
    e.preventDefault();
    try {
      const newData = { ...selectedData, title, content };
      // title, content만 수정하고 나머지 정보는 기존의 정보와 같음을 뜻함
      setNewData(newData);
      // 이 부분에서 setNewData의 실행이 끝나야만 아래 동작이 실행된다.
      
      await editDataHandler(newData);
      
    } catch (error) {
      // 이쪽에 에러메세지 작성
    }
  };

 

오늘도 잘 해냈다!