[React] React 컴포넌트의 생명 주기 (Life Cycle)

출처 : https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0

 

라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다.

 

컴포넌트는 생성(mounting) ➡️ 업데이트(updating) ➡️ 제거(unmounting)의 생명주기를 갖는다.

 

리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다.

 

 

1. class component 생명주기

 

마운트(mount)

컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 한다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다.

 

constructor

constructor(props) {
  super(props);
  this.state = { counter: 0 };
  // this.setState() 호출은 X
}

 

컴포넌트 생성자 메서드로, 컴포넌트가 생성이 되면 제일 먼저 실행이 되는 메서드이다.
state와 props를 접근하여 값을 할당 할 수 있다.

 

getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

 

getDerivedStateFromProps는 props로 받아온 것을 state에 설정하고 싶을 때 사용이 되며,
최초 마운트 시와 갱신 시,모두에서 render 메서드를 호출하기 직전에 호출된다.
특정 객체를 반환하게 되면 해당 객체의 값이 state로 갱신이 되며, null을 반환하게 되면 아무 것도 갱신하지 않을 수 있다.

 

render

render()

 

render()은 컴포넌트를 렌더링 해주는 메서드이다. 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드이다.

 

componentDidMount

componentDidMount()

 

컴포넌트가 마운트, 첫번째 렌더링이 된 직후 호출되는 메서드이다.
이 시점에는 화면이 구현이 되어있는 상태이다. componentDidMount에서는 DOM에 접근하여 사용을 할 수가 있다.
그래서 여기에서는 주로 AJAX 요청을 하거나,DOM에 속성을 읽거나 변경을 하는 작업을 한다. (setTimeout, setInterval 등등)

 

 

업데이트(update)

컴포넌트의 업데이트 시에는 다음과 같은 생명주기의 메서드들이 호출이 된다.

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

 

getDerivedStateFromProps

위에서 설명했듯이 getDerivedStateFromProps는 값이 갱신되어 업데이트 시에도 render 전에 메서드가 실행이 된다

 

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

 

shouldComponentUpdate()는 컴포넌트를 다시 리렌더링 할지 말지 결정하는 메서드이다.
props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본값은 true이며, return false를 하면 render을 취소할 수도 있다. 그래서 주로 성능 최적화를 위해 사용이 된다.

 

 

render

렌더링을 해줍니다.

 

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

 

getSnapshotBeforeUpdate()는 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다.
이 메서드를 사용을 하면 DOM 상태가 변경이 되기전의 값을 반환하여 componentDidUpdate에서 인자로 받아서 사용이 가능하다.

 

 

 

componentDidUpdate

componentDidUpdate(prevProps, prevState) {}

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

 

componentDidUpdate()는 갱신이 일어난 직후에 호출이 된다.
이 메서드는 최초 렌더링에서는 호출되지 않는다.

 

 

언마운트(unmount)

언마운트(Unmount)라는것은, 컴포넌트가 화면에서 제거 되는것을 의미하며,
관련된 생명주기 메서드는 componentWillUnmount 하나가 있다.

componentWillUnmount

componentWillUnmount()

 

컴포넌트가 사라지기 직전에 호출을 하고,
주로 여기서는 DOM에 등록했었던 이벤트들을 제거해주는 용도로 사용이 된다.

 

 

 

2. Functional Componet 생명주기

리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수
Hook은 class 안에서는 동작하지 않고, class없이 React를 사용할 수 있게 한다.

 

리액트 훅을 도입한 목적
기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점이 있다.
라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다

 

 

 

 

 

 

---