React 클래스 내부에 static props로 propTypes와 defaultProps를 넣는 것은 괜찮은가요?
React.JS는 사용자 인터페이스를 구축하기 위해 많이 사용되는 인기있는 자바스크립트 라이브러리입니다. React 컴포넌트를 사용할 때 propTypes와 defaultProps를 선언하는 다양한 방법을 사용할 수 있습니다. 이 블로그 포스트에서는 propTypes와 defaultProps를 React 클래스 내부에 static props로 넣는 것이 허용되는지 알아보겠습니다.
propTypes와 defaultProps란?
토론에 들어가기 전에 간단히 propTypes와 defaultProps가 무엇인지 이해해 보겠습니다.
React에서 propTypes는 컴포넌트가 받을 수 있는 각 prop의 타입을 지정하는 데 사용됩니다. 이를 통해 버그를 잡고 올바른 유형의 데이터가 컴포넌트로 전달되도록 도와줍니다. 반면 defaultProps는 부모 컴포넌트에서 제공되지 않는 경우에 prop의 기본값을 정의하는 데 사용됩니다.
두 가지 접근 방법
React 컴포넌트에서 propTypes와 defaultProps를 선언하는 두 가지 일반적인 접근 방법이 있습니다:
접근 방법 1: 클래스 외부에 propTypes와 defaultProps 선언하기
class AttachmentCreator extends Component {
render() {
return (
<div>
<RaisedButton primary label="Add Attachment" />
</div>
);
}
}
AttachmentCreator.propTypes = {
id: PropTypes.string,
};
접근 방법 2: static props로 propTypes와 defaultProps 선언하기
class AttachmentCreator extends Component {
static propTypes = {
id: PropTypes.string,
};
render() {
return (
<div>
<RaisedButton primary label="Add Attachment" />
</div>
);
}
}
논쟁
이제 각 접근 방법에 대한 논쟁을 논의해 보겠습니다:
접근 방법 1: 클래스 외부에 propTypes와 defaultProps 선언하기
이 접근 방법은 propTypes와 defaultProps를 선언하는 전통적인 방식을 따릅니다. 클래스를 깨끗하게 유지하고 prop 정의를 컴포넌트 로직에서 분리합니다. 일부 개발자는 이 접근 방식을 선호하는데, 성립된 규칙을 준수하기 때문입니다.
접근 방법 2: static props로 propTypes와 defaultProps 선언하기
JavaScript의 class properties 도입으로 인해 클래스 내부에서 정적 속성을 직접 선언할 수 있게 되었습니다. 이 접근 방식은 필요한 코드 양을 줄이고 모든 관련 정보를 클래스 자체에 유지합니다. 코드의 가독성과 유지 관리성을 향상시킬 수 있습니다.
그래서, 어떤 접근 방식을 선택해야 할까요?
좋은 소식은 두 가지 접근 방식 모두 유효하고 널리 사용된다는 것입니다. React는 propTypes와 defaultProps를 선언하는 특정한 방식을 강요하지 않습니다. 최종적으로는 개인적인 선호도와 팀의 규칙에 따라 달려있습니다.
그러나 특정한 스타일 가이드를 따르는 프로젝트에서 작업하는 경우, 해당 가이드라인을 준수하는 것이 좋습니다. 예를 들어, 에어비앤비 스타일 가이드는 propTypes와 defaultProps를 클래스 외부에 선언하는 것을 권장합니다.
결론
React 클래스 내부에 propTypes와 defaultProps를 어디에 위치시킬지에 대한 논쟁은 계속됩니다. 두 가지 접근 방식 모두 허용되지만, 프로젝트 내에서 일관성을 유지하고 수립된 관례나 스타일 가이드를 따르는 것이 중요합니다. 최종적으로 선택은 개인과 팀에 가장 잘 맞는 방법에 달려있습니다.
React의 더 자세한 최적 사례에 대한 정보는 공식 React 문서와 에어비앤비의 JavaScript 스타일 가이드와 같은 인기 있는 스타일 가이드를 참조하십시오.
