낙관적 업데이트 - Optimistic update (with React)

프론트엔드 개발을 하다보면, 직면하는 문제가 있다.

나의 경우에는 커뮤니티 사이트를 만들고 있었는데, 댓글을 삭제한 뒤 해당 댓글이 삭제된 페이지를 다시 렌더링해야 했다.

이 경우, delete 요청을 보내고 다시 get 요청을 보내 댓글의 목록을 받아와야 할까?

하지만, 이렇게 하니 다시 Get으로 받아온 데이터는 아직 댓글이 삭제가 되지 않은 상태였다.

이 문제에 처음 직면하였을 때, 내가 선택한 방법은 삭제 후 결과를 받은 뒤 일정 시간이 지나고 다시 Get 요청을 보내 갱신된 데이터를 받는 것이었다.

그러나, 이 방법이 과연 좋았을까? 시간이 지나고 다시 해당 문제에 대해 찾아보니 낙관적 업데이트에 대해서 알게되었다.

cont MyPage = () => {
	const [offButton, setOffButton] = useState(false);
    const [data, setDate] = useState([]);
    
    const getDate = () => {
    	axios.get(url)
        	.then(el => {
            	setDate(el.data);
                setOffButton(true);
            })
            .catch(err => console.log(err);
    }
    
    return (
    	<div>
        	{data.length > 0 ? 
            	data.map((el, idx) => <p key={idx}>{el}</p>) 
                : null}
            {offButton ? null 
            	: <button onClick={getDate}>GET!</button>}
        </div>
    );
    
}

• 위와 같은 컴포넌트가 있을 때, 전송 버튼의 기능은 한 번만 수행되고, 기능이 제대로 이루어 졌을 때 버튼은 사라져야 한다.
• axios 요청이 성공하면, 데이터를 설정하고 버튼을 비활성화한다.
• 실제로 데이터가 서버로부터 제대로 받아졌는지 확인하지 않고 요청이 끝난 뒤에 바로 버튼을 비활성화 하는 것이다.

🍹 맨 처음에 논의했던 댓글 삭제 문제와 조금 거리가 멀어진 것 같지만, 내 생각에는 위의 버튼 문제와 유사한 점이 있다.
🥃 삭제 요청이 끝난 뒤 다시 get 요청을 보내 삭제 요청이 완료된 데이터를 다시 받아오는 비관적 업데이트는 불필요하게 서버에 API 요청을 많이 보내는 방법일지도 모른다.
🧊 반면에 낙관적 업데이트는 서버에서 댓글 삭제 작업이 잘 일어났다고 믿고(서버에 get 요청을 하지 않는다), 삭제 요청 후에 기존에 가지고 있던 댓글 리스트 상태에서, 삭제한 댓글만 filter 하는 것이다.
🥤 이와 같은 방법으로 API 호출을 줄일 수 있으나, 서버에서 데이터 삭제가 제대로 일어나지 않았다면, 사용자가 제대로 삭제가 되지 않은 것을 바로 확인할 수 없다.

 

+ node 서버에 대한 강의를 들으며 알게되었는데, DB에 실제로 데이터를 쓰고 나면 그 메서드의 리턴값으로 생성된 데이터가 반환된다. 따라서, 이 생성된 데이터를 반환하는 것이 서버에서는 자연스러운 흐름이고, 클라이언트에서는 요청에 대한 반환값인 새 데이터를 그대로 받아 이를 상태값에 저장하는 것이 자연스럽다. (새로 만들어진 결과값을 반환받기에 따로 GET 요청을 보낼 이유가 없다) 이 경우 추가적인 네트워크 요청이 필요없는 것 같다.