마운팅은 컴포넌트가 DOM에 삽입되는 과정을 의미한다. 클래스형 컴포넌트에서는 componentDidMount()
메서드를 사용하여 컴포넌트가 마운트 된 후에 수행해야하는 작업을 설정할 수 있다. 대표적으로 비동기 요청을 호출하는 작업이 있다.
// useEffect() 의 두 번째 인자로, 빈 배열을 주는 경우, 콜백 함수는 마운트 이후 1회만 실행이 된다.
useEffect(() => {
// 이 부분
}, [])
업데이트는 컴포넌트가 새로운 props나 state를 받아서 다시 렌더링되는 과정을 의미한다. 클래스형 컴포넌트에서는 componentDidUpdate()
나 getDerivedStateFromProps()
를 통해 작업 완료 후 실행할 작업을 호출하거나 shouldComponentUpdate()
메서드를 사용하여 컴포넌트가 다시 렌더링되어야 하는지 여부를 결정할 수 있다.
// useEffect() 의 두 번째 인자로, 변수를 담은 배열을 넣어주면, 해당 변수의 값이 변경되었을 때 마다, 콜백 함수가 실행된다.
useEffect(() => {
// 이 부분
}, [...])
언마운팅은 컴포넌트가 DOM에서 제거되는 과정이다. 클래스형 컴포넌트에서는 componentWillUnmount()
메서드를 사용하여 컴포넌트가 제거되기 전에 수행해야하는 작업을 설정할 수 있. 예를 들어 타이머를 삭제하거나 이벤트 리스너를 제거하여 메모리를 반환하도록 하는 작업이 있다.
useEffect(() => {
return () => {
// 이 부분
}
}, [...])