✍ AjaxCallCount

외부 API를 통해 데이터를 가져올 때 useEffect를 사용하면 화면이 새로 렌더링 된다. 이 때 데이터를 몇 번 호출 했는지를 카운트 했는지 알려준다.

expect(ajaxCallCount).toEqual(1)

데이터를 불러 올 때 API 호출이 한 번만 되어야 테스트 케이스를 통과할 수 있었다.

🔒 문제상황

currentMovie가 상태변경될 때 마다 useEffect가 실행되게 했는데 말그대로 현재영화가 변경될 때 마다 외부 API를 호출하는 것이기 때문에 카운트가 계속 증가했다.

useEffect 코드가 <App /> 컴포넌트에 들어 있고, 화면에 호출될 수록 카운터가 계속 올라가기 때문에 처음에는 AjaxCallCount가 3이 나왔다.

export const App = () => {

  useEffect(() => {
    getMovies()
    .then(res => {
      setMovieList(res)
    })
  }, [currentMovie])

🔐 해결방법

화면이 재 렌더링 될 때는 화면 전체가 아닌 컴포넌트 단위로 렌더링 되는 React의 성질을 생각했다.

처음 화면이 렌더링 됐을 떄 외부API를 한 번 호출해 pending 상태로 둔 후 컴포넌트를 호출할 때는 새로운 호출 없이
pending 상태의 API를 사용하도록 했다.

const movieApi = getMovies()

export const App = () => {

  useEffect(() => {
    movieAPi
    .then(res => {
      setMovieList(res)
    })
  }, [currentMovie])

추가적인 API 호출이 없기 때문에 컴포넌트가 변할 때마다 useEffect가 변해도 된다.