생성자(Constructor) vs componentWillMount: 주요 차이점과 사용 사례
React 컴포넌트 작업 시, constructor과 componentWillMount 메서드의 차이점을 이해하는 것은 매우 중요합니다. 이 블로그 포스트에서는 이 두 메서드 간의 차이점을 알아보고 그들의 사용 사례에 대해 논의하겠습니다.
생성자(Constructor)와 componentWillMount의 차이
처음 보면, constructor와 componentWillMount 메서드의 주요 차이점은 setState를 호출할 수 있는지 여부입니다. componentWillMount가 setState를 호출하고 렌더링 전에 상태 객체를 준비할 수 있다는 점은 사실이지만, constructor 또한 동일한 효과를 낼 수 있습니다. 조금 더 자세히 살펴보겠습니다:
constructor(props) {
super(props);
this.state = { isLoaded: false };
}
위 코드는 컴포넌트 상태를 생성자에서 초기화합니다. 마찬가지로, componentWillMount 메서드에서 상태를 설정하는 것으로도 동일한 결과를 얻을 수 있습니다:
componentWillMount() {
this.setState({ isLoaded: false });
}
두 접근 방식 모두 첫 번째 렌더링 전에 초기 상태를 설정합니다. 상태가 설정된 후, 컴포넌트는 업데이트된 상태 값을 가지고 렌더링 단계로 진입합니다.
추가적인 사용 사례: 서버 측에서의 componentWillMount
constructor 방식은 클라이언트 측에서 잘 작동하지만, componentWillMount 메서드는 서버 측 렌더링에서 추가적인 사용 사례를 갖습니다. 비동기 작업이 필요한 시나리오를 고려해 보겠습니다:
componentWillMount() {
myAsyncMethod(params, (result) => {
this.setState({ data: result });
});
}
위 경우, constructor를 사용하는 것은 이상적이지 않습니다. 왜냐하면 this.state에 결과를 할당해도 다시 렌더링이 발생하지 않기 때문입니다. 그러나 componentWillMount를 사용하면 React가 초기 렌더링을 위해 업데이트된 상태 값을 사용할 수 있으므로 추가적인 렌더링 단계가 필요하지 않습니다.
componentWillMount에서 setState의 타이밍 이해하기
하나의 의문은 componentWillMount 내부의 비동기 메서드 콜백에서 setState를 호출하면 초기 렌더링이 콜백이 실행될 때까지 차단될까요? 그 답은 아닙니다.
componentWillMount: function() {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 2000);
}).then(() => this.setState({ promiseResult: 'World' }));
}
위 코드 스니펫은, componentWillMount에서 비동기 메서드의 콜백 내부에서 setState를 호출한 경우에도 렌더링이 차단되지 않음을 보여줍니다. 그러나 constructor나 render 단계에서 setState를 호출하는 것은 일반적으로 안티 패턴으로 간주되어야 합니다.
결론: componentWillMount의 사용이 폐지되었습니다.
ES6 클래스가 도입되면서 componentWillMount의 사용은 대부분 폐지되었습니다. React는 이 메서드에서의 부수 효과나 구독을 피하는 것을 권장합니다. 대신 constructor나 componentDidMount와 같은 대안을 사용하여 동일한 기능을 구현하는 것이 좋습니다. 이는 더 깨끗하고 유지 관리하기 쉬운 코드를 보장합니다.
요약하면, React 컴포넌트에서 constructor와 componentWillMount 메서드 간의 주요 차이점을 알아보았습니다. 특정 사용 사례에 맞는 메서드를 선택하고, 코드를 최적화하고 성능을 향상시키기 위해 최선의 방법을 준수하는 것을 기억해 주세요.
