리액트 Hooks 에서 요번 시간에는 useEffect Hooks 에 대해서 알아볼려고 합니다.

• Mount : 컴포넌트가 화면에 첫 렌더링 되었을때를 Mount 되었다고 말합니다.
• Update : 컴포넌트가 화면에 다시 렌더링 되었을때를 Update 되었다고 말
  합니다.
• UnMount : 컴포넌트가 화면에서 사라질때를 UnMount 되었다고 말합니다.

위의 상황에서 특정 작업을 실행시키고 싶다면 useEffect 를 사용하면 됩니다.

useEffect

useEffect 는 인자로 콜백함수와 배열을 받습니다. 그럼 useEffect 를 사용할때 넘겨주는 인자에 따라서 어떻게 달라지는지 알아 봅시다.
1. useEffect 인자에 콜백함수만 전달할 때

useEffect(()=> {
  // 코드
});

위의 코드와 같이 useEffect 인자에 콜백함수만 전달하면 컴폰넌트가 처음 화면이 렌더링 될때와 컴포넌트가 리 렌더링 될 때마다 콜백 함수가 호출됩니다.

2. useEffect 인자에 콜백함수, 값이 들어있는 배열(dependency array) 을 전달할 때

useEffect(()=> {
  // 코드
},[value]);

위의 코드와 같이 useEffect 인자에 콜백함수와 배열을 전달하면 처음 화면이 렌더링 될때와 value 값이 변경될때 콜백 함수가 호출됩니다.

만약 빈 배열을 전달한다면 컴포넌트가 화면에 처음 렌더링 될 때만 콜백함수가 호출됩니다.

Clean Up

useEffect 의 콜백함수에서 실행한 타이머, 이벤트 등을 제거 해줄때 정리 작업을 해줘야 한다. 어떻게 하냐면

useEffect(()=> {
  // 코드
  
  return () => {
    // 정리작업 코드
  }
},[value]);

위의 코드처럼 useEffect 의 리턴 값으로 함수를 넣어주면 됩니다. 함수 안에서 정리 작업 코드를 작성하면 됩니다.
함수를 리턴해주면 해당 컴포넌트가 UnMount 될 때, 다음 렌더링 시 useEffect 가 실행되기 이전에 그 함수가 실행된다.

기억해야 할 점은 useEffect 의 콜백 함수가 실행되는 시점은 화면에 컴포넌틑가 렌더링 된 이후에 호출 됩니다.