[React] 컴포넌트의 라이프 사이클

7.1 Introduction

1. Lifecycle related method는 총 10가지
2. 어떤 작업 전에 실행되는 메서드 : Will-접두사가 붙고, 작업 후에 실행되는 메서드 : Did-접두사가 붙는다.
3. 3개의 카테고리로 나눈다. mount, update, unmount

mount

1. DOM이 생성되고 web browser에 나타나는 것
2. method 호출 흐름
   • constructor : 말 그대로 생성자
   • getDerivedStateFromProps : props에 있는 값을 state에 동기화하는 메서드
   • render : UI 렌더링
   • componentDidMount : web browser에 나타난 후 호출하는 메서드

update

업데이트 하는 경우는 4가지

1. props changed
2. state changed
3. parent component re-rendered
4. this.forceUpdate 메서드 작동 시

!! 그림 추가하도록 합시다.

unmount

1. componentWillUnmount 메서드가 호출됩니다.

7.2 Take a look

1. render() 메서드

• 컴포넌트의 모양새 정의
• this.props, this.state에 접근 가능
• react 요소를 반환, 요소란 div 태그가 될 수도 있고, 따로 선언한 component가 될 수도 있음
  아무것고 보여주고 싶다면 null 또는 false를 반환
• 이 메서드 안에서는 절대로 state를 변형해서는 안된다. 또한 웹 브라우저에 접근?해서도 안 된다.
  question > 위에서 웹 브라우저에 접근하는 것의 example은?

2. constructor 메서드

3. getDerivedStateFromProps 메서드

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

• 마운트시, props 변경 시 호출

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

4. componentDidMount 메서드

• 이 안에서 다른 JS 라이브러리 또는 프레임워크 함수를 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 됩니다! 비동기 작업!

5. shouldComponentUpdate 메서드

• props 또는 state 변경 시, 리렌더링 여부를 지정하는 메서드
• true, false 반환해야 하는 함수
• 프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리렌더링을 방지할 때는 false를 반환하게 하면 됩니다.

6. getSnapShotBeforeUpdate 메서드

• 주로 업데이트하기 직전 값을 참고할 일이 있을 때 활용 : 스크롤바 위치 유지

7. componentDidUpdate 메서드

• 리렌더링 완료한 후 실행되는 메서드
• 업데이트가 끝난 직후이므로, DOM 관련 처리?를 해도 무방

8.componentWillUnmount 메서드

• componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 겨기서 제거 작업해야 한다.