useEffect

상태변경 함수 호출로 인한 무한루프

export default function Products() {
  const [products, setProducts] = useState([]);

  fetch('data/products.json')
    .then((res) => res.json())
    .then((data) => {
      console.log('데이터 받아옴');
      setProducts(data);
    });

  return (
    ...
  );
}

• 함수 컴포넌트 내부에서 상태변경 함수를 호출하면 state 의 값이 변경됨
• state 가 변경되면 리액트는 상태가 변경된 컴포넌트 함수를 다시 호출함
• 내부에서 상태변경 함수를 다시 호출함
• 무한 루프에 빠짐

 

이때 필요한 것이 useEffect

 

 useEffect(() => {
   // 코드 ...
 }, []);

• useEffect 의 첫 번째 인자로 콜백 함수를 전달함
• useEffect 의 두 번째 인자로 빈 배열을 전달함
• 해당 컴포넌트가 mount 될 때 딱 한 번만 콜백 함수가 실행됨
• 처음 한 번만 실행해야 될 것들 작성

 

 useEffect(() => {
   // 코드 ...
   return () => {
     // 정리
   };
 }, []);

• useEffect 안의 반환문에 콜백함수 작성
• 해당 컴포넌트가 unmount 될 때 실행됨
• 컴포넌트가 없어질 때 정리할 것들 작성 (메모리 정리, 소켓 네트워크 통신 닫기 ...)

 

 useEffect(() => {
   // 코드 ...
 }, [state이름]);

• 작성한 state 가 변경될 때 마다 실행됨