← Back to rules

react/no-set-state 스타일

작동 방식

리액트 컴포넌트에서 this.setState의 사용을 금지합니다.

왜 나쁜가요?

애플리케이션 상태를 UI 컴포넌트와 분리하는 아키텍처(예: Flux)를 사용할 때, 로컬 컴포넌트 상태 사용을 금지하고 싶을 수 있습니다. 이 규칙은 폼을 사용하지 않는 읽기 전용 애플리케이션에서 특히 유용합니다. 이러한 경우에 로컬 컴포넌트 상태는 거의 필요 없기 때문입니다.

예시

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

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

사용 방법

구성 파일이나 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용하세요:

구성 파일 (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스