리액트에서 컴포넌트는 생명주기를 통해 초기화, 소멸 등의 작업을 수행합니다. 이러한 생명주기를 다루기 위해 컴포넌트에는 다양한 메서드가 존재합니다. 이번 포스트에서는 리액트 컴포넌트의 주요 생명주기 메서드를 살펴보겠습니다.

1. componentDidMount

componentDidMount 메서드는 컴포넌트가 렌더링된 직후에 호출됩니다. 이 메서드 내에서는 외부 데이터를 불러오거나 렌더링된 후의 작업을 처리하는 등의 초기화 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidMount() {
    // 외부 데이터를 불러오거나 초기화 작업을 수행
  }
  // ...
}

2. componentDidUpdate

componentDidUpdate 메서드는 컴포넌트 업데이트가 일어난 직후에 호출됩니다. 이 메서드 내에서는 이전 props나 state와 현재 props나 state를 비교하여 필요한 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    // 이전 props나 state와 현재 props나 state를 비교하여 작업 수행
  }
  // ...
}

3. componentWillUnmount

componentWillUnmount 메서드는 컴포넌트가 제거되기 직전에 호출됩니다. 주로 이벤트 리스너의 해제나 타이머의 제거 등 리소스 해제 작업을 수행합니다.

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 이벤트 리스너의 해제나 타이머의 제거 등 리소스 해제 작업 수행
  }
  // ...
}

리액트 컴포넌트의 생명주기 메서드를 이용하여 컴포넌트의 초기화, 업데이트, 소멸 등의 작업을 효율적으로 관리할 수 있습니다.

참고 자료:

• 리액트 공식 문서