React - 생명 주기 메소드

생명 주기 메소드 그래프

 
생명 주기 메소드는 영어로 LifeCycle Method 라고 부르며 컴포넌트가 브라우저상에 렌더링되고, 업데이트되고, 제거될때 호출되는 메소드입니다. 각 상황에 실행하고 싶은 작업들을 생명 주기 메소드에 포함시켜 실행시킬 수 있고 클래스형 컴포넌트에서만 생명 주기 메소드를 사용 가능합니다.
 
 
+ React 버전 16.8부터 Hook이 추가되었고 useEffect라는 메소드로 함수형 컴포넌트에서도 생명 주기 메소드와
비슷한 작업을 할 수 있게 되었습니다
 
 
생명 주기 메소드는 세 가지 상황으로 분류시키면 이해하기 수월해집니다
 

1. 컴포넌트가 생성됨 ( Mount )

2. 컴포넌트 업데이트 ( Update )

3. 컴포넌트 제거 ( Unmount )

---

[ 컴포넌트가 생성됨 - Mount ]

 
React가 컴포넌트를 처음 렌더링하고 DOM에 추가할 노드를 생성하는 일을 Mount라고 합니다
 
컴포넌트가 mount될때 호출되는 생명 주기 메소드들과 그 순서는 다음과 같습니다.
 

1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount

 
1. constructor
 
컴포넌트의 생성자 메소드로 컴포넌트가 생성될 때 가장 먼저 호출되는 메소드입니다
 

constructor(props){
    super(props);
    console.log("Constructor");
}

 

2. getDerivedStateFromProps
 
props로 받아온 데이터를 state에 저장할때 사용하는 메소드입니다
 
static을 시작에 붙여야하는 메소드로 조건에 따라서 state를 변경할 수 있는 메소드입니다.
 
반환값으로 객체를 반환하면 객체의 데이터로 state를 변경합니다.
 
반환값으로 null을 반환하면 아무일도 일어나지 않습니다
 
아래의 코드는 이전 state의 name과 다음 props의 name이 다르다면 state의 name을 변경하는 코드가 담긴getDerivedStateFromProps 메소드입니다.
 
이전 state.name과 props.name이 동일하다면 null을 반환하여 아무일도 일어나지 않게합니다
 

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.name !== prevState.name) {
      return {name: nextProps.name}
    }
    return null;
}

 
 
3. render
 
컴포넌트를 렌더링하는 메소드입니다
 
 
4. componentDidMount
 
 
컴포넌트 렌더링이 끝나고 마운트된 직후, 즉 DOM 트리에 삽입된 직후 호출되는 메소드입니다.
 
네트워크를 통해 데이터를 요청하는 ajax, axios, fetch등의 작업을 진행하기 알맞은 메소드입니다.
 
DOM 트리 노드의 속성을 읽거나 직접 변경하는 작업을 진행하기 알맞은 메소드입니다
 

---

[ 컴포넌트 업데이트 - Update ]

 
 
컴포넌트의 데이터가 변경될때, 즉 업데이트될때 호출되는 생명 주기 메소드의 순서는 다음과 같습니다
 

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

 
1. getDerivedStateFromProps
 

컴포넌트가 생성될 때( Mount ) 호출되는 getDerivedStateFromProps와 동일한 메소드입니다
 
컴포넌트의 props나 state가 바뀌었을때도 이 메소드가 호출됩니다
 
 
2. shouldComponentUpdate
 
 
컴포넌트 리렌더링을 할지 말지 결정하는 메소드입니다
 
컴포넌트 렌더링은 자원을 많이 소모하는 작업이므로 필요한 경우에만 리렌더링을 할 수 있게 조정하여 프로그램 최적화를 할 수 있습니다
 
아래 코드는 id가 5의 배수인 경우에만 리렌더링을 시키는 코드입니다
 
 

shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    return nextState.id % 5 === 0;
}

 
 
3. render
 

컴포넌트를 렌더링하는 메소드
 
 
4. getSnapshotBeforeUpdate
 
 
이 메소드는 렌더링된 결과가 DOM에 반영되기 직전에 호출됩니다.
 
이 메소드로 스크롤 위치 등과 같은 정보를 컴포넌트가 변경되기전에 DOM으로부터 얻을 수 있습니다.
 
이 생명 주기 메소드가 반환하는 값은 componentDidUpdate()에 인자로 전달됩니다.
 
컴포넌트가 변경되기전에 저장할 데이터를 저장하기 알맞은 메소드입니다
 
컴포넌트가 변경된 전후 스크롤 위치를 알아야하는 작업이 필요한 경우 사용할 수 있습니다
 
반환값은 snapshot이고 할 작업이 없다면 null을 반환합니다
 
 
< 예시 >
 

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

 
위 코드는 컴포넌트가 업데이트 되기 전 스크롤 위치를 업데이트 된 후로 보내는 코드입니다.
 
getSnapshotBeforeUpdate 메소드는 스크롤 위치가 변경된 경우, 스크롤이 움직인 만큼의 길이를 snapshot 반환하고
 
componentDidUpdate 메소드가 snapshot을 인자로 받습니다.
 
 
5. componentDidUpdate
 
 
컴포넌트 업데이트가 끝난 뒤 호출되는 메소드입니다.
 
componentDidMount와 같이 네트워크 요청을 보내는 작업을 하기 적절한 위치입니다.
 
주의할점은 componentDidUpdate에서 setState 메소드를 호출하여 state값을 변경할 경우, 적절한 조건문을 추가하지 않으면
 
컴포넌트 업데이트 과정이 무한 반복되는 일이 발생할 수 있습니다. 
 
< 예시 >
 

componentDidUpdate(prevProps) {
  // 전형적인 사용 사례 (props 비교를 잊지 마세요)
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

 

---

[ 컴포넌트 삭제 - Unmount ]

 
컴포넌트가 DOM 트리에서 제거되어 더 이상 화면에 보이지 않게하는 일을 Unmount라고 합니다.
 
컴포넌트가 Unmount될때 호출되는 생명 주기 메소드는 componentWillUnmount 한 가지 입니다
 
 
1. componentWillUnmount
 
 
컴포넌트가 Unmount 되기 직전에 호출되는 메소드입니다
 
컴포넌트에 관련된 데이터와 이벤트 핸들러 등을 정리하기 알맞은 메소드입니다
 

componentWillUnmount() {
  console.log("ComponentWillUnmount")
}

 

---

[ 정리 ]

 
상황별 호출되는 생명 주기 메소드
 

Mount

1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount

Update

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

Unmount

1. componentWillUnmount

 

---

[ 출처  ]

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
https://react.vlpt.us/basic/25-lifecycle.html
https://ko.reactjs.org/docs/react-component.html#componentdidupdate