React Hooks - useEffect

어떤 컴포넌트가 Mount(화면에 첫 렌더링) 되었을 때, Update(다시 렌더링) 될 때, 혹은 Unmount(화면에서 사라질 때) 때 특정 작업을 처리할 코드를 실행시켜주고 싶다면 useEffect를 사용하면 된다.

 

기본적으로 useEffect Hook은 인자로 콜백 함수를 받는다.

콜백 함수란 다른 함수의 인자로 전달된 함수를 의미한다.

이 콜백 함수 내부에 원하는 작업을 처리해 줄 코드를 작성해 주면 된다.

 

useEffect는 두 가지 형태가 있다.

1) useEffect의 인자로 하나의 콜백 함수만 받는 형태

useEffect(()=>{
//작업...
})

- 렌더링 될 때마다 콜백이 실행 (컴포넌트가 맨 처음 화면에 렌더링 될 때, 컴포넌트가 다시 렌더링 될 때)

2) useEffect의 첫 번째 인자로는 콜백 함수, 두 번째 인자로는 배열(dependency array)를 받는 형태

useEffect(()=>{
//작업...
},[value])

- 컴포넌트가 맨 처음 화면에 렌더링 될 때, 배열 안에 들어있는 요소의 값이 바뀔 때만 실행된다.

- 빈 배열을 넣을 경우 컴포넌트가 맨 처음 화면에 렌더링 될 때만 실행된다.

 

Clean Up

만약 useEffect에서 어떤 서비스에 구독하는 코드를 넣었다면 이후에 구독을 해제해주는 클린업 정리작업을 처리해주어야 한다. 예를 들어 타이머를 시작했다면 더 이상 타이머가 필요없을 때 타이머를 멈추는 정리작업을, 혹은 어떤 이벤트리스너를 등록을 했다면 등록한 리스너를 제거해주는 정리작업을 해야한다.

이런 정리작업을 처리해 주려면 useEffect의 리턴값으로 함수를 넣어주면 된다. 이 함수 안에서 정리하는 작업을 처리해주면 된다.

useEffect(()=>{
// 구독..
return () =>{
// 구독해지..
}
},[])

이렇게 함수를 return해주면 해당 컴포넌트가 unmount될 때, 혹은 다음 렌더링 시 useEffect가 실행되기 이전에 이 함수가 실행된다.