React 라이프사이클

마운트

마운팅은 컴포넌트가 DOM에 삽입되는 과정을 의미한다. 클래스형 컴포넌트에서는 componentDidMount() 메서드를 사용하여 컴포넌트가 마운트 된 후에 수행해야하는 작업을 설정할 수 있다. 대표적으로 비동기 요청을 호출하는 작업이 있다.

// useEffect() 의 두 번째 인자로, 빈 배열을 주는 경우, 콜백 함수는 마운트 이후 1회만 실행이 된다.
useEffect(() => {
	// 이 부분
}, [])

업데이트

업데이트는 컴포넌트가 새로운 props나 state를 받아서 다시 렌더링되는 과정을 의미한다. 클래스형 컴포넌트에서는 componentDidUpdate() 나 getDerivedStateFromProps() 를 통해 작업 완료 후 실행할 작업을 호출하거나 shouldComponentUpdate() 메서드를 사용하여 컴포넌트가 다시 렌더링되어야 하는지 여부를 결정할 수 있다.

// useEffect() 의 두 번째 인자로, 변수를 담은 배열을 넣어주면, 해당 변수의 값이 변경되었을 때 마다, 콜백 함수가 실행된다.
useEffect(() => {
	// 이 부분
}, [...])

언마운트

언마운팅은 컴포넌트가 DOM에서 제거되는 과정이다. 클래스형 컴포넌트에서는 componentWillUnmount() 메서드를 사용하여 컴포넌트가 제거되기 전에 수행해야하는 작업을 설정할 수 있. 예를 들어 타이머를 삭제하거나 이벤트 리스너를 제거하여 메모리를 반환하도록 하는 작업이 있다.

useEffect(() => {  
    return () => {
		// 이 부분  
    }
}, [...])