DOM이 생성되고 컴포넌트가 페이지에 나타남

컴포넌트 정보를 리렌더링

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate()로 강제 리렌더링될 때

컴포넌트를 DOM에서 제거

• render() { ... }

유일한 필수 메서드, 리액트 요소를 반환

• constructor(props) { ... }

컴포넌트를 만들 때 처음으로 실행, 초기 state값 설정 가능

• getDerivedStateFromProps() { ... }

props로 받아온 값을 state에 동기화 시키는 용도로 사용

getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.value !== prevState.value) { // 조건에 따라 특정값 동기화
        return { value: nextProps.value };
    }
    return null; // state를 변경할 필요가 없다면 null 반환
}

• componentDidMount() { ... }

렌더링이 끝난 후 실행
다른 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval과 같은 비동기 작업 처리

• shouldComponentUpdate(nextProps, nextState) { ... }

state, props 변경 시 리렌더링 실행할지 여부 지정, true또는 false 반환
현재 props나 state는 this.props, this.state로 접근 / 새로 설정될 값은 nextProps, nextState로 접근

• getSnapshotBeforeUpdate() { ... }

결과물이 브라우저에 실제 반영되기 직전에 실행
반환값은 componentDidUpdate의 세번째 파라미터인 snapshot값으로 전달받을 수 있음
주로 업데이트 직전 값을 참고할때 사용 ex) 스크롤바 위치 유지

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

• componentDidUpdate(prevProps, prevState, snapshot) { ... }

리렌더링 완료 후 실행

• componentWillUnmount() { ... }

컴포넌트 DOM에서 제거할때 사용

• componentDidCatch() { ... }

렌더링 도중 에러가 발생했을 때, 먹통이 되지 않고 오류 UI를 보여주도록 지정
error는 어떤 에러인지, info는 어디서 오류가 발생했는지 알려줌

componentDidCatch(error, info) {
    this.setState({
        error: true
    )};
    console.log({ error, info });
}

• https://kosaf04pyh.tistory.com/43