[React] 값을 수정할 때 페이지가 번쩍 거리는 현상 제거하기

페이지가 번쩍 거리는 현상

위의 동영상에서 확인할 수 있듯이 Todo를 수정하고 제출했을 때 뭔가 번쩍 거리는 듯한 느낌이 있다. 

 

일단 결론부터 말하면, 투두를 수정할 때 updateTodoApi를 호출하게 되는데 updateTodoApi는 또 getTodoApi를 호출하고 있었기 때문이다. 여기서 updateTodoApi는 데이터를 수정할 때 발생하고, getTodoApi는 화면에 그릴 데이터를 가져올 때 발생한다. 

 

처음에 이러한 방식으로 코드를 작성한 이유는 서버에 데이터를 저장하고 있기 때문에 수정한 데이터를 화면에 보여주기 위해서 getTodoApi를 계속해서 호출해야겠다고 생각했기 때문이다. 

 

하지만 그러면 제목처럼 화면이 번쩍인다. 

그 이유는, 통신을 하고 난 후에 화면에 데이터를 그리기 때문에 버벅거리는 현상이 보이게 되는 것이다. 

1. 투두 수정
2. updateTodoApi 호출
3. 제출 클릭 
4. 화면에 수정 이전의 데이터 보여줌 
5. getTodoApi 호출
6. 화면에 수정 이후 데이터 보여줌

 

 

그럼 어떻게 이러한 현상을 제거할 수 있을까?

이때 사용하는 기법이 옵티미스틱 업데이트(Optimistic Update)이다.

 

옵티미스틱 업데이트는 클라이언트 측에서 사용자 입력 또는 다른 이벤트에 대한 응답으로 발생하는 상태 변화는 클라이언트 측에서 먼저 처리하고, 서버 측에서 데이터를 변경하는 작업을 수행하기 전에 UI를 갱신하는 기법이다. 

 

다시 말해, 서버로부터 받는 응답이 성공적일 것이라고 가정하고 사용자에게 성공했을 때의 결과를 바로 보여주는 것이다! 거의 확정적인 상황에서 쓰이는 기능인만큼, 결제와 같은 중요한 상황에서는 쓰면 안 된다. 

 

나는 useState를 사용하여 api가 호출될 때, state 함수를 사용하여 화면에 보여질 값을 갱신해줬다. 

 

위의 예제로 들어보자면, 아래 코드와 같습니다.

const [todoList, setTodoList] = useState([]);

// 투두를 수정할 때 호출되는 함수입니다. 
const updateTodo = (id, todo, isCompleted) => {
  setTodoList(
    todoList.map((el) => {
      if (el.id !== id) return el;
      return { ...el, todo, isCompleted };
    })
  );

  updateTodoApi(id, todo, isCompleted).then((response) => {
    return response.json();
  });
};

// 화면에 데이터를 보여줄 때 호출되는 함수입니다. 
const getTodos = () => {
  getTodosApi()
    .then((response) => {
      return response.json();
    })
    .then((response) => {
      if (!(response.statusCode >= 400)) setTodoList(response);
    });
};

프로젝트의 일부를 코드로 발췌해 온 거라 setTodoList 함수를 어떻게 활용했는지 정도 확인하면 도움이 될 것 같습니다. 

포인트는 api 호출을 무조건 성공으로 가정하고, 화면은 todoList를 사용하여 업데이트되고 있다는 것입니다.

 

 

참고자료

---

• velog, Optimistic Update

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖