useEffect() 함수

처음 한 번만 실행하기

useEffect() 함수를 사용하면 처음 컴포넌트를 렌더링하고 콜백 함수를 실행할 수 있었는데요.
이때 콜백 함수랑 빈 배열로 useEffect() 함수를 실행하면 딱 한 번만 실행할 수 있었습니다.

 const handleLoad = async () => {
    const { foods } = await getRequest();
    setItems(foods);
  };

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

값이 바뀔 때마다 실행하기

useEffect(() => {
  // 실행할 코드
}, [dep1, dep2, dep3, ...]);

컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행합니다.

그 이후로 렌더링 할 때는 디펜던시 리스트에 있는 값들을 확인해서 하나라도 바뀌면 콜백 함수를 기억해뒀다가 실행합니다.