useEffect

컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정
부수 효과(side effects)를 수행하기 위해 사용.
리액트 외 외부시스템과 동기화 시킬때 주로 사용
ex) fetching, Dom수동조작 등

사용법

useEffect(() => {
  console.log("test")
  // 실행 코드
}, [dependencies]);

• 의존성 배열(dependencies array)?
  dependencies에 값을 넣으면 그 값에 변화가 생길때만 useEffect 실행.

1. 최초 랜더링때 한번만 실행

useEffect(() => {
  console.log("한번만 실행");
}, []); //의존성 배열이 비어있기 때문에 한번만 실행

2. 특정 값이 변경될 때 실행

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

useEffect(() => {
  console.log("의존성배열이 바뀔때마다 실행");
}, [count]); // count 값이 변경될 때마다 실행.

클린업 함수(clean up) ?

useEffect 훅 내부에서 생성되며,
주로 리소스를 정리(clean up)하기 위해 사용.
컴포넌트가 언마운트(사라졌을때)될 때나,
의존성 배열에 명시된 값이 변경되어 효과가 다시 실행될 준비가 될 때 호출.
컴포넌트가 사라진후에도 이벤트 리스너나 타이머 등이 실행되면서
발생 할 수있는 메모리 누수 등을 방지

사용 예시

useEffect 안에서 return 을 해주고 이 부분에 실행되길 원하는 함수를 작성

 const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수
       //컴포넌트 마운트 이후 실행
      //의존성 배열(dependencies array)에 변화된 값이 있는 경우, 
      //클린업 함수 이후에 실행

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수
          //페이지 이동으로 인해 다른 컴포넌트가 마운트 된 후에 실행
          //의존성 배열(dependency array)안의 값이 변경되었을 때 
          //리렌더링 이후 곧바로 실행
		}
	}, [test])

	return <div>hello react!</div>
};

컴포넌트 라이프사이클

컴포넌트가 태어나고, 살아가고, 죽는 생애주기
함수형 컴포넌트를 사용하는 요즘 useEffect를 주로 사용하여 핸들링.

이미지 출처

• 마운트 : 컴포넌트가 처음으로 DOM에 삽입될 때
  
• 업데이트 :
  1.props가 바뀔 때
  2.state가 바뀔 때
  3.부모 컴포넌트가 리렌더링될 때
  4.강제로 트리거를 발생시킬 때 (this.forceUpdate)
• 언마운트 : 컴포넌트가 DOM에서 제거될 때