리액트를 다루는 기술 : 라이프사이클메서드

라이프 사이클 메서드

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에 랜더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.

프로젝트를 진행하다 보면, 컴포넌트를 처음으로 랜더링할 때나 컴포넌트를 업데이트할 때 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다.

이럴 때 컴포넌트의 라이프 사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 그대신 Hooks 기능을 사용하여 비슷한 작업을 함수형 컴포넌트에서 처리할 수 있다.

---

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

라이프사이클 메서드의 종류는 총 아홉 가지다. Will 접두사가 붙은 메서드는 어떤 작업 이전에 실행되는 메서드이고 Did 접두사가 붙은 메서드는 어떤 작업 이후에 실행되는 메서드이다.
이 메서드는 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다.

라이프사이클은 마운트,업데이트,언마운트 카테고리로 나뉜다. 어떤 것이 있는지 알아보고, 큰 흐름을 이해한 후 하나씩 자세히 살펴보자.

---

마운트 Mount

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. Mount될때 호출되는 메서드는 다음과 같다.

컴포넌트 만들기
constructor	컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
getDerivedStateFromProps	props에 있는 값을 state에 넣을 때 사용하는 메서드
render	준비한 UI를 렌더링하는 메서드
componentDidMount	컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

---

업데이트 Update

업데이트는 다음과 같은 총 네 가지 경우에 발생된다.

1. 부모 컴포넌트에서 넘겨주는 props가 바뀔 때 - 컴포넌트 렌더링이 발생된다. (Update)

2. 컴포넌트 자신이 갖고 있는 state가 setState를 통해 업데이트 될 때

3. 부모 컴포넌트가 리렌더링 될 때 : 자신에게 할당된 props나 자신이 갖고 있는 state가 바뀌지 않아도 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한 리렌더링 된다.

4. this.forceUpdate로 강제로 렌더링을 트리거할 때

업데이트되는 경우의 수 발생 : props,state변경 및 부모 컴포넌트 리렌더링
getDerivedStateFromProps	getDerivedStateFromProps는 마운트 과정에서도 호출되며 업데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.
shouldComponentUpdate	컴포넌트의 리렌더링을 결정하는 메서드. boolean값을 반환해야 하며 true면 계속 실행을, false는 리렌더링을 중지시킨다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출한다.
true or false	true 반환 시 render 호출, false 반환 시 여기서 작업이 취소된다.
render	컴포넌트를 리랜더링한다.
getSnapshotBeforeUpdate	컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
componentDidUpdate	컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

---

언마운트 Unmount

Mount의 반대 과정으로 컴포넌트를 DOM에서 제거하는 것을 말한다.

componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 직전에 호출하는 메서드이다.

---

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

앞에서 소개한 라이프사이클 메서드를 하나씩 자세히 살펴보자

render() 함수

render() { ... }

render 메서드는 컴포넌트의 모양새를 정의한다. 그렇기에 컴포넌트에서 가장 중요한 메서드이며 라이프사이클 메서드 중 유일한 필수 메서드이다.

render메서드 안에서 this.props와 this.state에 접근할 수 있으며 리액트 요소를 반환한다. 요소는 div같은 html tag가 될 수도 있고, 따로 분리하여 만든 컴포넌트가 될 수 있다.

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

---

constructor 메서드

constructor(props) { ... }

constructor 메서드는 컴포넌트의 생성자 메서드로서, 컴포넌트를 만들 때 처음으로 실행된다.
constructor 메서드에서 초기의 state값을 정할 수 있다.

---

getDerivedStateFromProps 메서드

props로 받아 온 값을 state에 동기화 시키는 용도로 사용하며, 컴포넌트가 마운트 될 때와 업데이트 될 때 호출된다.

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

---

componentDidMount 메서드