인프런 커뮤니티 질문&답변

안녕하세요.

강사님께서 적으신 코드를 보면 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님의 가호가 있길...

fetchMovie를 처음 로드 할 때, current page가 0 (use State)거나 endpoint에서 page가 1이니까,

setMainMovieImage를 if문으로 호출하게 하셔도 될 것 같습니다.

코드는 좀 더럽지만ㅠ 저는 이런식으로 url값을 1번 이미지의 url값으로 해줬습니다.