useEffect 활용

useEffect() 는 컴포넌트가 mount되거나 update되었을 때 모두 함수가 실행되서
class형 컴포넌트에서의 componentDidMount() + componentDidUpdate() 의 속성을 모두 띄운다고 이해하면 편할 것 같다

useEffect()

useEffect(실행할함수)

가장 기본적인 형태로 두번째 인자를 따로 주지 않고 실행할 함수를 실행한다면
컴포넌트가 마운트되고 + 매번 업데이트 될때마다 함수는 계속 호출된다

useEffect()의 두번째 인자

useEffect(setIsWishAdd, [isWishAdd])

만약 이렇게 useEffect()를 주게 되면
isWishAdd의 state가 변경될 때마다 실행되는 것이 아니라
componentDidMount() : 해당하는 컴포넌트가 mount됐을 때 처음으로 setIsWishAdd() 함수가 실행되고
componentDidUpdate() : 그 뒤로는 isWishAdd의 state가 변경될 때마다 setIsWishAdd() 함수가 실행된다

이런 성향의 useEffect() 메서드를
컴포넌트가 마운트가 되었을 때
혹은, 컴포넌트가 업데이트 되었을 때만 실행하고 싶다면 아래의 방법을 따라하면 좋을 것 같다

컴포넌트가 처음 렌더링되었을 때만 실행

useEffect(setIsWishAdd, [])

두번째 인자로 빈 배열을 주게 되면 첫 렌더링될때만 setIsWishAdd() 함수가 호출되고 그 뒤로는 재호출되지 않는다

해당하는 state 값이 변경되었을 때만 실행

const mounted = useRef(false);

const firstFunc = () => {
  if(!mounted.current) {
    mounted.current = true;
  } else {
  	//바뀌는 값에 따라 실행할 코드
  }
}

useEffect(firstFunc, [바뀌는값])

useEffect의 특성상 어쩔 수 없이 componentDidMount 역할을 하지만
조건문을 걸어서 처음에 렌더링되었을 때에는 mounted의 값만 true로 바꿔주고
그 이후에 바뀌는값이 변경될 때마다 firstFunc의 else부분의 코드를 실행하게 된다