[ReactJS_Complete] useEffect, useCallback

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

useEffect()

: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

  useEffect(() => {
    fetchMoviesHandler();
  }, [fetchMoviesHandler]);
 
  async function fetchMoviesHandler() {
    setIsLoading(true);
    setError(null);
 
    try{
      const response = await fetch("https://swapi.dev/api/films/");
      
      if(!response.ok){
        throw new Error('Something went wrong!');
      }
 
      const data = await response.json();
  
      const transformedMovies = data.results.map(movieData => { // 필요한 데이터만 가져와서 key값을 변환
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
        };
      });
  
      setMovies(transformedMovies);
    } catch(error) {
      setError(error.message);
    }
    setIsLoading(false);
  };
 

🚨 상기 코드를 수행할 경우, useEffect 함수에서 fetchMoviesHandler 함수를 호출하면 컴포넌트가 렌더링될 때마다 fetchMoviesHandler 함수가 호출되어 무한 로딩이 발생

* fetchMoviesHandler: fetch()로 외부 데이터를 가져오며, 이 때, re-rendering됨

 

⭐ 대안: useCallBack() 사용

useCallBack()

:  첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게하는 Hook

  const fetchMoviesHandler = useCallback(async () => {
    setIsLoading(true);
    setError(null);
 
    try{
      const response = await fetch("https://swapi.dev/api/films/");
      
      if(!response.ok){
        throw new Error('Something went wrong!');
      }
 
      const data = await response.json();
  
      const transformedMovies = data.results.map(movieData => { // 필요한 데이터만 가져와서 key값을 변환
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
        };
      });
  
      setMovies(transformedMovies);
    } catch(error) {
      setError(error.message);
    }
    setIsLoading(false);
  }, []);
 

 

 

참고 자료

[React] 리액트 Hooks : useCallback() 함수 사용법