[REACT] 컴포넌트-프로퍼티

1. 프로퍼티(props)란?

• 프로퍼티, props(properties의 줄임말) 라고 한다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
• 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

2. 사용방법?

• 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

ex)

function App() {
  return (
    <div>
      <Header />
      <Main name="이정민" />
      <Footer />
    </div>
  );
}

Main

function Main(props) {
  return (
    <div>
      <main>
        <h1>안녕하세요. {props.name} 입니다.</h1>
      </main>
    </div>
  );
}

2개의 프로퍼티 넘기기

function App() {
  return (
    <div>
      <Header />
      <Main name="이정민" color="red" />
      <Footer />
    </div>
  );
}

Main

function Main(props) {
  return (
    <div>
      <main>
        <h1 style={{ color: props.color }}>안녕하세요. {props.name} 입니다.</h1>
      </main>
    </div>
  );
}

- props.를 다음과 같이 생략 가능하기도 하다. (javascript의 비구조화 할당 문법 사용)

function Main({name, color}) { // props 대신 비구조화 할당
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );

프로퍼티의 자료형, 타입 정의

전달받을 프로퍼티의 자료형을 미리 선언하여 해당 타입이외의 프로퍼티 전달시 경고노출이 가능하다!

ex)

Main.propTypes = {
  name: PropTypes.string
}

하기와 같이 경고메세지가 나타난다. (다시 변수를 문자열로 바꾸면 경고가 사라진다.)
(Warning: Failed prop type: Invalid prop `name` of type `number` supplied to `Main`, expected `string`. at 컴포넌트명)

프로퍼티 기본값 설정 및 필수값 설정

• 컴포넌트에 props 기본값을 설정하고 싶은 경우 defaultProps를 설정하면 된다.

ex) Main.js (name 프로퍼티가 없는 경우, '디폴트'라는 값을 사용 하게 처리)

function Main({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정
Main.propTypes = {
  name: PropTypes.string
}

// 프로퍼티 기본값 지정
Main.defaultProps = {
  name: '디폴트'

필수값 설정

• 디폴트 설정을 하지 않는 경우 해당 프로퍼티를 필수 프로퍼티로 선언 할 수도 있다.
• isRequired를 이용한 필수값 설정.

  function Main({name, color}) {
     return (
         <div>
             <main>
                 <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
             </main>
         </div>
     );
  }
  // 프로퍼티 타입 지정 및 필수값 설정
  Main.propTypes = {
   name: PropTypes.string.isRequired,
  }

> - 다음과 같은 경고 메세지가 나오는 것을 볼 수 있다.
Warning: Failed prop type: The prop `name` is marked as required in `Main`, but its value is `undefined`. at 컴포넌트명

불리언 프로퍼티 사용하기

ex) Main.js (maleYn이 true인경우 '남자', false인 경우 '여자')

function Main({color, name, maleYn}) {
    const msg = maleYn ? '남자' : '여자'; // 불리언 사용
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다. ({msg})</h1>
            </main>
        </div>
    );
}

Main.propTypes = {
    name: PropTypes.string
}

Main.defaultProps = {
    name: '디폴트'
}