[React Hook] useEffect

import 후 사용

import React, { useEffect } from "react";

 

useEffect 는 두 개의 매개변수를 받는다.

 - 첫번째 인자는 실행할 함수 

 - 두번째 인자는 의존성 배열(Dependency array)

함수는 실행 시점은 의존성 배열에 지정된 변수들의 상태가 변경될 때 실행된다. 

 

* 두번째 인자가 없는 경우 => 렌더링마다 실행.

useEffect(() => {
  console.log('컴포넌트가 렌더링될 때마다 실행');
});

 

* 두번째 인자가 빈 배열 [ ] 인 경우 => 최초 렌더링 후 한번 실행.

useEffect(() => {
  console.log('컴포넌트가 처음 렌더링될 때 한 번만 실행');
}, []);

 

* 두번째 인자가 주어지는 경우  => 주어진 특정 변수가 변경될 때만 실행

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('count가 변경될 때마다 실행', count);
}, [count]);