React.js - Life cycle

react Life cycle은 Mounting, Updating, Unmounting 3가지가 있다.

• Mountting : 컴포넌트가 시작될때
• Updating : state가 업데이트되고 UI업데이트 될때
• Unmounting : 컴포넌트가 종료될때

Class Component

1. Constructor

Life Cycle에서 첫 번째로 실행되는 Life Cycle 함수이다. Constructor는 컴포넌트가 생성될 때 호출되며, 컴포넌트의 초기 상태(state)를 설정하거나, 메소드를 bind하거나, 다른 초기화 작업을 수행할 때 사용된다. 그래서 앱을 시작하자마자 실행하고 싶다면 constructor안에 넣으면 된다.

constructor(props) {
  super(props);
  // 상태 초기화나 메소드 bind 등의 작업을 수행.
}

2. getDerivedStateFromProps

getDerivedStateFromProps는 간단하게 설명하면 state와 props를 동기화시켜주는 함수이다.
props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때, 새로운 props를 받았을 때, 혹은 업데이트되기 직전에 호출된다.

static getDerivedStateFromProps(props, state) {
  // props를 사용하여 state를 업데이트하는 로직을 작성한다.
  // 새로운 state를 반환한다.
}

3. Render

render 메소드는 컴포넌트를 렌더링할 때 호출되며, UI를 표시하는 JSX 코드를 반환한다. render 메소드에서 반환된 JSX 코드는 브라우저에서 실제 DOM 요소로 변환된다. render 메소드는 매번 컴포넌트가 업데이트될 때마다 호출되며, 새로운 props나 state가 전달될 때마다 새로운 UI를 생성한다.
render 메소드는 클래스형 컴포넌트에서만 사용되며, 함수형 컴포넌트에서는 JSX 코드를 반환하는 함수 자체가 렌더링 함수 역할을 수행한다.

render() {
  return (
    // JSX 코드를 반환.
  );
}

4. componentDidMount

컴포넌트가 처음으로 마운트되어 DOM에 삽입된 직후에 호출된다.
compoenentDidMount 메소드는 일반적으로 다음과 같이 작업을 수행한다.

• 외부 API에서 데이터를 가져오거나, 데이터를 불러올 수 있는 함수를 호출
• 이벤트 리스너를 등록
• 외부 라이브러리를 초기화
• 컴포넌트의 상태(state)를 업데이트

componentDidMount 메소드는 컴포넌트가 마운트된 후에 딱 한 번만 호출된다.
componentDidMount 메소드는 다른 생명주기 메소드와 함께 사용될 때 유용하다. 예를 들어, componentDidMount 메소드에서 데이터를 가져오고, 가져온 데이터를 state에 저장하면, 이후에 render 메소드가 호출될 때 해당 데이터를 사용하여 UI를 업데이트할 수 있다.

componentDidMount() {
  // 컴포넌트가 마운트된 직후에 실행될 코드를 작성.
}

5. componentDidUpdate

Updating 상황일 때 작동된다. state가 업데이트 되거나 setState가 발생 될 때 rnder가 발생이 된다. 그리고 render가 발생되면 componentDidUpdate가 호출된다. 왜 호출을 해주냐면 우리가 setState를 해도 비동기식으로 기다렸다가 나중에 호출된다. 그래서 state가 update가 되었는지 알려주는 것이다.
componentDidUpdate 메소드는 일반적으로 다음과 같은 작업을 수행한다.

• 업데이트된 props나 state를 기반으로 다른 작업을 수행
• 외부 라이브러리나 API를 호출하여 데이터를 가져옴
• this.setState()를 호출하여 컴포넌트의 상태(state)를 업데이트

주의할 점은, componentDidUpdate 메소드에서 this.setState()를 호출할 때 무한 루프에 빠지지 않도록 조심해야 한다. 이를 방지하기 위해서는 componentDidUpdate 메소드에서 this.props와 this.state를 적절히 비교하고, 변경이 있을 때만 this.setState()를 호출해야 한다.

componentDidUpdate(prevProps, prevState, snapshot) {
  // 컴포넌트가 업데이트된 직후에 실행될 코드를 작성.
}

위 내용들은 class component에서만 사용이 가능하다.

그럼 function component에서는 어떤걸 사용할까?

Function Component

함수형 컴포넌트에서는 useEffect를 사용한다.
컴포넌트가 마운트될 때, 그리고 state가 변경될 때마다 실행된다. state는 배열 형태로 전달되며, 배열에 포함된 값이 변경될 때마다 useEffect의 콜백 함수가 실행됩니다.
useEffect Hook은 다음과 같은 작업을 수행할 수 있다.

• 외부 API에서 데이터를 가져오거나, 데이터를 불러올 수 있는 함수를 호출
• 이벤트 리스너를 등록
• 외부 라이브러리를 초기화
• 컴포넌트의 상태(state)를 업데이트

useEffect Hook은 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 역할을 수행한다. 예를 들어, useEffect Hook으로 데이터를 가져오고, 가져온 데이터를 state에 저장하면, 이후에 컴포넌트의 UI가 업데이트된다.

import { useState ,useEffect} from 'react';

useEffect(() => {
  // 컴포넌트가 마운트되거나 업데이트된 후에 실행될 코드를 작성.
  // componentDidMount
  return () => {
    // 컴포넌트가 언마운트되기 전에 실행될 코드를 작성.
  }
}, [state]); //[] componentDidUpdate 변수 여러개 사용가능