inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

무비앱 시리즈 #6 Load More Button 만들기 ( 따라하며 배우는 리액트 노드 )

선생님 질문있습니다.

181

rlaalsrb3559

작성한 질문수 6

1

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]껄로 바뀌는데
리렌더링을 하지 않을 방법이 있을가요??

mongodb nodejs 웹앱 react express

답변 1

2

John Ahn

그러면  loadmore 함수에서   fetchMovie를 트리거 할때  

fetchMovies(endpoint, true);

이런식으로 argument 하나 더 준다음에 

const fetchMovies = (endpoint, fromLoadMoreitem) => {

fetchMovies 함수에도 파라미터로 가져와서  

fromLoadMoreItem 이    loadmore에서 왔으면 

setMainMovieImage(MainMovieImage || result.results[0])

이부분 생략해주게 하면 될것같습니다. 

수고하세요 ~ 

에러서 요렇게만 해보세요

0

228

1

antd Menu 질문

0

260

1

movieTitle

0

218

1

npm run dev 연결이 안됩니다ㅜㅜ

0

410

1

npm run dev 오류

0

855

1

403 forbidden error

0

1067

2

npm run dev 오류

0

696

1

모듈이 없다는데요

0

1278

1

npm run dev 실행시 오류

0

5370

1

504 Gateway Timeout Error

0

1448

1

컴파일 에러 관련 문의

0

504

1

npm run dev 오류

0

760

1

이미지가 안떠요...

0

369

2

npm run dev 실행하고 인증이 안되는거 같아요

0

531

1

cd client에서 npm install 오류

0

1418

1

npm run dev시 localhost가 자꾸 3000으로 연결됩니다

0

972

1

Netlify + AWS Elastic Beanstalk 를 이용한 배포

1

1785

1

[nodemon] app crashed - waiting for file changes before starting... Error occurred while proxying request localhost:3000/api/hello to http://localhost:5000/ 해결법

0

460

0

지금 듣기엔 안되는 강의일까요?

0

718

1

사진이 2개 2개씩 다른줄에 나와요 ㅠㅠ

0

428

1

비동기 처리가 영상과 다르게 됩니다..

0

247

0

#2강 npm install

0

768

4

LandingPage.js 내 useState(null) 이용하는 이유

0

226

0

client 부분에 App.js 와 Config.js 위치가 다른데 상관없는 것인가요?

0

384

1