[React] React LifeCycle

개요

State란?

 

자 State에 이어 이번에는 React 컴포넌트의 생명주기에 대해 정리해보자.

 

1. React LifeCycle

리액트의 모든 컴포넌트에는 생명주기가 존재한다.

 

생명주기에 따른 작업에 대해 잘 알고 있어야, 리렌더링을 불필요하게 하지 않게 되고, 성능에  큰 영향을 주기 때문에 반드시 알아야하는 개념이라고 생각한다.

 

가장 큰 틀로 생성(Mounting) -> 업데이트(Updating) -> 제거(UnMounting)으로 존재하고, 세부적인 메서드들을 통해 필요한 작업을 설정할 수 있다.

 

클래스형 컴포넌트와 함수형 컴포넌트 각각 다른 방식으로 생명주기를 관리하는데, 함수형 컴포넌트에서는 Hook이라는 것을 통해 컴포넌트 생명주기를 관리할 수 있다.

 

하나씩 단계별로 알아보자.

 

2. 클래스형 컴포넌트 생명주기

이미지 출처

 

클래스형 컴포넌트의 생명주기는 생성(Mounting), 업데이트(Updating), 제거(UnMounting)로 나눌 수 있고, 각 단계에서 특정 메소드가 호출된다.

 

2-1. Mounting (컴포넌트 생성 및 마운트)

constructor(props)

-> 컴포넌트의 초기 state를 설정하고, 바인딩이 필요하면 수행한다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('constructor 호출');
  }
  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

 

-> 위의 코드에서 constructor에서 초기 상태를 설정하고, 이후 render 메서드를 호출해 UI를 출력한다.

 

static getDerivedStateFromProps(props, state)

-> props로부터 state를 갱신해야 할 때 사용된다.

 

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null;
}

 

-> 반환값이 null이면 변경이 없다는 의미이다.

 

componentDidMount()

-> 컴포넌트가 마운트된 직후 호출되며, 네트워크 요청이나 DOM 조작을 수행할 때 주로 사용된다.

componentDidMount() {
  console.log('componentDidMount 호출');
}

 

-> 추가적으로 이벤트 리스너 등록 등의 초기화 작업도 여기서 수행하면 된다.

 

2-2. Updating (컴포넌트 업데이트)

shoudComponentupdate(nextProps, nextState)

-> 성능 최적화를 위해 리렌더링 여부를 결정한다.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

 

-> 위 코드에서는 변경된 state가 기존과 다를 경우 true를 반환해 리렌더링을 허용한다.

 

render()

-> 변경된 UI를 렌더링한다.

render() {
  return <div>{this.state.count}</div>;
}

 

getSnapshotBeforeUpdate(prevProps, prevState)

-> 업데이트 전의 DOM 상태를 저장할 때 사용된다.

getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log('이전 상태:', prevState);
  return null;
}

 

componentDidUpdate(prevProps, prevState, snapshot)

-> 업데이트 후 실행되며, 네트워크 요청이나 DOM 조작을 수행할 수 있다.

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log('componentDidUpdate 호출');
}

 

-> API 요청이나 추가적인 상태 갱신이 필요한 경우 사용된다.

 

2-3. Unmounting (컴포넌트 제거)

componentWillUnmount()

-> 컴포넌트가 언마운트되기 전에 호출되고, 이벤트 리스너 해제 및 정리 작업을 수행한다.

componentWillUnmount() {
  console.log('componentWillUnmount 호출');
}

 

3. 함수형 컴포넌트의 생명주기

이미지 출처

 

함수형 컴포넌트에서는 Hook인 useEffect를 사용해서 생명주기와 유사한 동작을 수행한다.

 

3-1. Mounting (컴포넌트 생성 및 마운트)

useEffect(() => {
  console.log('컴포넌트가 마운트됨');
  return () => {
    console.log('컴포넌트가 언마운트됨');
  };
}, []);

 

-> 빈 의존성 배열 [] 을 전달하면 컴포넌트가 처음 마운트될 때만 실행된다.

-> return 함수는 언마운트시 실행된다.

 

3-2. Updating (컴포넌트 업데이트)

useEffect(() => {
  console.log('props 또는 state 변경됨');
}, [props, state]);

 

-> useEffect의 두 번째 매개변수인 배열에 지정한 값이 변경될 때만 실행된다.

 

3-3. Unmounting (컴포넌트 제거)

-> useEffect 내부에서 return 함수가 언마운트 될 때 실행된다.

-> 정리 작업을 수행할 수 있다.

 

 

함수형 컴포넌트에서 useEffect라는 Hook을 사용해서 클래스형 컴포넌트의 생명주기 관리를 대체할 수 있기도 하고, React의 공식적인 방향이 함수형 컴포넌트를 사용하는 것이라 함수형 컴포넌트의 Hook을 적극적으로 사용하는 것이 큰 도움이 될 것 같다!

 

참고

https://velog.io/@ssulv3030/React-Life-Cycle이란-react-life-cycle-method와-hooks