[React.js] 7. hook useEffect

컴포넌트에는 라이프사이클이 있다.

마치 생명이 시작되고 끝나기까지 과정이 컴포넌트에도 똑같이 진행된다.

useEffect를 소개하기전 컴포넌트 라이프사이클에 대해 먼저 알아보자.

컴포넌트 라이프 사이클

• 마운트
• 업데이트
• 언마운드

마운트

컴포넌트 인스턴스가 DOM에 삽입될 때 실행되는 메서드 호출 순서

• constructor()
• static getDeriverdStateFromProps()
• render()
• componentDidMount()

업데이트

props, state가 변경되어 컴포넌트가 다시 렌더링될 때 메서드 호출 순서

• static getDeriverdStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

언마운트

컴포넌트가 DOM에서 제거될 때 메서드 호출

• componentWillUnmount()

이렇게 마운트, 업데이트, 언마운트 메서드를 적어보았다. 자세한 내용은 React API를 참고하면 된다.

https://ko.reactjs.org/docs/react-component.html

React.Component – React

useEffect

useEffect()와 관련있는 메서드

• componentDidMount
• componentDidUpdate
• componentWillUnmount

useEffect() 하나로 마운트, 업데이트, 언마운트 모든 과정에 관여할 수있다.

마운트, 업데이트

useEffect(() => {
	console.log("마운트 완료");
});

특정값 업데이트

useEffect에 빈 배열을 파라미터로 주면 마운트할 때만 실행된다.

useEffect(() => {
	console.log("name 업데이트 완료");
}, [name]);

cleanUp

언마운트, 업데이트 직전 반환 함수 실행

useEffect(() => {
	console.log("마운트 완료");
    return () => {
    	console.log("클린업 : 마운트, 업데이트 직전");
});