← Back to rules

react/state-in-constructor 스타일

작동 방식

상태 초기화 스타일이 생성자 내부 또는 클래스 속성 중 하나로 일관되게 적용되도록 강제합니다.

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

왜 좋지 않은가?

상태 초기화 스타일이 일관되지 않으면 코드베이스의 유지보수 및 이해가 더 어려워질 수 있습니다. 이 규칙은 리액트 클래스 컴포넌트 간에 일관된 패턴을 강제합니다.

예시

기본 설정으로 "always" 모드에서 잘못된 코드 예시:

class Foo extends React.Component {
  state = { bar: 0 };
  render() {
    return <div>Foo</div>;
  }
}

기본 설정으로 "always" 모드에서 올바른 코드 예시:

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 0 };
  }
  render() {
    return <div>Foo</div>;
  }
}

"never" 모드

상태 초기화 스타일을 클래스 속성으로 사용하도록 강제합니다.

이 규칙의 "never" 모드에서 잘못된 코드 예시:

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 0 };
  }
  render() {
    return <div>Foo</div>;
  }
}

이 규칙의 "never" 모드에서 올바른 코드 예시:

class Foo extends React.Component {
  state = { bar: 0 };
  render() {
    return <div>Foo</div>;
  }
}

구성 방법

이 규칙은 다음 중 하나의 문자열 값을 받습니다:

"always"

생성자 내에서 상태 초기화를 강제합니다. 기본 모드입니다.

"never"

클래스 속성을 이용한 상태 초기화를 강제합니다.

사용 방법

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

설정 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/state-in-constructor": "error"
  }
}

CLI

oxlint --deny react/state-in-constructor --react-plugin

참고 자료

• 규칙 소스