React - useEffect의 사용법과 예제

useEffect

리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다.

useEffect(effect, [, deps]);

파라미터

1. effect함수
   • 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.)
   • effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다. 
2. deps
   • 특정한 값이 변경될 때 effect함수를 실행 하고 싶을 경우 배열안에 그 값을 넣어준다.
     • 예 ) name변수가 변경 될 때 useEffect(effect, [name])
   • 빈 배열을 입력할 경우 컴포넌트가 Mount 될 때에만 실행 된다.

1. •  

componentDidMount 혹은 componentDidUpdate와는 달리 useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트하는 것을 차단하지 않습니다. 이를 통해 애플리케이션의 반응성을 향상해줍니다. 대부분의 effect는 동기적으로 실행될 필요가 없습니다. 흔하지는 않지만 (레이아웃의 측정과 같은) 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 별도의 Hook이 존재합니다.

 

예제

1. 렌더링 될때마다 실행

 - Class Component

 componentDidMount, componentDidUpdate 이용

 

 

 - Function Component(useEffect)

 useEffect(effect)

 

<

 

 

2. 컴포넌트가 마운트 될 때만 실행

 - Class Component

componentDidMount이용

 

 

 - Function Component(useEffect)

useEffect(effect, [])

 

 

3. 특정 값이 변경 될 때만 실행

- Class Component

componentDidUpdate 이용

 

 

- Function Component(useEffect)

useEffect(effect, [value1, value2, ... ])

 

<

4. 정리(Clean up) 하기

- Class Component

componentWillUnmount 이용

 

 

- Function Component

effect함수에 cleanup 함수를 return