React Hook 공부 - 1 usememo를 사용한 컴포넌트 최적화

박경현·2024년 11월 4일

React

기본적인 영화 api를 사용한 프로젝트에 usememo를 사용해보면서
컴포넌트 최적화에 대해 공부했습니다.

프로젝트 설명 및 기본 설계

위의 사진처럼 TMDB api를 이용해서 현재 상영중인 영화를 불러옵니다.

기능 설계

pagenation을 적용해서 해당 페이지로 갈때마다 영화 요청해서 보여주기
usememo를 이용해서 검색을 한 결과를 바로 보여줍니다.
날짜순 정렬을 누르면 현재 페이지 영화들이 바로 날짜순 정렬이 됩니다.

기본적은 반응형 css는 grid-col을 sm일때 2개, md일때 3개, lg일때 4개로 표현했습니다...

useEffect로 페이지 이동때마다 api 호출하기

페이지네이션을 위해 + - 를 누를때마다 페이지를 이동하게 prevPage와 nextPage를 만들었습니다.
useEffect는 url의 변경때마다 작동하게 url을 의존성으로 받았습니다.

const [page, setPage] = useState(1);
const [movies, setMovies] = useState([]);
const [searchTerm, setSearchTerm) = useState("");
const [isSortedByDate, setIsSortedByDate] = useState(false);

const maxPage = 5;
const apiKey = process.env.REACT_APP_TMDB_API_KEY;
const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}&language=ko&page=${page}&region=KR`;

const nextPage = () => {
    if (page < maxPage) {
      setPage(page + 1);
    }
  };

  const prevPage = () => {
    if (page > 1) {
      setPage(page - 1);
    }
  };
  
useEffect(() => {
	const fetchMovies = async() => {
    	try {
        	const response = await fetch(url);
            const data = await response.json();
            setMovies(data.results);
        } catch(e) {
        	console.error("Error", e);
        }
    };
    fetchMovies();
}, [url]);

usememo란

usememo는 컴포넌트 최적화를 위한 Hook이다! 라고 생각하면 됩니다.

memo -> Memozation을 의미했었는데요, 이건 메모리에 넣어두고 재사용할 수 있으면 재사용한다!를 뜻합니다.

기본 함수컴포넌트 : 렌더링 => 함수 호출 => 모든 내부변수 초기화
usememo : 렌더링 => 함수호출 => Memozarion 된 함수 재사용

usememo를 사용해서 검색 결과 최적화하기

먼저 검색을 할때 사용했습니다.
검색을 하면 해당 input 값이 변경될때마다 filter로 영화를 바로 찾아서 보여줍니다.
검색을 다 할때까지 기다리지 않기 때문에 정확히 검색어를 몰라도 비슷한 결과를 보여줍니다.

const filterMovies = usememo(() => {
	return movies.filter((movie) => 
    	movie.title.toLowerCase().includes(searchTerm.toLowerCase())
    );
}, [movies, searchTerm])

filterMovies를 사용하면 사용가자 검색어를 입력할 때 또는 영화 목록이 변경될때만 필터링 작업이 실행됩니다.

즉 이 외의 다른 렌더링이 일어났을때는 메모리에 있는 함수를 재사용합니다!!

usememo를 사용해서 날짜순 정렬 최적화 하기

날짜 또한 매번 다른 함수호출되서 렌더링 될때 정렬될 필요가 없기 때문에 usememo로 설정합니다.

const sortedMovies = useMemo(() => {
	return [...filterMovies].sort( (a,b) => {
    	return new Date(b.release_date) - new Date(a.release_date);
    })
}, [filterMovies, isSortedByDate]);