← Back to rules

react/no-unsafe 정확성

작동 방식

이 규칙은 안전하지 않은 리액트 라이프사이클 메서드의 사용을 식별하고 제한합니다.

왜 나쁜가요?

일부 라이프사이클 메서드 (componentWillMount, componentWillReceiveProps, componentWillUpdate)는 안전하지 않다고 간주되며, 리액트 16.9부터는 폐기되었습니다. 이들은 종종 잘못 사용되어 비동기 렌더링에서 문제를 일으킵니다. UNSAFE_ 접두사가 붙은 버전이나 폐기된 이름 자체를 사용하는 것은 피해야 합니다.

예시

이 규칙에 대한 잘못된 코드 예시:

// 기본적으로, UNSAFE_ 접두사가 붙은 메서드는 경고 표시됨
class Foo extends React.Component {
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillReceiveProps() {}
  UNSAFE_componentWillUpdate() {}
}

// checkAliases: true로 설정하면, 접두사가 없는 버전도 경고됨
class Bar extends React.Component {
  componentWillMount() {}
  componentWillReceiveProps() {}
  componentWillUpdate() {}
}

이 규칙에 대한 올바른 코드 예시:

class Foo extends React.Component {
  componentDidMount() {}
  componentDidUpdate() {}
  render() {}
}

구성

이 규칙은 다음 속성을 가진 구성 객체를 수용합니다.

checkAliases

type: boolean

기본값: false

접두사가 없는 라이프사이클 메서드를 검사할지 여부입니다. true로 설정하면 componentWillMount, componentWillReceiveProps, componentWillUpdate도 UNSAFE_ 버전과 함께 경고 대상이 됩니다. 안전하지 않은 라이프사이클 메서드를 완전히 피하기 위해 이 값을 true로 설정하는 것이 권장됩니다.

사용 방법

구성 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

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

CLI

oxlint --deny react/no-unsafe --react-plugin

참고자료

• 규칙 소스