React 컴포넌트 생명주기 이해

React에서 컴포넌트의 생명주기는 여러 단계로 나뉘며, 각 단계에서 수행되는 특정 메서드가 있습니다. 다음 코드 예시는 클래스형 컴포넌트의 생명주기 메서드를 사용하여 데이터를 fetch하는 과정입니다. 이 때, 데이터 fetch가 완료된 후 컴포넌트가 업데이트되는 과정을 설명하세요.

이 컴포넌트의 생명주기와 관련된 단계 중, 데이터 fetch 후 컴포넌트를 업데이트하기 위해 호출되는 메서드는 무엇인가요?

JAVASCRIPT

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => console.error(error));
  }

  render() {
    if (!this.state.data) {
      return <div>Loading...</div>;
    }
    return <div>{this.state.data.title}</div>;
  }
}

답변

componentWillUnmount render componentDidMount componentDidUpdate

로그인 후 제출하기