useEffect 파헤치기

🎀 이렇게 생겼어요

useEffect(() => {
  // 실행할 코드 작성
}, []);

🎀 이렇게 씁니다

📌 렌더링 될 때 마다 실행

useEffect(() => {
  // 실행할 코드 작성
});

📌 최초 1회 실행

useEffect(() => {
  // 실행할 코드 작성
}, []);

컴포넌트가 처음 렌더링 될때 리액트가 콜백 함수를 기억해뒀다가 실행한다.

// 영화 리스트 배열로 저장
const [items, setItems] = useState([]);
// 영화 정렬 rating/createdAt 두가지 방식 지정
const [order, setOrder] = useState("createdAt");

// 영화 리스트들을 정렬해주는 함수
const handleNewestClick = () => setOrder("createdAt");
const handleBestClick = () => setOrder("rating");

// 영화 리스트를 불러오는 함수
const handleLoad = async () => {
const { reviews } = await getReviews();
  setItems(reviews);
};
useEffect(() => {
  handleLoad();
}, []);

위 코드는 영화 리스트들을 불러오는 함수이다.
위와 같이 useEffect를 써주면 렌더링 될 때 콜백 함수를 실행하게 된다.

이렇게 코드를 짜게되면,
영화 리스트 데이터를 다 받아오고 나서 정렬 버튼을 누르게 되니까
받아온 데이터 내에서만 정렬되게 된다.

📌 특정 값이 바뀔때 마다 실행

useEffect(() => {
  // 실행할 코드 작성
}, [값]);

컴포넌트가 처음 렌더링 될때 리액트가 콜백 함수를 기억해뒀다가 실행한다.
그 이후에 렌더링 될 때에는 , dependency array (혹은 list) 에 있는 값을 확인하고 해당 값이 바뀌었을 때에만 실행한다.

// 영화 리스트 배열로 저장
const [items, setItems] = useState([]);
// 영화 정렬 rating/createdAt 두가지 방식 지정
const [order, setOrder] = useState("createdAt");

// 영화 리스트들을 정렬해주는 함수
const handleNewestClick = () => setOrder("createdAt");
const handleBestClick = () => setOrder("rating");

// 영화 리스트를 불러오는 함수
const handleLoad = async () => {
const { reviews } = await getReviews();
  setItems(reviews);
};
useEffect(() => {
  handleLoad();
}, [order]);

order가 들어가있는 곳이 dependency array 부분이다.
order에는 어떤 값을 기준으로 정렬할지가 정해져있기 때문에,
setOrder값이 업데이트 될 때에만 useEffect안의 영화 리스트 불러오는 함수가 실행된다.

🎀 그쪽도 Clean-up 함수를 아는지?

웍웍워억

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하면 쉽다.

📌 문제 상황

const [preview, setPreview] = useState();

useEffect(() => {
  // value(업로드 된 이미지 파일 주소)가 있는지 체크
  if (!value) return;
  // value 주소를 메모리에 있는 객체(일반적으로 Blob이나 File 객체)에 대한 임시 URL로 바꾸어 생성한다.
  const nextPreview = URL.createObjectURL(value);
  // 임지 URL을 미리보기 세터 함수를 이용해 업데이트 해준다.
  setPreview(nextPreview);
}, [value]);

이렇게 코드를 짜면, value 값이 업데이트 되었을 때
미리보기 이미지 역시 업데이트되게 된다.

하지만, 메모리에 계속해서 미리보기 이미지가 추가되어진다.
이전 미리보기 이미지를 삭제해주지 않고 추가만하고 있기 때문!

📌 Clean-up(정리) 함수로 해결!

const [preview, setPreview] = useState();

useEffect(() => {
  // value(업로드 된 이미지 파일 주소)가 있는지 체크
  if (!value) return;
  // value 주소를 메모리에 있는 객체(일반적으로 Blob이나 File 객체)에 대한 임시 URL로 바꾸어 생성한다.
  const nextPreview = URL.createObjectURL(value);
  // 임지 URL을 미리보기 세터 함수를 이용해 업데이트 해준다.
  setPreview(nextPreview);;

  return () => {
    // 정리 함수
    setPreview();
    URL.revokeObjectURL(nextPreview);
  };
}, [value]);

정리 함수를 활용해서,
이미지 미리보기 세터 함수를 초기화해준다.
그리고 URL.revokeObjectURL를 활용해서 이전 url을 메모리에서 제거해 준다.

clean-up 함수는 이전 useEffect 호출에서 반환된 후에 새로운 useEffect가 실행되기 전에 실행된다.

즉, dependency array 안의 값이 업데이트 되기 전에 정리 되어지기 때문에
이전 미리보기 URL 초기화를 하고 새로운 미리보기를 받아올 수 있게 된다.