[React] Props

Props

컴포넌트에서 속성을 설정할 때 사용하는 요소로, 부모 컴포넌트에서 자식 컴포넌트에서 데이터를 전달할 때 사용한다.
읽기 전용 데이터로 자식 컴포넌트에서 변경할 수 없다.

Props값을 설정하는 법을 알아보기 위해 다음의 코드를 살펴보자.

//App.js 파일
import ComponentTest from './ComponentTest';

const App = () => {
  return <ComponentTest name = "react" year={9999}>만나서 반갑습니다.</ComponentTest>;
}

export default App;

//ComponentTest.js 파일
import Proptypes from 'prop-types'

const ComponentTest = props =>{
    const {name, year, children} = props

    return (
        <div>
            안녕하세요 저는{name}입니다.<br/>
            나이는 {year}입니다.<br/>
            {children}
        </div>
    );
}

ComponentTest.propTypes = {
    name: Proptypes.string,
    year: Proptypes.number.isRequired
}


export default ComponentTest;

코드 동작과정
1. App.js파일에서 ComponentTest컴포넌트에 Props를 전달한다.

const App = () => {
  return <ComponentTest name = "react" year={9999}>만나서 반갑습니다.</ComponentTest>;
}

• name과 year을 설정하여 값을 전달한다.

• children Prop: 만나서 반갑습니다.와 같이 컴포넌트 태그 사이에 작성된 내용은 자동으로 children이라는 이름의 Props로 전달된다.

2. ComponentTest컴포넌트에서 props사용해 데이터를 추출한다.

const {name, year, children} = props;

• Props 구조 분해 할당: const {name, year, children} = props로 구조 분해 할당을 통해 코드를 작성한다.

• 전달받은 Props는 {name}, {year}와 같이 JavaScript 표현식을 통해 JSX 내부에서 사용할 수 있다.

• 구조분해를 사용하지 않고 {props.name}, {props.year}, {props.children}을 사용해 Props값을 출력할 수 있지만 편의상 구조분해를 사용했다.

3. PropTypes로 Props를 검증할 수있다.

prop-types 패키지를 사용하여 전달받은 Props의 유형(type)과 필수 여부를 지정할 수 있다.

ComponentTest.propTypes = {
    name: Proptypes.string,
    year: Proptypes.number.isRequired
};

• propTypes 속성: 컴포넌트가 받는 Props의 타입을 지정한다.
  name: 문자열(string) 타입이어야 한다.
  year: 숫자(number) 타입이며, isRequired가 있어서 반드시 전달되어야 한다.

• Props 검증 효과: Props 타입이 맞지 않거나 필수 Props가 누락되면 콘솔에 경고가 표시된다.