[useEffect] Nomad Coders 영화 웹 서비스 만들기 #4

📑 Nomad Coders ‘ReactJS로 영화 웹 서비스 만들기’ 강의를 듣고 정리한 내용입니다.

useEffect()

오늘은 useEffect()를 사용해서 원할 때에만 코드를 실행하도록 해봤다.
UI가 업데이트될 때마다 코드가 실행된다.
하지만 필요없는 경우도 있다.
만약 검색하는 기능에서 검색API를 불러오는 코드가 검색창이 업데이트될 때마다 실행되는 것을 막을 수 있다.

import { useEffect } from "react";
useEffect(() => {
  console.log("I run only once");
}, []);

기본적으로 위와 같이 사용할 수 있다.
useEffect를 import하고 나서 앞 부분에 실행할 함수를 넣어주고 그 뒤에는 빈 대괄호를 써준다.
이렇게하면 처음에 페이지가 렌더링 될 때에만 실행된다.

그리고 useEffect()를 사용해서 원할때마다 함수를 실행시켜 줄 수도 있다.

사용 원리는 최초에 한 번만 실행했던 코드의 마지막 대괄호 부분에 업데이트 되는 값을 입력한 것이다.
괄호 안의 값이 업데이트될 때마다 함수가 실행되는 것이다.
반대로 생각해보면 최초에 한 번만 실행하는 코드는 괄호가 비어있으니 업데이트 되는 값이 없기 때문에 딱 한 번만 실행하게 된 것이다.

Cleanup

니꼬쌤이 Cleanup코드에 대해서도 알려주셨다.

useEffect 코드에서 실행할 함수 뒤에 return으로 다른 함수를 넣어주면 된다.
음.. 사실 수업에서 위처럼 사용해봤지만, 감이 잘 안온다.
어디에서 사용할 수 있는지는 더 알아봐야 할 것 같다.