[React Hook 시리즈 2]: useEffect()

 

 

1. useEffect 란?

컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다. 컴포넌트의 정보를 다른 데서 가져와 나중에 내용을 업데이트 한다거나, 네트워크 통신 등의 작업을 하는 작업들에 해당한다. DOM 업데이트, Browser Paint가 완료된 후에 UseEffect가 호출된다. 참고로 useEffect는 클래스 컴포넌트의 componentDidMount, componentDidUpdate 를 함수형 컴포넌트에서 구현한 것이다.

 

2. useEffect 사용하기

1) callback

: render()함수가 실행될 때마다 호출되며, return 값으로 clean-up 함수가 들어간다.

2) dependency

: Skipping effect라고 부르며, 성능 향상을 위해 effect를 선택적으로 호출하는 방법이다. render() 함수가 실행되면, dependency를 거쳐 effect가 호출되어야 하는지 한번더 필터링한다. 변경을 감지할 변수들을 배열에 담으며, 이를 통해 바뀐 값에 대한 처리만 할 수 있게 된다. deps를 생략하면, 컴포넌트가 랜더링 될 때 마다 호출된다. deps가 빈 배열이면, 컴포넌트가 마운트 될 때, 한 번만 실행되며 didMount 역할만하고, didUpdate 역할은 하지 않는다.

// 컴포넌트가 랜더링 될 때 마다 호출된다.

useEffect(() => {
	console.log("useEffect가 실행 될 때 마다 호출된다.")
	return () => {
    	console.log("새로운 useEffect가 실행 될 때 마다 호출된다.")
    }
});

// 컴포넌트가 최초로 마운트 될 때만 실행된다.

useEffect(() => {
	console.log("useEffect가 실행 될 때 마다 호출된다.")
	return () => {
    	console.log("컴포넌트 제거될 때 호출된다.")
    }
},[]);

// 컴포넌트의 state가 바뀔 때 마다 호출된다.

useEffect(() => {
	console.log(`useEffect가 실행 될 때 마다 호출된다. newState:${state}`)
	return () => {
    	console.log(`useEffect가 실행 될 때 마다 이전의 effect를 정리하기 위해 호출된다. 
        prevState: ${state} `)
    }
},[state]);

3) clean-up 구현

- useEffect가 다시 한번 실행될 때, 이전에 실행했던 것을 정리하기 위해 구현된 함수다.
- 클래스 컴포넌트의 componentWillUnMount 와 비슷한 기능을 수행한다.
- clean-up 함수를 통해 이전의 state를 참조할 수 있다.

- 예를 들어, 컴포넌트가 API를 통해 데이터를 계속 가져오고 있는데, 만약 clean-up하지 않으면, 컴포넌트는 사라지더라도 데이터를 가져오는 코드는 계속 발생하기 때문에 메모리 누수가 발생한다.

 

useEffect(() => {
    console.log(`effect: ${count}`)
    return () => {
      console.log(`clean-up: ${count}`)
    }
},[count])

실행 순서 (클릭 시 count 1 증가)

1. effect: 0 (처음 랜더링 됐을 때)
2. clean-up: 0 (클릭 시)
3. effect:1

 

3) useEffect는 여러개를 선언할 수 있다.

function FuncComp(props){
  
  useEffect(function(){
    console.log("useEffect A")
  })

  useEffect(function(){
    console.log("useEffect B")
  })
}