• 목차

7.1 라이프사이클 메서드의 이해

• 라이프사이클 메서드의 종류는 총 아홉가지가 있어
  • Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되고
  • Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드야
  • 이 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있어 (이게 뭔소리지? 뒤에 나오려나??)
• 라이프사이클은 총 세가지 카테고리로 나뉘어 (마운트 / 업데이트 / 언마운트)
  1. 마운트
     • DOM이 생성되고 웹 브라우저상에 나타는 것
     • 마운트할 때 호출하는 메서드
       • constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
       • getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
       • render: 우리가 준비한 UI를 렌더링하는 메서드
       • componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
  2. 업데이트
     • 컴포넌트가 업데이트 되는 경우
       • props가 바뀔 때
       • state가 바뀔 때
       • 부모 컴포넌트가 리렌더링될 때
       • this.forceUpdate로 강제로 렌더링을 트리거할 때
     • 업데이트할 때 호출하는 메서드
       • getDerivedStateFromProps: 업데이트가 시작하기 전에 호출됨 props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용 가능 (마운트 과정에서도 사용했음)
       • shouldComponentUpdate: 컴포넌트가 리렌더링을 할지 말지 결정하는 메서드 / true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지함 / 만약 특정 함수에서 this.forceUpdate함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출함.
       • render: 컴포넌트를 리렌더링함 (이것도 마운트 과정에서도 사용했음)
       • getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
       • componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
  3. 언마운트
     • 컴포넌트를 DOM에서 제거하는 것 (마운트의 반대 과정)
     • 언마운트 일 때 호출하는 메서드
       • componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

7.2 라이프사이클 메서드 살펴보기

7.2.1 render 함수

• 컴포넌트의 모양새를 정의해
  • 컴포넌트 만들 때 계속 쓰던 그거야
• this.props와 this.state에 접근할 수 있고
• div같은 태그나 따로 선언한 컴포넌트로 된 요소를 반환 할 수 있어
• 아무것도 보여주고 싶지 않다면 null이나 false를 반환하면 돼
  • undefined는 안됨
• 이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안되고, 브라우저의 DOM에 접근해서도 안돼
  • DOM정보나 state값을 변경하고 싶으면 componentDidMount에서 처리 하면 돼

7.2.2 constructor 메서드

• 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행돼
• 여기서 초기 state를 설정하면 돼

7.2.3 getDerivedStateFromProps 메서드

• 리액트 v16.3 이후에 만들어진 메서드야
• props로 받아온 값을 state에 동기화 시키는 용도로 사용해
• 컴포넌트가 마운트 될 때와 업데이트 될 때 호출해

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