React 정리하기(2) - Props(프로퍼티)

0. props란?

컴포넌트 간의 변수를 유통해주는 통로이다.

<특징>

• 첫번째이자 유일한 인자(파라미터)
• props는 오브젝트이다. (props = {변수명, 변수명})

<사용목적>

• 컴포넌트의 재사용성을 높임

<예시>

import React from 'react';
import Hello from './Hello';

function Hello(props) {
  return (
    <div>나의 나이 {props.age}</div>
    <div>나의 이름 {props.name}</div>)
}

function App() {
  return (
    <Hello name="react" age={18}/> //문자는 '' 숫자는 {}
  );
}

export default App;

1. propType

사람들과 협업시 , prop의 자료형을 까먹고 에러를 발생시킬 수 있다. 이를 방지하기 위한 방법으로 PropType을 활용하여 타입을 확인하는 것이 대표적이다.

1) propType이란?

PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다. 간단한 예시를 통해 propTypes의 장점을 알 수 있다.

import PropTypes from 'prop-types';

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

const Greeting = ({ name }) => {
    return (
      <h1>Hello, {name}</h1>
    );
}

위 코드는 name props를 str형태로 사용하지 않고 다른 형태로 사용할 경우 콘솔로 에러 메시지가 출력된다. 이는 리액트가 렌더링하는 과정에서 잘못된 속성값 타입을 검사해 주기 때문에 가능하다.

2) propType의 종류

3) PropType.type.isRequired

​ isRequired를 이용해 해당 props가 반드시 들어가야 함을 지정한다.

import PropTypes from 'prop-types';

Btn.propTypes = {
	text: PropTypes.string.isRequired,
	fontSize:: PropTypes.number.isRequired,
};

​ 사용하지 않을경우 에러가 콘솔에 출력된다