maingImage

안녕하세요. 강사님께서 적으신 코드를 보면 loadMoreItems와 useEffect에서 각각 setMainMovieImage(...[response.results[0]]) 로 main이미지를 바꿔주고 있습니다. 따라서 해당 부분을 맨 처음 한번만(page1을 불러올 때) 포함하면 됩니다. 매번 반복하지 않구요. useEffect(() => { const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`; fetch(endpoint) .then(response => response.json()) .then(response => { console.log(response) setMovies([...Movies, ...response.results]) setMainMovieImage(...[response.results[0]]) setCurrentPage(response.page) }) }, []) const fetchMovies = (endpoint) => { fetch(endpoint) .then(response => response.json()) .then(response => { console.log(response) setMovies([...Movies, ...response.results]) //setMainMovieImage(...[response.results[0]]) setCurrentPage(response.page) }) } 위의 코드를 따라 적으시면 원하시는 구현대로 동작하나 코드가 반복되어 우아하지 못한 코드라 느껴집니다. 그래도 코드를 줄이려는 노력은 해봤습니다. 아직은 리액트가 어렵게 느껴지네요. useEffect(() => { const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`; fetch(endpoint) .then(response => response.json()) .then(response => { setMainMovieImage(...[response.results[0]]) }) fetchMovies(endpoint) }, []) const fetchMovies = (endpoint) => { fetch(endpoint) .then(response => response.json()) .then(response => { console.log(response) setMovies([...Movies, ...response.results]) //setMainMovieImage(...[response.results[0]]) setCurrentPage(response.page) }) } 작성자님께서 코드를 우아하게 줄일 수 있는 방법을 알게 되신다면 공유해주세요 ^^ 아니면 언젠가 여기에 John Ahn님의 가호가 있길...