선생님 질문있습니다.

const LandingPage = ()=>{

    const [movies, setMovies] = useState([]);
    const [MainMovieImage,setMainMovieImage] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [currentPage,setCurrentPage]= useState(0);

    useEffect(() => {
      const URL = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`
      fetchMovie(URL);
      }, []);
      
    const fetchMovie = async (URL) => {
      try {
        setError(null);
        setMovies(null);
        setLoading(true);
        const response = await axios.get(URL);
        setMovies([...movies, ...response.data.results]);
        setMainMovieImage(response.data.results[0]);
        setCurrentPage(response.data.page)
        console.log(response.data); // 데이터는 response.data 안에 들어있습니다.
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };
    
      if (loading) return <div>로딩중..</div>;
      if (error) return <div>에러가 발생했습니다</div>;

      const loadmore=()=>{
        const URL = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=${currentPage+1}`
          fetchMovie(URL);
     }
loadmore 버튼을 누를때마다 리렌더링이 됩니다.
또 mainimage도 다음 page result[0]껄로 바뀌는데
리렌더링을 하지 않을 방법이 있을가요??
인프런 커뮤니티 질문&답변
