React.js 라이프사이클 메서드

React.js는 프로그래밍의 선언적 접근 방식을 사용합니다. 즉, 개발자는 애플리케이션의 다양한 상태에 따라 변경 사항을 선언하기만 하면 됩니다.
이를 위해 React는 Virtual DOM을 사용합니다. 실제 시각적 변경은 개발자가 마운트해야 하는 항목, 업데이트해야 하는 항목 또는 구성 요소를 마운트 해제하기 전에 수행할 정리 작업에 대한 추가 제어를 제공하는 일부 수명 주기 메서드를 사용하여 수행됩니다.

오늘은 이러한 수명주기 방법에 대해 논의할 것입니다.

마운팅 중 라이프사이클 방법

이 섹션에서는 구성 요소가 초기화되거나 DOM에 마운트될 때 호출되는 수명 주기 메서드에 대해 설명합니다.

1. constructor(): 생성자 메서드는 구성 요소의 상태 및 기타 변수를 초기화합니다. 이것은 구성 요소를 초기화할 때 호출되는 첫 번째 메서드입니다.

2. static getDerivedStateFromProps(): 이 메서드는 생성자가 구성 요소를 초기화한 직후에 호출됩니다. 필요에 따라 소품을 기반으로 구성 요소의 상태를 업데이트할 수 있습니다.

상태를 업데이트하려면 이 함수에서 업데이트된 상태를 반환합니다. 그렇지 않으면 null을 반환합니다.

static getDerivedStateFromProps(props, state) {
  // some logic for syncing state and props
  // if updates --> return updated state
  // else --> return null
}

3. render(): getDerivedStateFromProps 메서드 이후 JSX를 DOM에 마운트하기 위해 Render 메서드가 호출됩니다.

이것은 구성 요소에 필요한 유일한 메서드입니다.

이 메서드는 DOM에 마운트될 구성 요소의 JSX를 반환합니다. render 메서드에서 배열과 React Fragments를 반환할 수도 있습니다.

마운트할 것이 없으면 이 메서드에서 null을 반환할 수 있습니다.

render() {
  if(// some condition) {
    return null; // will not render anything
  } else {
    return (//JSX or array or React.Fragment)
  }
}

4. componentDidMount(): render 메서드가 반환되고 컴포넌트가 DOM에 마운트된 직후에 이 메서드가 호출됩니다.

이 방법의 일반적인 사용 사례는 방금 마운트된 구성 요소에서 요소를 선택하는 것입니다. 그런 다음 구독을 수행하거나 방금 DOM에 마운트된 구성 요소에 대한 네트워크 요청을 만드는 데 사용할 수 있습니다.

componentDidMount() {
  const x = document.getElementById('abc');
  // perform any operation on x here
  x.addEventListener() // This is also possible
  // fetch('https://google.com').then(); is also possible here
}

업데이트 중 라이프사이클 메서드

이 섹션에서는 이미 DOM에 마운트된 구성 요소를 업데이트할 때 호출되는 수명 주기 메서드에 대해 설명합니다.

1. static getDerivedStateFromProps(): 이 메서드는 구성 요소가 업데이트될 때마다 먼저 실행됩니다. 이것은 앞에서도 다루었으므로 여기서는 생략하겠습니다.

2. shouldComponentUpdate(): 이 메서드는 getDerivedStateFromProps() 메서드 이후에 호출됩니다. 이 메서드는 True 또는 False를 반환합니다.

이 메서드는 state 또는 props의 변경 사항에 따라 DOM에서 이 구성 요소를 업데이트해야 하는지 여부를 제어하는 ​​데 사용됩니다. True가 반환되면 업데이트를 진행하고 그렇지 않으면 DOM에서 업데이트가 수행되지 않습니다.

3. render(): ** shouldComponentUpdate() 메서드 이후에 실행됩니다. ** shouldComponentUpdate()가 True를 반환하는 경우에만 실행됩니다.
이 방법은 위에서 이미 다루었으므로 건너뜁니다.

*4. getSnapshotBeforeUpdate(): * 이 메소드는 DOM을 업데이트하기 위해 render() 메소드가 실행된 직후에 호출됩니다. 시각적 DOM이 여전히 비동기식으로 업데이트되는 동안 업데이트 전에 DOM의 스냅샷을 찍습니다.

이 메서드는 업데이트 전의 props 및 state였던 previousProps 및 previousState 인수를 가져옵니다.

getSnapshotBeforeUpdate(prevProps, prevState) {
  return value || null; // value can be any valid javascript value
}

이 메서드에서 반환된 값은 다음 수명 주기 메서드인 componentDidUpdate()로 추가 전달됩니다.

5. componentDidUpdate(): 이 수명 주기 메서드는 getSnapshotBeforeUpdate() 메서드 이후에 호출됩니다.

이 메소드는 previousProps, previousState 및 snapshot을 인수로 받습니다. 여기서 snapshot은 getSnapshotBeforeUpdate() 메소드에서 전달된 값입니다.

마운트 해제 중 라이프사이클 메서드

이 섹션에서는 DOM에서 구성 요소를 마운트 해제하거나 제거하기 위해 호출되는 수명 주기 메서드에 대해 설명합니다.

*1. componentWillUnmount(): * 이 메서드는 구성 요소가 DOM에서 마운트 해제되기 직전에 호출됩니다. 이 기능은 구성 요소가 DOM에서 제거되기 전에 정리를 수행하는 데 적합합니다.

componentWillUnmount() {
  // remove any subscriptions or timers or unresolved network requests
  x.removeEventListener()
}