[React] 리액트 라이프사이클

React의 LifeCycle은 크게 3가지로 나눌 수 있다.
마운트, 업데이트, 언마운트

1. 마운트 (생성)

constructor(생성자)

컴포넌트가 만들어질때마다 가장 먼저 생성되는 메서드

// Class (클래스형)
constructor(props) {
	super(props);
    this.state = { count : 0 };
}

// Hooks (함수형)
const [count, setCount] = useState(0);

componentDidMount

componentDidMount() {
	// 외부 라이브러리 연동
    // 컴포넌트에서 필요한 데이터 요청 (axios, fetch 등)
    // DOM의 속성을 읽거나 직접 변경하는 작업

2. 업데이트

getDerivedStateFromProps()

props로 받아온 값을 state로 동기화하는 작업을 해야할 때 사용

shouldComponentUpdate

• props나 state를 변경했을 때, 리렌더링을 할지말지 결정하는 메서드
• 반드시 true, false 중 하나 반환
• 컴포넌트 최적화하는 작업에서 매우 유용하게 사용

// Class (클래스형)
shouldComponentUpdate(nextProps) {
	// 이전 값과 현재 값이 같을 경우 리렌더링 하지 않음
    return nextProps.value !== this.props.value
}

// Hooks (함수형)
(prevProps, nextProps) => {
	return nextProps.value === prevProps.value
}

getSnapshotBeforeUpdate()

• DOM 변화가 일어나기 직전의 DOM 상태 가져오고, 여기서 리턴 값은 componentDidUpdate의 3번째 파라미터로 받아올 수 있게 됨
• 스크롤 위치 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있음

getSnapshotBeforeUpdate(prevProps, prevState) {
	if (prevProps.list.length < this.props.list.length {
    	const list = this.listRef.current
        return list.scrollHeight - list.scrollTop
    }
	return null
}

componentDidUpdate

• 리렌더링 완료 후 실행
• 이 시점에서 this.props와 this.state가 바뀌어 있고, 파라미터를 통해 이전 값인 prevProps와 prevState 조회 가능
• 3번째 파라미터로 getSnapshotBeforeUpdate에서 반환한 값 조회 가능

// Class (클래스형)
componentDidUpdate(prevProps, prevState) {
	...
}

// Hooks (함수형)
const Example = () => {
	useEffect(() => {
    	...
    });
}

3. 언마운트 (제거)

componentWillUnmount()

• 컴포넌트가 화면에서 사라지기 직전 (DOM에서 제거할 때) 호출
• 주로 등록했던 이벤트 제거, setTimeout이 있다면 clearTimeout 통해 제거, 사용한 외부 라이브러리에 dispose 기능이 있을 경우 이 메서드에서 호출

// Class (클래스형)
componentWillUnmount() {
	// 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거
}

// Hooks (함수형)
const Example = () => {
	useEffect(() => {
    	return () => {
        	...
        }
    }, []);
}