[React] useEffect() 함수

useEffect 함수란?

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

useEffect는 component가 Mount 되었을 때, component가 unmount 되었을 때, component가 update 되었을 때, 특정 작업을 처리할 수 있다.

📖 useEffect() 사용법

useEffect( function, deps )

• function - 수행하고자 하는 작업
• deps - 배열 형태로, 배열 안에는 검사하고자 하는 특정값 또는 빈 배열

1. Component가 mount 되었을 때 ( 처음 나타났을 때)

useEffect(() => {
	console.log('렌더링 시 실행');
});

배열 생략시 리렌더링 될 때마다 실행된다.

2. Component가 update 될 때 (특정 props, state가 바뀔 때)

useEffect(() => {
	console.log(name);
    console.log('name props가 업데이트 될 때마다 실행');
}, [name]);

• 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 값을 넣는다.
  (의존값이 들어있는 배열 deps 라고도 한다. = dependency)
• 업데이트 될 때만 실행되는 것이 아닌 마운트 될 때도 실행

3. Component가 unmount 될 때 (사라질 때) or update 되기 직전

useEffect(() => {
	console.log('effect');
    console.log(name);
    return () => {
    	console.log('cleanup');
        console.log(name);
    }
})

• cleanup 함수 반환 (return 뒤에 나오는 함수로 useEffect에 대한 뒷정리 함수라고도 한다.)
• 언마운트 될 때만 cleanup 함수를 실행하고 싶을 때 : 두 번째 파라미터로 빈 배열을 넣는다.
• 특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때

출처 :https://xiubindev.tistory.com/100