useEffect

함수형 컴포넌트의 생명주기 'useEffect'

클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 있다.

Q. 그럼 함수형 컴포넌트에서의 생명주기관련 훅은 무엇일까?

바로 useEffect 이다.

React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.
-React 공식 사이트-

Q. 그럼 useEffect의 실행 시점은 언제일까?

생명주기 메서드, 훅은 기본적으로 화면이 그려진 이후 즉 렌더링 후에 실행된다. 따라서 useEffect와 lifecycle 메서드는 렌더 이후에 실행된다.

componenetDidMount와 동일

// 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 된다. (1번만 실행)
 useEffect(() => {
    	console.log("컴포넌트 마운트 완료")
        inputRef.current.focus()
    },[])

componentDidUpdate와 비슷

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행된다.
    useEffect(() => {
    	console.log("컴포넌트 수정 완료")
    })

// newState가 수정될때만 리렌더 됨
useEffect(()=>{
		console.log("수정하고 다시 그려짐")
	},[newState])

componenetWillUnmout와 동일

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")

		//이부분이 끝나고 진행할 것들
		return()=>{
			console.log("여기서 나갈래요!!")
		}

	},[])

componentDidUpdate와 비슷하지만 다른점 하나는, Mount 되자마자 실행되는 점이다.

useEffect 사용시 주의 사항

useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양한다. 왜냐하면 컴포넌트가 마운트된 이후에 setState를 적용하게 되면
1) state가 변경되고, 2) 변경된 state로 컴포넌트가 리렌더 된다.

여기서 useEffecrt 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으키게 되고 성능면에서 비효율적이게 되기 때문이다.

출처 및 참고
https://ko.reactjs.org/docs/hooks-effect.html