useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 hook이다.

Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 의미한다.

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar 함수는 Side Effect를 발생시킨다.

useEffect의 첫번째 인자는 함수를, 두번째 인자에는 의존성 배열을 전달한다.

의존성 배열이 없을 경우

useEffect(() => {
	console.log('Hello');
})

• 컴포넌트 생성 후 처음 화면에 렌더링 될 때
• 컴포넌트에 새로운 props가 전달 될 때
• 컴포너틑에 state가 바뀔 때

렌더링이 일어난다. 따라서 리액트 컴포넌트 안에 일반적인 함수를 작성할 떄와 차이가 없다.

의존성 배열이 있을 경우

useEffect(() => {
  console.log('Hello');
}, [])

위와 같이 빈 배열을 전달하면 컴포넌트 생성 후 처음 화면에 렌더링 될 때 한번만 함수가 실행된다.
컴포넌트 안의 state가 변경되고, props가 전달되어도 useEffect 함수는 실행되지 않는다.

useEffect(() => {
  console.log('Hello');
}, [종속성1, 종속성2 ...])

위와 같이 배열 안에 종속성을 전달하면, 배열 안의 종속성들이 변할 때 마다 useEffect 함수가 실행된다.

clean up

useEffect(() => {
  console.log('Hello');
  
  return () => console.log('clean up');
}, [])

useEffect은 위와 같이 함수를 리턴할 수 있는데 이를 cleanup 함수라고 부른다.
cleanup 함수는 컴포넌트가 unmount 될 때 실행되는 함수이다.