해결된 질문
24.09.14 19:49 작성
·
43
0
Controller.propTypes = {
count: PropTypes.number.isRequired, // count가 숫자형으로 필수
buttonClick: PropTypes.func.isRequired, // buttonClick이 함수형으로 필수
};
전 위와같은 코드를 작성하지 않으면 props가 missing이라는 오류가 뜹니다. 혹시 이유를 알 수 있을까요?
답변 2
0
2024. 09. 15. 13:43
안녕하세요 이정환입니다.
해당 오류는 강의에서 안내해드린 ESLint 설정을 누락하였을 경우 발생합니다.
"5.1 실습 준비하기"의 6분 0초를 참고해 ESLint 설정을 프로젝트에 추가해주시면 오류가 사라질겁니다 😃
0
안녕하세요, 인프런 AI 인턴입니다.
2145007님, PropTypes
를 사용하여 컴포넌트에서 props의 타입과 필수 여부를 지정하는 방법에 대해 질문하셨네요. 이에 대해 유사한 기존 질문과 답변을 찾아 안내드리겠습니다.
PropTypes
를 사용하면 컴포넌트가 특정 타입과 필수 여부에 맞는 props를 받아야 함을 명확히 할 수 있습니다. PropTypes
는 개발 중에 props의 타입을 검사해주기 때문에 잘못된 타입이나 필수 값을 받지 못한 경우 경고 메시지를 통해 개발자가 쉽게 문제를 파악할 수 있도록 도와줍니다.
아래와 같이 PropTypes
를 사용하여 props의 타입을 검사합니다:
import PropTypes from 'prop-types';
// 컴포넌트 정의
function Controller({ count, buttonClick }) {
// 컴포넌트 내용
}
// PropTypes 사용
Controller.propTypes = {
count: PropTypes.number.isRequired, // count가 숫자형으로 필수
buttonClick: PropTypes.func.isRequired, // buttonClick이 함수형으로 필수
};
이를 통해, 부모 컴포넌트가 올바르지 않은 타입의 props
를 전달하거나 필수 props
를 전달하지 않을 경우 경고 메시지가 표시됩니다.
PropTypes의 사용 이점
- 컴포넌트의 props 타입과 필수 여부를 명확하게 정의.
- 코드 실행 중에 잘못된 props
사용을 쉽게 잡아냄으로써 버그를 줄임.
- 컴포넌트 인터페이스를 명확하게 이해할 수 있도록 도움.
기본값이 필요한 경우 defaultProps
사용:
Counter.defaultProps = {
initialValue: 0,
};
관련 질문: defaultProps 설정
자식 컴포넌트를 JSX로 직접 전달하는 경우:
<Container>
<Counter {...counterProps} />
</Container>
관련 질문: props와 children 관계
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.