라이프사이클 메서드

• 클래스 기반 리액트에서 라이프사이클을 다룰 때 쓰인다

• 또다른 도해
  

마운트

• constructor(props):
  컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  -초기 state 정할 수 있다 (이 경우x)
• getDerivedStateFromProps(nextProps, prevState):
  props에 있는 값을 state와 동기화할 때 사용하는 메서드

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

• render():
  UI(jsx)를 렌더링하는 메서드
  -필수 메서드
  -this.props와 this.state에 접근 가능
  -리액트 요소 반환(div 등 태그 or 따로 선언한 컴포넌트 or 아무것도 안 보여주고 싶을 경우 null이나 false)
  -금지: 이벤트 설정이 아닌 경우 setState사용x, 브라우저 DOM 접근x >>componentDidMount에서 처리

• componentDidMount():
  컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
  -자바스크립트 라이브러리 또는 프레임워크의 함수 호출
  -비동기 작업 진행(이벤트 등록, setTimeout, setInterval, 네트워크 요청 등)

업데이트

• 업데이트되는 4가지 이유
  1)props가 바뀔 때
  2) state가 바뀔 때
  3) 부모 컴포넌트가 리렌더링 될 때
  4) this.forceUpdate로 강제로 렌더링을 트리거할 때

• getDerivedStateFromProps(nextProps, prevState):
  마운트 과정에서도 호출되지만, 업데이트 시작 전에도 호출됨. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용함(상동)

• shouldComponentUpdate(nextProps, nextState):
  컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드.
  -true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지(리렌더링x)
  -다음과 같이 접근 가능
  현재 props> this.props
  현재 state > this.state
  새로 설정될 props > nextProps
  새로 설정될 state > nextState
  -만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출한다.

• render(): 컴포넌트를 리렌더링함. 상동

• getSnapshotBeforeUpdate(prevProps, prevState): 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
  -이 메서드의 반환값은 componentDidUpdate의 세 번째 파라미터인 snapshot 값으로 전달됨

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

• componentDidUpdate():
  컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
  -prevProps 또는 prevState를 사용하여 이전 데이터에 접근 가능
  -세 번째 인자로 getSnapShotBeforeUpdate에서 반환한 snapshot 값을 세 번째 인자로 전달받음

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

언마운트

• componentWillUnmount():
  컴포넌트가 웹에서 사라지기 전에 호출하는 메서드
  -컴포넌트를 DOM에서 제거할 때 실행함
  -componentDidMount에서 등록한 이벤트, 타이머, DOM등을 여기서 제거해야 함

기타

• componentDidCatch():
  컴포넌트 렌더링 도중에 에러 발생시 애플리케이션이 먹통되지 않고 오류 UI를 보여줄 수 있게 해줌.

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

• error: 파라미터에 어떤 에러가 발생했는지 알려줌
• info: 어디에 있는 코드에서 오류가 발생했는지 알려줌
• 추후 서버 api를 호출하여 수집 가능
• 자신의 에러는 못 잡고 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡기 가능

인자와 함께 암기하자

• constructor(props):

• getDerivedStateFromProps(nextProps, prevState) :
  변화한 props를 이전 state에 동기화
• shouldComponentUpdate(nextProps, nextState):
  변화한 props와 변화한 state로 업데이트 여부 판단
• getSnapshotBeforeUpdate(prevProps, prevState)
  기존 props와 기존 state를 이용하여 반영 안 된 현재 값(=렌더링 함수는 실행되었으나 DOM에는 반영 안됨. 즉 기존 props를 이용한 state)을 찍어둠

• render():

• componentDidMount():
• componentDidUpdate()
• componentWillUnmount()

(도해 출처: 리액트를 다루는 기술. 너무 좋은 책이니 강추합니다)
(cf. 솔직히 헷갈려서 인자 등 한꺼번에 외우는 게 나을것같다)