[React]생성자와 componentWillMount에서 어떤 종류의 초기화가 더 적합한가

생성자와 componentWillMount에서 어떤 종류의 초기화가 더 적합한가요?

타이머나 WebAudio API와 같은 설정이 필요한 React 컴포넌트를 가지고 있다면, 초기화를 생성자나 componentWillMount 메서드에 넣어야할지 고민될 수 있습니다. 이 블로그 포스트에서는 각 접근 방법의 장단점을 탐구하여 판단력있는 결정을 내릴 수 있도록 도와드리겠습니다.

생성자

생성자는 주로 this.state를 사용하여 상태 컴포넌트의 초기 상태를 할당하는 데 사용됩니다. 생성자 내에서 다른 작업을 수행하지 않는 것이 권장되며, 이렇게 함으로써 코드의 가독성이 좋아지며 모범 사례를 따를 수 있습니다.

constructor(props) {
  super(props);
  this.state = {
    // 초기 상태 할당
  };
}

componentWillMount 메서드

componentWillMount 메서드는 종종 불필요하고 많은 경우 안티 패턴으로 간주됩니다. 개발자가 이 메서드를 사용하는 일반적인 이유 중 하나는 렌더링 직전에 외부 소스에서 상태를 업데이트하는 것입니다. 그러나 생성자에서 상태를 할당하는 것으로 동일한 결과를 얻을 수 있습니다.

componentWillMount() {
  // componentWillMount의 불필요한 사용
  this.setState({
    // 상태 할당
  });
}

생성자 내에서는 setState를 사용할 수 없지만, componentWillMount 메서드 내에서는 사용할 수 있음을 유념해야 합니다.

부작용 처리

데이터 가져오기나 DOM 조작과 같은 부작용 처리를 위해 componentDidMount 메서드를 사용하는 것이 권장됩니다. 이 메서드는 컴포넌트가 마운트된 직후에 호출되며 이러한 작업을 수행하기에 적합한 장소를 제공합니다.

componentDidMount() {
  // 부작용 처리
}

Flux 액션

AJAX 호출을 위해 특히 Flux 액션을 호출해야 하는 경우, componentWillMount 또는 componentDidMount 메서드를 사용할 수 있습니다. 그러나 일관성과 AJAX 호출을 수행하기 전에 다른 초기화가 모두 완료됐는지 확인하기 위해 componentDidMount를 사용하는 것이 좋습니다.

결론

요약하자면, 일반적으로 생성자에서 초기 상태를 할당하고 componentWillMount 메서드를 이러한 목적으로 사용하지 않는 것이 권장됩니다. 부작용 처리를 위해 componentDidMount 메서드를 활용하고 Flux 액션이 필요한 경우에도 일관성을 유지하기 위해 componentWillMount보다는 componentDidMount를 사용하는 것이 좋습니다.

생성자와 componentWillMount의 차이점과 적절한 사용 사례를 이해하면 React 컴포넌트에서 깨끗하고 효율적인 코드를 작성할 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/38137740/which-kinds-of-initialization-is-more-appropriate-in-constructor-vs-componentwil

같은 카테고리의 다른 글 보기 :

reactjs