외부 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가 변해도 된다.