“setState”를 언마운트된 컴포넌트에서 호출하는 React 경고
React에서 다음과 같은 오류를 만났다면 : Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
만약 당신이 직접 componentWillUnmount 메서드를 사용하지 않아도 이 경고가 계속해서 나오는 이유를 궁금할 수 있습니다. 걱정하지 마세요. 이 글에서는 이 경고의 가능한 원인과 해결책에 대해 알아보겠습니다.
원인 1: componentWillMount 라이프사이클 메서드의 잘못된 사용
경고의 하나 가능한 원인은 componentWillMount 메서드의 사용입니다. React는 이 라이프사이클 메서드를 사용하는 것을 보류하고 데이터 가져오기와 기타 부수 효과에 대해 대신 componentDidMount 를 사용할 것을 권장합니다. 만약 componentWillMount를 사용하고 비동기 작업이나 구독을 수행한다면 이 경고가 나타날 수 있습니다.. 코드를 업데이트하여 componentDidMount를 사용하고 경고가 여전히 나타나는지 확인하세요.
원인 2: 라우팅 또는 리디렉션 후 상태 업데이트
경고의 또 다른 가능한 원인은 리디렉션 또는 라우팅 변경 후에 상태 업데이트를 수행하는 것입니다. 이 상황은 React Router 또는 유사한 라우팅 라이브러리를 사용할 때 흔히 발생합니다. 다른 컴포넌트로 리디렉션한 다음 이전 컴포넌트에서 상태를 설정하는 경우 경고가 나타날 수 있습니다. 이를 해결하기 위해 라우팅 또는 리디렉션 변경을 진행하기 전에 상태를 설정하는지 확인하세요.
아래 예시를 살펴보겠습니다:
this.setState({ showLoader: true });
const { username } = this.state;
const URL = `https://api.github.com/users/${username}`;
try {
const { data } = await axios(URL);
this.props.apiData(data);
this.props.history.push("profile");
} catch (e) {
console.error(e);
}
this.setState({ showLoader: false });
이 경우에는 this.props.history.push("profile") 줄 위에 this.setState({ showLoader: false }) 줄을 옮기는 것이 문제를 해결합니다.
해결책 요약
요약하면, React에서 “Can’t call setState on an unmounted component” 경고의 두 가지 일반적인 원인은 다음과 같습니다:
componentWillMount라이프사이클 메서드의 잘못된 사용. 코드를 업데이트하여componentDidMount를 사용하세요.- 리디렉션 또는 라우팅 후에 상태를 업데이트하는 것. 어떠한 리디렉션 또는 라우팅 변경도 진행하기 전에 상태를 설정하세요.
이러한 가능한 원인을 처리함으로써, 경고를 해결하고 React 어플리케이션이 메모리 누수 없이 동작하도록 할 수 있습니다.
읽어주셔서 감사합니다! 이 글이 “Can’t call setState on an unmounted component” 경고를 이해하고 문제 해결에 도움이 되길 바랍니다.
