lena0323park2743

안녕하세요.
강사님께서 적으신 코드를 보면 loadMoreItems와 useEffect에서 각각&nbsp;
<pre class="language-javascript"><code>setMainMovieImage(...[response.results[0]])</code></pre>
로 main이미지를 바꿔주고 있습니다.
따라서 해당 부분을 맨 처음 한번만(page1을 불러올 때) 포함하면 됩니다. 매번 반복하지 않구요.
&nbsp;
<pre class="language-javascript"><code>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)
 })
 }</code></pre>
&nbsp;
위의 코드를 따라 적으시면 원하시는 구현대로 동작하나 코드가 반복되어 우아하지 못한 코드라 느껴집니다.
&nbsp;
그래도 코드를 줄이려는 노력은 해봤습니다.
아직은 리액트가 어렵게 느껴지네요.
&nbsp;
<pre class="language-javascript"><code>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)
 })
 }</code></pre>
&nbsp;
작성자님께서 코드를 우아하게 줄일 수 있는 방법을 알게 되신다면 공유해주세요 ^^&nbsp; 
아니면 언젠가 여기에 John Ahn님의 가호가 있길...

lena0323park2743

投稿