← Back to rules

react/no-did-mount-set-state 정확성

작동 방식

componentDidMount 라이프사이클 메서드 내에서 setState 사용을 금지합니다.

이 규칙은 함수형 컴포넌트에는 적용되지 않으며, 따라서 현대적인 리액트 코드베이스에서는 비활성화할 수 있습니다.

왜 좋지 않은가?

컴포넌트 마운트 이후 상태를 업데이트하면 두 번째 render() 호출을 트리거할 수 있으며, 이로 인해 속성/레이아웃 혼란이 발생할 수 있습니다.
이는 성능 문제와 예기치 못한 동작을 초래할 수 있습니다.

예시

이 규칙에 부적절한 코드 예시:

var Hello = createReactClass({
  componentDidMount: function () {
    this.setState({
      name: this.props.name.toUpperCase(),
    });
  },
  render: function () {
    return <div>안녕하세요 {this.state.name}</div>;
  },
});

이 규칙에 적절한 코드 예시:

var Hello = createReactClass({
  componentDidMount: function () {
    this.onMount(function callback(newName) {
      this.setState({
        name: newName,
      });
    });
  },
  render: function () {
    return <div>안녕하세요 {this.state.name}</div>;
  },
});

구성

이 규칙은 다음 중 하나의 문자열 값을 수용합니다:

"allowed"

componentDidMount 내의 중첩 함수에서 setState 호출을 허용하며, 기본 동작입니다.

"disallow-in-func"

설정 시, componentDidMount 내의 중첩 함수에서 setState 호출도 금지합니다.

사용 방법

이 규칙을 설정 파일 또는 명령줄 인터페이스에서 활성화하려면 다음과 같이 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-did-mount-set-state": "error"
  }
}

CLI

oxlint --deny react/no-did-mount-set-state --react-plugin

참고 자료

• 규칙 소스