리액트 훅 useEffect란

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.

-useEffect 발동조건
1.페이지가 렌더링 될 때

2.state 값이 변경되면서 실행 될 때

useEffect는 콜백함수를 부르면서,
렌덩링 혹은 값 변경에 따라 함수 혹은 여러 개의 함수들을 작동시킬 수 있다

export default function Products() {
  const [products, setProducts] = useState([]);
  const [checked, setChecked] = useState(false);
  const handleChange = () => setChecked((prev) => !prev);

  useEffect(() => {
    fetch(`data/${checked ? 'sale_' : ''}products.json`)
      .then((res) => res.json())
      .then((data) => {
        console.log('🔥뜨끈한 데이터를 네트워크에서 받아옴');
        setProducts(data);
      });
    return () => {
      console.log('🧹 깨끗하게 청소하는 일들을 합니다.');
    };
  }, );

useEffect 의 사용 예시이다 .

이렇게 사용할 경우 무한루프가 걸리게 된다 .

함수가 실행되면서 state를 초기화 해준 다음에 네트워크를 받아와서 데이터를 받아오면 setProducts

를 이용해서 상태를 업데이트한다 . 상태가 변경되면 상태가 변경된 컴포넌트에 함수를 리액트가 다시 호출

한다 . 함수가 다시 실행되면서 fetch가 다시 실행이 되면서 무한 루프에 빠지게 된다

무한 루프를 방지하기 위해서 [] 디펜더/빈 배열을 사용한다 최초1회만 발생하게 한다!