6. useEffect

useEffect는 react의 hook함수 입니다.

이 함수는 컴포넌트가 마운트 완료한 후 항상 실행되는 함수입니다.

useEffect를 사용하는 이유는 함수컴포넌트에서 side effect를 사용하기 위해서라고 합니다.

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다. 이런 기능들(operations)을 side effect(혹은 effect)라 부르는 것이 익숙하지 않을 수도 있지만, 아마도 이전에 만들었던 컴포넌트에서 위의 기능들을 구현해보았을 것입니다.

 

한마디로 정리하자면 '컴포넌트 업데이트 전/후 실행해야 되는 동작들을 정의해놓는 곳'이라고 생각할 수 있습니다.

useEffect 함수를 컴포넌트 안에서 사용하는 이유는 '컴포넌트 안에서 정의한 state에 접근하기 위해서'라는 설명이 있습니다.

(state는 컴포넌트 안에서 정의되고 정의된 컴포넌트 안에서만 사용할 수 있습니다.)

useEffect는 컴포넌트가 업데이트 될 경우, 항상 다시 호출되는 hook입니다.

 

자세한 내용은 아래의 공식 문서를 참조하시면 되겠습니다.

https://ko.legacy.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

Using the Effect Hook – React

공식문서에는 class와 hook함수를 작성하는 방법으로 2가지의 방법이 있는데 저는 hook의 방법만을 설명하겠습니다.

공식문서에서는 이 useEffect를 2가지로 구분할 수 있다고 하였습니다.

 

clean-up이 필요한 것 VS 필요하지 않은것

필요하지 않은 것에는 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요없는 경우들입니다.(실행 후 신경쓰지 않아도 되는 부분들)

 

 

clean-up 함수가 필요한 경우는  '외부 데이터에 구독(subscription)을 설정해야 하는 경우'가 있습니다.

솔직히 이 문장이 이해가 안 되는 부분이 있을 수 있습니다.

더 좋은 이해를 위해 아래 내용을 참조하세요

Let’s look at this scenario: imagine we get a fetch of a particular user through a user’s id, and, before the fetch completes, we change our mind and try to get another user. At this point, the prop, or in this case, the id, updates while the previous fetch request is still in progress.

 함축하면 만약 특정한 유저에 관한 것을 가져오고 있는 중 다른 유저의 데이터를 가져와야 하는 상황이 발생하면, 전에 가져오던 과정을 종료해야 합니다.(메모리 누수를 막기 위해) 이를 위해 clean-up함수를 사용한다고 합니다.

clean-up 함수가 실행되는 순서는 다음과 같습니다.

1. props/state 업데이트
2. 컴포넌트 리-렌더링
3. 이전 이펙트의 클린-업 함수
4. 새로운 이펙트 실행

 

//컴포넌트 업데이트마다 실행(state 값이 변경된 경우)
//class의 componentDidUpdate 와 동일
useEffect(() => {
	
});

//특정한 state의 값이 변경된 경우 실행
useEffect(() => {
	
},[updated state]);

//컴포넌트가 처음으로 실행 될 때 실행
//class의 componentDidMount 와 동일
useEffect(() => {
	
},[]);

//컴포넌트가 DOM에서 사라질 경우 실행
//class의 componentWillUnmount 와 동일
useEffect(() => {
	
    return () => {
    
    }
},[]);

https://junhyunny.github.io/javascript/react/jest/how-to-test-clean-up/

useEffect 훅(hook) 클린-업 함수 테스트

https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

Understanding React’s useEffect cleanup function - LogRocket Blog