react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 생명주기 메서드란?

• 컴포넌트가 브라우저 상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들이다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다.
• 생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.
• 총 세 가지 카테고리로 나뉜다.
  • Mount, Update, Unmount

✨ Mount

DOM이 생성되고 컴포넌트가 브라우저 상에 나타나는 것을 마운트라고 한다.

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

constructor

• 컴포넌트의 생성자 메서드이다.
• 컴포넌트를 만들 때마다 가장 먼저 실행되는 메서드이다.
• 이 메서드에서 초기 state를 정할 수 있다.

getDerivedStateFromProps

• props값을 state에 넣어주고 싶을 때 사용한다.
• 다른 생명주기 메서드와 달리 static 키워드를 붙여야 하고,이 안에서는 this를 조회할 수 없다.
• 특정 객체를 반환하면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설정되고, 반면 null이 반환되면 아무 일도 발생하지 않는다.
• 이 메서드는 컴포넌트가 초기 렌더링 되기 전에도 호출 되고, 리렌더링 전에도 매번 호출된다.

static getDerivedStateFromProps(nextProps, prevState){
    if (nextProps.value !== prevState.value){
        return { color: nextProps.color };
    }
    return null;
}

render

• 컴포넌트를 렌더링하는 메서드이다.
• 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, react element를 반환한다.

  주의!

  • render 메서드 안에서는 이벤트 등록이 아닌 곳에서 setState를 사용하면 안 되고, 브라우저의 DOM에 접근해서도 안 된다.
  • DOM 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다.

componentDidMount

• 초기 렌더링이 완료된 후 호출되는 메서드이다.
• 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 표시된 상태이다.
• 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청
• DOM 의 속성을 읽거나 직접 변경
• setTimeout, setInterval, 네트워크 요청 같은 비동기 작업 처리

✨ Update

• props가 바뀔 때
• state가 바뀔 때 (setState())
• this.forceUpdate()가 호출되었을 때

getDerivedStateFromProps

• 이 메서드는 초기 렌더링 전에도 호출되고, 리렌더링 전에도 호출된다.
• props 변화에 따라 state 값에도 변화를 주고 싶을 때 사용

shouldComponentUpdate

• props 또는 state를 변경했을 때, 컴포넌트를 리렌더링 할지 말지 결정하는 메서드
• 이 메서드는 true 혹은 false를 반환해야 하며,true를 반환하면 다음 생명주기 메서드가 계속 실행되고, false를 반환하면 작업을 중지한다.
• 만약 this.forceUpdate() 함수가 호출되어 업데이트가 진행되는 상태라면 위 메서드는 실행되지 않고, 바로 render 함수를 호출한다.

shouldComponentUpdate(nextProps, nextState){
    console.log("shouldComponentUpdate", nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
    return nextState.number % 10 !== 4;
}

render

getSnapshotBeforeUpdate

• render메서드에 의해 만들어진 결과물이 브라우저 화면에 나타나기 직전에 호출된다.
• 업데이트가 일어나기 직전의 DOM 상태를 가져오기 때문에 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 사용된다. (예: 스크롤바 위치 유지)
• 이 메서드에서 반환되는 값은 componentDidUpdate의 세 번째 파라미터(snapshot)로 전달할 수 있다.

getSnapshotBeforeUpdate(prevState, prevState){
	if (prevState.array !== this.state.array){
        const { scrollTop, scrollHeight } = this.list;
        return { scrollTop, scrollHeight };
    }
}

componentDidUpdate

• 리렌더링이 완료된 후 호출되는 메서드이다.
• prevProps, prevState 파라미터를 통해 업데이트 전의 컴포넌트의 props와 state 값에 접근할 수 있다.
• getSnapshotBeforeUpdate 메서드에서 반환된 값이 있다면 여기서 snapshot 값을 전달받을 수 있다.

// 스크롤바 유지
componentDidUpdate(prevProps, prevState, snapshot){
    if (snapshot){
        const { scrollTop } = this.list;
        if (scrollTop === snapshot.scrollTop) return;
        const diff = this.scrollHeight - snapshot.scrollHeight;
        this.list.scrollTop += diff;
    }
}

✨ Unmount

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

componentWillUnmount

• 컴포넌트가 DOM에서 제거되기 직전에 호출된다.
• 주로 DOM에 직접 등록되었던 이벤트를 제거하고, 만약에 setTimeout, setInterval메서드로 타이머를 등록했다면 clearTimeout, clearInterval을 통해 제거해야 한다.
• 만약 외부 라이브러리를 사용했고, 해당 라이브러리에 dispose 기능이 있다면 이 메서드 안에서 호출하면 된다.

componentDidCatch

• 이 메서드는 v16에서 새롭게 도입되었으며, 컴포넌트 렌더링 도중에 에러가 발생했을 때 호출된다.

class ErrorBoundary extends Component {
    state = {
        error: false
    };
    
    constructor (props){
       super(props);
    }
    
    componentDidCatch(error,info){
    	this.setState({
       	    error: true;
    	});
    }
    
    render() {
        if (this.state.error){
            return <h1>Error!</h1>
        }
        return this.props.children;
    }
    
}
export default ErrorBoundary;

참고: React lifecycle methods diagram