React - hooks (useEffect)

Hooks 이전 Class 컴포넌트 때 는 라이프사이클이란게 있었다. 여기서 라이프사이클이란 어떤 어플리케이션이 실행(Mount) 되고 종료(UnMount) 되기 까지의 과정이다. 

constructor ➡ componentWillMount ➡ componentDidMount ➡ componentWillUnmount

그리고 컴포넌트의 갱신에 있어서 componentWillUpdate와 componentDidUpdate가 있다.

 

함수형 컴포넌트에선 useEffect란 훅이 이 과정중 일부를 대신해 줄 수 있는데 

useEffect는 클래스 기반 Lifecycle 메소드에서 componentDidMount와 componentDidUpdate, componentWillUnmont 세 가지 역할을 할 수 있다.

 

• componentDidMount( ) 렌더가 처음 실행될때 실행됨
• componentWillMount( ) 컴포넌트가 제거되기 직전
• componentDidUpdate( ) // 렌더링 이후 두번째 배열의 인자 상태값이 바뀌었을 때

 

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

 

그리고, useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데, deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

 

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

 

주로 Mount시 하는 작업은 보통

• props로 받은 값을 컴포넌트 로컬 상태로 설정
• 외부 API 요청 
• 라이브러리 사용
• setInterval 통한 반복작업 혹은 setTimeout을 통한 작업 예약

UnMount시 하는 작업은 보통

• setInterval, setTimeout을 통한 작업 clear 하기
• 라이브러리 인스텐스 제거

두번째 인자인 deps 배열에 특정 값을 넣으면 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. 그리고, deps 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 된다.

따라서 deps 배열엔 꼭 다시 실행한 값만 넣어줘야 된다