useEffect

useEffect 란?

component가 마운트 / 언마운트 / 업데이트될 때,
할 작업을 선택하도록 하는 Hook함수
(외부 API를 요청하거나, 반복작업 / 작업예약 등에 쓰임)

기존의 class형에서는 세 가지의 각 상태들을 따로 관리해야 하는 불편함이 있었는데, useEffect를 사용하면 한 번에 관리할 수 있어 편리하다!

 

세 가지의 상태들을 기존의 메서드와 매칭하여 좀 더 알아보자면,

mount
: component가 처음 화면에서 보여질 때 (새로고침 시) (componentDidMount 메서드)

unmount
: component가 화면에서 사라질 때
(componentWillUnmount 메서드)

update
: 특정 props가 바뀌어 component가 업데이트될 때
(componentWillUpdate 메서드)

 

useEffect 사용하기

기본 사용법

useEffect(함수, [의존값 deps]);

useEffect(() => {
    mount 시 실행할 함수;
    return () => {unmount 시 실행할 내용}
}, [deps값]);

1) 먼저 mount 시 실행할 함수를 작성한다.
2) 반환 값에는 unmount 시 실행할 내용을 작성한다. (cleanup)
3) deps값에 특정 값을 넣으면, 해당 값이 업데이트될 때마다 useEffect에 작성한 함수가 재실행된다.

*빈배열로라도 두어야 useEffect에 작성한 함수가 처음 mount될 때만 실행됨(생략하면, 리렌더링 될 때마다 계속 함수를 불러오게 되니까)

*cleanup 함수
해당 effect가 더 이상 실행할 필요가 없을 때 청소하는 용도.
여기서 더 이상 실행할 필요가 없는 경우는 다음 두 가지이다.
1) dependancy(두 번째 인자로 넘기는 배열)가 바뀌어서 effect가 달라져야할 때 (이전 effect 청소)
2) 해당 component가 unmount 될 때