FETCH

웹 서비스에서 데이터를 fetch 하는 데이는 어느정도의 시간이 걸릴 수 밖에 없고, 사용자들은 이를 기다린 후에 UI에서 데이터를 확인할 수 있다. 이 시간동안 화면에서 아무것도 볼 수 없다면 사용자들은 답답함을 느끼게 될 것이다. 해당 시간동안 스켈레톤 컴포넌트를 보여줌으로써 데이터를 불러오고 있다는 것을 UI 상으로 보여줄 수 있다. 그럼 데이터를 불러오고 있는 중이라는 것을 상태로 나타내야 한다. fetch 메소드를 사용하고 있다면 useState로 로딩 상태를 관리해야 하고, tanstack query같은 라이브러리를 사용한다면, 이가 제공해주는 isLoading 상태로 관리한다. 이도 문제는 없지만 삼항 연산자나 if 문으로 로딩상태를 관리해야 하므로 코드가 좀 지저분해 질 수 있다. 리액트는..

프론트 단에서 데이터를 효율적으로 관리하는 것은 매우 중요하다.이를 위해 Cache를 흔히 활용한다. 이번에는 Next 에서 Cache를 효율적으로 활용하기 위해 공부해보자. Request Memoization 공식문서에 따르면 요청 url과 options가 같은 fetch api 에 대해서 자동으로 기억(memoize) 한다고 나와있다.   즉, 위 그림처럼 동일한 endpoint로의 API fetch가 여러 컴포넌트에서 수행된다면 Request memoization이 동작한다.따라서 API fetch 결과를 props drilling 하지 않고, 각 컴포넌트에서 fetch를 진행해도 실제 API 요청은 최초 1번만 시행된다. 다만, memoization은 서버에서 호출되는 GET 요청에 한해서 적용되..