useEffect

useEffect는 컴포넌트가 마운트/언마운트/업데이트시 할 작업을 정해주는 Hook이다

deps가 비어있을 경우

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열deps를 넣는다. 만약에 deps배열을 비우게 된다면, 컴포넌트가 처음 나타낼때에만
useEffect 에 등록한 함수가 호출된다.

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []); <<<<<<<<

위 코드에서는 함수를 반환해주는데 이를 cleanup 함수라고 부르고 deps 가 비어있는경우 언마운트 될 때 (컴포넌트가 사라질 때) cleanup 함수가 호출 된다

주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있다.

• 외부 API요청
• 라이브러리 사용
• setinterval 등을 통한 반복작업 등 작업 예약

그리고 언마운트 시에 하는 작업들으 다음과 같은 사항들이 있다.

• setinterval 등을 사용한 작업 clear하기
• 라이브러리 인스턴스 제거

---

deps에 특정값이 있을 경우

다음 코드는 두번째 파라미터로 특정값을 넣어 주었을 때다.

useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]); <<<<<<<<<

deps 에 특정 값을 넣게 된다면
1. 컴포넌트가 처음 마운트 될 때 호출
2. 지정한 값이 바뀔 때 호출
3. 언마운트 될 시에도 호출
4. 값이 바뀌기 직전에도 호출

dpes를 생략 할 경우

 useEffect(() => {
    console.log(user);
  });

deps 파라미터를 생략한다면 , 컴포넌트가 리렌더링 될 때마다 호출