캐시된 데이터로 인한 북마크 상태 미반영 문제 해결

STO 조각 투자 플랫폼을 개발하면서 주요 상품 현황에서 데이터들을 보여주고 있는데, 캐시된 데이터로 인해 북마크 상태가 반영이 제대로 안되는 문제를 해결한 경험을 적어보려 한다.

 

 

 

위 사진을 보면, 처음에 탭을 누를 때 API를 호출하고 한 번 호출을 하면 캐시된 데이터를 보여줘서 불필요한 API 호출을 방지해서 서버 호출 낭비를 최적화하였다.

 

전체 탭에는 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 카테고리 중 하나의 카테고리가 나오게 되는데, 문제는 북마크를 추가했을 때 해당 데이터가 속한 특정 카테고리의 캐시만 무효화해야 하는데 그렇지 못해서 상태가 제대로 반영되지 않았다.

 

예로 전체 탭에 사진과 같이 음악저작권 데이터가 호출된 상태라고 가정해보면, 전체탭에서 데이터를 북마크한 후에 음악저작권 탭을 누르면 해당 탭에서는 캐시된 데이터를 보여주는게 아닌, 데이터를 새로호출해서 북마크된 리스폰스를 다시 받아와야하는데 이 동작이 제대로 반영이 되질 않았다.

 

반대로도 전체 탭에 음악저작권 데이터가 나타날 때, 음악저작권 탭에서 데이터를 북마크 한 후 전체 탭을 클릭하면 그 때에도 새롭게 API를 호출해서 북마크된 리스폰스를 다시 받아와야했다.

 

 

이를 위해 탭을 누를 때 마다 호출하면 편하겠지만, 불필요한 서버 호출을 낭비하는 일이므로 변경된 카테고리의 데이터들만 재호출하는 로직이 필요했다.

 

현재 데이터 호출은 MainList라는 컴포넌트에서 호출해서 MainListItem이라는 컴포넌트로 값을 내려주는 형태이다. 그리고 탭값이 all일 때 데이터 호출은 파라미터에 all을 넣어서 보내는데, 이 api 호출 리스폰스를 통해 카테고리를 파악해서 데이터를 보여주고 있다. 탭이 all일 때는 앞서 말한거처럼 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 유형 중 하나가 리스폰스로 오기 때문에 해당 값을 넘겨서 데이터를 표시해주고있는데, 일단 아래사진처럼 탭값을 넘겨주었다.

 

 

 

그리고 아래 사진처럼 category 변수를 통해서 북마크한 데이터가 속한 카테고리를 파악한 후, 해당 카테고리의 캐시만 무효화되도록 처리했다.

 

즉, 북마크 기능을 수행했을 때 인자로 넘겨받은 currentTab값이 all이면 현재 전체 탭에 떠있는 카테고리의 값은 category이므로 category값에 해당하는 API 호출만 재호출하고, 만약 currentTab값이 all이 아니면(다른 탭에 있을 때) all탭 API만 재호출해서 서버 요청을 최소화하면서 북마크 아이콘 렌더링을 할 수 있었다.

 

 

 

위 사진처럼 전체 탭에서 북마크를 추가하거나 삭제할 때, 그 데이터가 속한 카테고리만 캐시가 무효화되면서 다른 탭에서도 북마크 상태가 정상적으로 반영된다. 반대로, 특정 탭에서 북마크를 변경하면 전체 탭의 캐시가 무효화되어 최신 상태를 유지하게 되었다.

 

이렇게 코드를 최적화함으로써 불필요한 API 호출을 줄이면서도 북마크 상태를 정확하게 반영할 수 있었다.