인프런 커뮤니티 질문&답변

2145007님의 프로필 이미지

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

6.3) 기능 구현하기

부모에서 자식에게 props 전달할 때

해결된 질문

24.09.14 19:49 작성

·

43

0

Controller.propTypes = {
  count: PropTypes.number.isRequired, // count가 숫자형으로 필수
  buttonClick: PropTypes.func.isRequired, // buttonClick이 함수형으로 필수
};

전 위와같은 코드를 작성하지 않으면 props가 missing이라는 오류가 뜹니다. 혹시 이유를 알 수 있을까요?

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

2024. 09. 15. 13:43

안녕하세요 이정환입니다.

해당 오류는 강의에서 안내해드린 ESLint 설정을 누락하였을 경우 발생합니다.

"5.1 실습 준비하기"의 6분 0초를 참고해 ESLint 설정을 프로젝트에 추가해주시면 오류가 사라질겁니다 😃

0

인프런 AI 인턴님의 프로필 이미지

2024. 09. 14. 19:51

안녕하세요, 인프런 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 사용을 쉽게 잡아냄으로써 버그를 줄임.
- 컴포넌트 인터페이스를 명확하게 이해할 수 있도록 도움.

다양한 상황에서 PropTypes의 사용 예시:

  1. 기본값이 필요한 경우 defaultProps 사용:

    Counter.defaultProps = {
     initialValue: 0,
    };
    

    관련 질문: defaultProps 설정

  2. 자식 컴포넌트를 JSX로 직접 전달하는 경우:

    <Container>
     <Counter {...counterProps} />
    </Container>
    

    관련 질문: props와 children 관계

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

2145007님의 프로필 이미지

작성한 질문수

질문하기