1-6. isRequired를 사용한 필수 propTypes 설정

isRequired를 사용하기 전에 컴포넌트를 생성하여 필수 propTypes를 설정하여봅시다.

App.js

//App.js
import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent>리액트</MyComponent>
    </div>
  );
};

export default App;

MyComponent.js

//MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, children, favoriteNumber }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}입니다.
			
    </div>
  );
};

MyComponent.defaultProps = {
  name: '이름'
};
MyComponent.propTypes = {
  name: PropTypes.string,
};

export default MyComponent;

isRequired란?

propTypes를 지정하지 않았을때 경고 메세지를 띄워 주는 설정입니다.
propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 됩니다.

favoriteNumber라는 숫자를 필수 props로 지정해 봅시다.

//MyComponent.js
...
const MyComponent = ({ name, children, favoriteNumber }) => {
...
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
export default MyComponent;

이렇게 propTypes를 추가하여 봅시다.
콘솔에 favoriteNumber의 값이 undefined라고 에러메세지가 출력됩니다.
App.js로 가서 favoriteNumber의 값을 설정하여 줍시다.

//App.js
...
<MyComponent name = "송한솔" favoriteNumber={1}>리액트</MyComponent>
...

에러메세지가 사라진걸 볼 수있습니다.
이처럼 isRequired는 반드시 입력해야하는 propTypes를 설정할 때 사용할 수 있습니다.

전체 코드보기

App.js

//App.js
import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent name = "송한솔" favoriteNumber={1}>리액트</MyComponent>
    </div>
  );
};

export default App;

MyComponent.js

//MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, children, favoriteNumber }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}입니다.
			
    </div>
  );
};

MyComponent.defaultProps = {
  name: '이름'
};
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;