[React] Props

---

📝 Props

props는 properties의 줄인 표현으로 Component 속성을 설정할 때 사용하는 요소 입니다. props 값은 해당 Component를 불러와 사용하는 부모 Component에서 설정할 수 있습니다.

---

📜 JSX 내부에서 props 렌더링

props 값은 Component 함수의 파라미터로 받아 와서 사용할 수 있습니다. props를 렌더링할 때는 JSX내부에서 { } 기호로 감싸주면 됩니다.

const MyComponent = props => {
    return <div> Hi, My name is { props.name }!!</div>;
};
export default MyComopnent;

📜 Component 사용할 때 pops 값 지정

불러온 Component 내부에 props 값을 지정할 수 있습니다.

import MyComponent from './MyComponent';
const App = () => {
    return <MyComponent name="React"/>;
};
export default App;

📜 props 기본값 설정: defaultProps

props 값을 따로 지정하지 않았을 때 보여 줄 기본 값을 설정하는 방법입니다.

const MyComponent = props => {
    return <div> Hi, My name is { props.name }!!</div>;
};

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

export default MyComopnent;

📜 propTypes를 통한 props 검증

Component의 필수 props를 지정하거나 props의 type을 지정할 때는 propTypes를 사용합니다. Component의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다.

우선 코드 상단에 import 구문을 사용하여 불러옵니다.

import PropTypes from 'prop-types';

그리고 하단에 propTypes를 지정하는 코드를 입력합니다.

MyComponent.propTypes = {
    name : PropTypes.string
};

이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다.

---

📝isRequired를 사용하여 필수 propTypes를 설정할 수 있습니다.

MyComponent.propTypes = {
    name : PropTypes.string,
      myNumber : PropTypes.number.isRequired
};

위와 같이 입력하게 되면 myNumber를 숫자가 필수인 props로 지정한 상태인데 값을 제대로 전달하지 않으면 경고메세지가 나타납니다.

📜 class형 Component에서 props사용

class형 Component에서 props를 사용할 때는 this.props를 조회하면 됩니다. 그리고 defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있습니다.

import { Component } from 'react';
class MyComponet extends Component{
    render(){
        const { name, myNumber } = this.props; //비구조화 할당
          return (
              <div>
                  Hi, My name is { name }!!;
                  mMy favorite number is { myNumber };
              </div>
        );
    }
}

---