[React] props

📍 props
properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

(+) (예제에서는 App 컴포넌트가 부모 컴포넌트임!)

• JSX 내부에서 props 렌더링해보기
  

• 결과
  

(+) 타입스크립트로 사용하는 방법

---

📍 defaultProps
defaultProps는 리액트 컴포넌트에서 props 값을 따로 지정하지 않았을 때 보여줄 기본값을 설정하는 데 사용한다.

• 결과
  현재 name 값을 지정하지 않아서 브라우저에는 ‘안녕하세요, 제 이름은 입니다.’라고 보임.
  

import PropTypes from 'prop-types';

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
    name: '기본 이름'
 };

//  ESLint와 같은 코드 품질 검사 도구 비활성화해 주면 작성 안해도 됨.
MyComponent.propTypes = {
    name: PropTypes.string.isRequired,  
};
  
export default MyComponent;

코드를 조금 더 수정 후 저장하고, 브라우저를 확인하면...