[React] useEffect란 ? ? ?

useEffect란 ?

저번에 useEffect 기본에 대해 배울때 vue의 watch와 같은거구나 하고 넘어갔었는데 정리를 하고 넘어가는게 좋을 것 같다.

React 공식문서에 나와있는 내용은 아래와 같다.
`React의 class 생명주기 메서드에 친숙하다면,
useEffect는 componentDidMount + componentDidUpdate + componentWillUnmount 이 3개가 합쳐진 것과 같다.

일단 useEffect는 처음 렌더링될때 한번 실행되고, 값이 바뀔때마다 실행이 되는데
자주 쓰는 방식은 3가지로 나뉘어지는 것 같다.

그리고 안에서 return을 해주면 clean-up 해주고 싶을때 사용하는 방식이라고 한다.

 

---

1. 콜백함수만 넘길때

useEffect(() => {
  return {
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
  }
})

이때는 계속 해서 실행되는데, 불필요한 실행이 많이 된다고 한다.

 

2. 두번째 인자로 [] 빈 array를 넘길때

useEffect(() => {
  return {
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
  }
}, [])

이렇게 뒤에 빈배열을 남겨놓으면 첫번째 렌더링때만 실행된다고한다. vue의 onMounted 같은 개념이다.

 

3. 두번째 인자로 변수를 넘길때

useEffect(() => {
  return {
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
  }
}, [변수])

이럴때는 vue의 watch와 동일하다. 첫번째 렌더링과 변수값이 변경될때 실행된다.

 

 

---

 

 

---

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React