React - useEffect, useCallback

React - useEffect, useCallback

 

udemy 리액트 강의에서 학습한 내용을 정리하고자 쓴다.

 

우선 useEffect 개념을 보면 이는 리액트에서 제공하는 훅인데 리액트 내부적으로 UI를 직접 변화시키는 로직이 아닌 부분을 대부분 이곳에 정의한다. 이를 side-effect라고 부르는데 부작용이라는 뜻은 아니고 사이드에서 일어나는 이펙트 정도로 생각하면 될 것 같다.

 

그럼 useEffect를 왜 쓸까? 

첫 번째로 앞서말한 UI를 변화시키는 로직이 아닌 경우 정확하게 분리시키기 위해서가 첫 번째 이유이고, 두 번째로는 dependencies가 존재하지 않을 떄 이는 처음 시작할 때 한번만 이팩트 효과를 줄 수 있기 때문이다. 

 

두 번째 이유에서 살펴보면 사이트에 들어가자마자 api를 통해 데이터를 불러오는 경우 useEffect 내부에서 정의함으로써 처음 랜더링이 일어난 이후에 실행되고 그 이후로는 실행이 되지 않는다. 이는 useEffect 내부에 들어간 부분이 아닌 부분에서 변화가 일어났을 때 useEffect 내부의 값은 랜더링이 되지 않게 함으로써 성능이 저하되는 것을 막을 수 있다.

 

그리고 useEffect에 두번째 인자인 dependencies에는 useEffect 내부에서 사용한 외부 변수들을 적어줘야한다. 

이유는 외부의 값은 언제든지 변할 수 있기 때문에 이에 의한 불필요한 렌더링을 막기 위해서이다. dependencies에 변수를 정의해 놓으면 해당 변수가 변하지 않는이상 useEffect 내부의 함수는 렌더링되지 않는다. 따라서 useEffect내부에는 사용한 외부변수에 대해 dependencies에 정의해주어야 한다. 

 

하지만 주의할 점이 있다. dependencies에 정의할 때 타입이 원시타입이 아닌 참조 타입이라면 useCallback, useMemo 등으로 해당 타입을 감싸줘야 한다. 이유는 참조타입은 이름과 값이 같아도 주소가 다르다면 다르다고 판별하기 때문이다. 이 때문에 useEffect내부에서 함수를 사용하는 경우 해당 외부함수를 useCallback으로 묶어줘야 한다. 

 

그럼 여기서 useCallback, useMemo는 뭘까?

쉽게 생각하면 리액트 내부에서 해당 함수를 처음 랜더링할 때 메모리에 저장하고 이름과 값이 같다면 같다고 판별하는 훅이라고 보면 된다. (필자는 이렇게 이해함)

 

아래 예시를 보면 useCallback의 예시를 볼 수 있다. (udemy 강의 중, useMemo는 사용하지 않음.)

import React, { useState, useEffect, useCallback } from 'react';

import MoviesList from './components/MoviesList';
import './App.css';

function App() {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchMoviesHandler = useCallback(async () => { //서버로 부터 데이터를 가져옴.
    try {
      setLoading(true);
      setError(null); 
      const response = await fetch('https://swapi.dev/api/film/');
      if(!response.ok) {
        throw new Error("something wrong")
      }
      const data = await response.json();
      const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id,
            title: movieData.title,
            openingText: movieData.opening_crawl,
            releaseDate: movieData.release_date
          }
      });
      setMovies(transformedMovies);
    }catch (error) {
      setError(error.message);
    }
    setLoading(false);
  }, []); //디펜던시가 없는 이유는 외부의 값이 useCallback에 래핑된 함수에서 사용되지 않기 때문.


  
  useEffect(()=> {
    fetchMoviesHandler();
  }, [fetchMoviesHandler]);

  let content = <p>Found no movies</p>
  
  if (movies.length > 0) {
    content = <MoviesList movies={movies} />
  }
 
  if (error) {
    content = <p>{error}</p>;
  }

  //이렇게 하면 에러가 처음에 없으니까 맨 마지막 단에 둔다. 이걸 윗단으로 올리면 빠르게 실행되기에 loading이 보이지않는다.
  //이를 윗단으로 올리면 error부분을 setTimeout을 하게 되면 loading이 보인다. 
  if (loading) {
    content = <p>currently loading...</p>;
  }  


  

  return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>
        {content}
      </section>
    </React.Fragment>
  );
}


export default App;