[React] PropsRequired로 required 옵션 실현

필요한 값이 없을 경우 에러 메시지를 출력하는 required

 

리액트에서는 변수에 모든 값을 지정하지 않아도 에러가 발생하지 않지만,

필수로 필요로 하는 값의 경우에는 값을 지정하지 않으면 에러를 발생시켜야 하는 경우가 필요하다.

 

 

[App.js]

 

import './App.css';
import PropsRequired from './PropsRequired';

function App() {
  return (
    <div className="App">
    <PropsRequired ReactVersion={501}/> <br/>
    </div>
  );
}

export default App;

- ReactVersion 값만 지정

 

[PropsRequired.js]

import datatype from 'prop-types'; // (1)

let PropsRequired = ({ReactString, ReactVersion}) => {
    return(
        <>
            {ReactString} {ReactVersion}
        </>
    )
}

PropsRequired.propTypes ={ // (2)
    ReactString: datatype.string.isRequired
}

PropsRequired.defaultProps = { // (3)
    ReactString: '리액트',
    ReactVersion: 501
}

export default PropsRequired;

(1) propTypes를 이용해 required를 구현하기 때문에 import 필요

(2) 필요한 변수에 isRequired를 이용해 필수 변수로서 지정

  - App.js에서 ReactString의 값을 지정해주지 않았는데 이를 지정하지 않을 경우를 막기 위함

  - ReactString에 데이터가 없을 경우 콘솔에 에러를 출력

(3) 만약 가져온 값이 없을 경우 기본값 설정을 하는 것도 가능