useEffect

useEffect 함수를 통해 함수형 컴포넌트가 업데이트 될때마다 특정 작업을 수행할 수 있다.

예를 들어 컴포넌트 초기렌더링 시 필요한 상태값을 생성할 수 있다.

첫번째 인자의 함수 내부 로직으로 렌더링시 수행할 작업을 정의할 수 있고
해당 함수의 리턴값으로 업데이트 or 언마운트시 수행할 작업을 정의할 수 있다.

 

참고로 첫번째 인자의 return 은 선택적으로 정의할 수 있는데
초기상태값이 특정 조건에 따라 다르게 할당되어야 한다면
return 에 반드시 상태값을 초기화하는 디스패치 로직이 추가되어야 한다.

그렇지 않으면 컴포넌트 렌더링시 아주 짧은 시간동안

이전 상태값이 나타나는 깜빡임 현상이 발생한다.

 

사용법은 대략 아래와 같은데
리덕스를 사용하는 환경에서 dispatch(getTodos());로 초기 상태값을 읽어오고
언마운트시 dispatch(initTodos());상태값을 다시 초기화 하는 예이다.

useEffect(() => {
    dispatch(getTodos());
    return () => {
        dispatch(initTodos());
    }
}
, [dispatch]);

 

useEffect는 기본적으로 초기렌더링과 리렌더링시 모두 실행된다.

useEffect의 두번째 인자로 지정하는 배열의 경우 리렌더링시

특정 상태의 변화와 useEffect 실행여부를 연결하는 역할을 한다.

 

위와 같이 할 경우 dispatch 를 두번째 인자 배열에 추가했을 경우

리렌더링시 dispatch 값의 상태가 변경되었을 때에만 useEffect 를 실행하게 된다.

만약 초기 렌더링시에만 실행되고 리렌더링시 실행하고 싶지 않다면 [] 와 같이 빈배열을 선언하면 된다.