React 라이프 사이클이란

React 의 LifeCycle

리액트 클래스형 컴포넌트에서만 사용할 수 있는 lifeCycle
리액트에서 컴포넌터는 여러 종류의 생명주기 메서드 를 가지며 이 메서드를 통해 오버라이딩하여 특정 시점에 코드를 실행되도록 설정할 수 있다.

• 오버라이딩 : 상속해서 재정의 하는 것

📌📌📌 React lifeCycle 은 컴포넌트가 브라우저 상에서 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들. 클래스형 컴포넌트에만 해당된다. 함수형 컴포넌트에선 Hook 을 사용한다.

생명주기 메서드

📕 Mount

• 컴포넌트가 인스턴스로 생성되어 DOM 트리에 삽입되어 브라우저 상에 나타나는 것

인스턴스
비슷한 성질, 기능을 가진 여러 개의 객체를 만들기 위해서 constructor (생성자 함수) 를 만들어서 찍어내듯이 사용하는데 이렇게 만들어진 객체를 인스턴스라고 한다
즉 클래스, 프로토타입으로 만들어 낸 객체를 인스턴스라고 한다

📌📌📌 아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출

constructor

• 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

class Example extends React.Components {
	constructor (props) {
    	super (props);
        this.state = {count : 0};
    }
}

• 클래스형에서는 초기 state 를 설정할 때 constructor 를 사용해야 한다. 함수 컴포넌트에서 이 대신 useState Hook 을 사용해 초기 상태를 간편하게 설정해줄 수 있다

const Example = () => {
	const [count, setCount] = useState(0);
}

getDerivedStateFromProps

• props 로 받아온 값을 state 에 동기화 시키는 용도로 사용
• 컴포넌트가 마운트 될 때, 업데이트 될 때 호출

class Example extends React.Component {
	static getDerivedStateFromProps(nextProps, prevState) {
    	if (nextProps.value !== prevState.value) {
        	return { value : nextProps.value}
        }
        return null;
    }
}

render ()

• 준비한 UI 를 렌더링 하는 메서드

class App extends React.Component {
	render () {
    	return (
        	<div>
            	<Example />
            </div>
        )
    }
}

• 함수 컴포넌트에서는 render 메서드를 쓰지 않고 렌더링 할 수 있다

const Example = () => {
	return <div> 함수 컴포넌트 </div>
}

componentDidMount

• 컴포넌트가 브라우저 상에서 나타난 후 호출하는 메서드
• 함수 컴포넌트에서는 useEffect hook 을 활용해 다음 기능 구현 가능

class Example extends React.Component {
	componentDidMount() {
    }
}

const Example = () => {
	useEffect(() => {
    
    }, []);
}

📕 Update

props 나 state 가 변경되면 리렌더링을 한다. 컴포넌트는 총 네가지 경우에 업데이트 한다

• props 가 변경 될 때
• state 가 변경 될 때
• 부모 컴포넌트가 리렌더링 될 때
• this.forceUpdate 로 강제로 렌더링을 트리거 할 때

getDerivedStateFromProps

• 마운트 과정에서 호출되고, 업데이트가 시작 되기 전에도 호출 된다
• props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용

shouldComponentUpdate

• props 나 state 를 변경할 때, 리렌더링을 할지 말지 결정하는 메서드
• 이 메서드에서는 반드시 true 나 false 를 반환해주어야 한다
• false 를 반환 시 작업을 중단 (컴포넌트가 리렌더링 되지 않는다)
• 오직 성능 최적화 만을 위한 메서드

class Example extends React.Component {
	shouldComponentUpdate (nextProps) {
    	return nextProps.value !== this.props.value
    }
}

• 함수 컴포넌트에서 useMemo hook 을 사용해서 렌더링 성능을 개선 할 수 있다

render

• 컴포넌트 리렌더링 메서드

getSnapshotBeforeUpdate

• render 에서 만들어진 결과가 브라우저에서 실제로 반영되기 직전에 호출
• 예를 들어, 브라우저에 그리기 전에 스크롤 위치, DOM 의 크기를 사전에 알고 싶을 때, 업데이트 되기 직전에 DOM 함수를 return 시켜 그 return 된 값을 componentDidUpdate 에서 받을 수 있다

componentDidUpdate

• 리렌더링을 완료한 후에 실행되는 메서드
• 컴포넌트가 업데이트 되었을 때 DOM 을 조작하기 위해 사용하거나, 이전과 현재의 props 를 비교하여 네트워크 요청을 보내는 작업을 할 때 사용
• 이 메서드에서 setState 를 사용하면 무한 렌더링이 될 수 있어, 꼭 조건문으로 감싸야 한다

componentDidUpdate(prevProps) {
	if (this.props.userID !== prevProps.userID) {
    	this.fetchData(this.props.userID);
    }
}

📕 Unmount

• DOM 에서 컴포넌트를 제거 하는 것을 언마운트라고 한다

componentWillUnmount

• 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출
• 컴포넌트를 DOM 에서 제거할 때 실행
• componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM 이 있다며 여기서 제거 작업

componentDidCatch

-컴포넌트 리렌더링 중에 에러가 발생하면 애플리케이션이 멈추지 않고 오류 UI 를 보여줄 수 있게 해준다

class Example extends React.Component {
	componentDidCatch(error, info) {
    	console.log('에러가 발생했습니다.')
    }
}

📌요약

클래스형에 라이프사이클 메서드에는 크게 mount, update, unmount 총 3가지 과정으로 나뉜다
mount 에서 컴포넌트가 만들어질 때 componentDidMount 에서 비동기처리 같은 것을 주로 하고, shouldComponentUpdate 에서 업데이트 직전에 렌더링 시 조건으로 리렌더링을 하느냐마냐 결정 할 수 있다. componentDidUpdate 는 업데이트 직후에 호출 되는 메서드이고 unmount 에서 컴포넌트가 소멸된 시점에 타이머나 비동기 API 를 제거 한다.