[React] Props란? 컴포넌트에 데이터 전달하는 프로퍼티

📌  Props 란 무엇인가 

- props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성입니다.

- 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에  단방향 데이터 흐름을 갖습니다. 

- 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능합니다. 

 

---

📌  Props 사용하기 : 단방향 데이터 흐름 

props 를 사용하려면 두 단계가 필요합니다.

1) 상위 컴포넌트에서 Props를 지정하고, 2) 하위 컴포넌트에서 받은 Props값을 렌더링해야 합니다. 

이 때 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는데 이것이 "단방향 데이터 흐름" 입니다. 

 

1) 상위 컴포넌트에서 Props 지정하여 넘기기  

- 아래 코드에서 App 컴포넌트가 MyComponent 컴포넌트를 포함하고 있습니다.  

- App 컴포넌트에서 MyComponent에 props 값을 지정해주겠습니다.

- "propValue"라는 프로퍼티로 "헬로 리액트!"라는 값을 넘겨줍니다.

- 컴포넌트 태그 사이에 "Bye 리액트!" 라는 값을 한번 넣어줄게요. 

 

• App.js

import React from "react";
import MyComponent from "./MyComponent";

function App() {
    return(
         <MyComponent propValue="헬로 리액트!">Bye 리액트!</MyComponent>
    );
}
export default App;

 

2) 하위 컴포넌트에서 받아 Props  렌더링하기 

MyComponent 컴포넌트에서 상위 컴포넌트로 부터 받은 Props 데이터를 뷰에 렌더링합니다. 

-  {props.propValue}  : 상위 컴포넌트에서 props 값을 propsValue로 전달했기 때문에 {props.propValue} 로 나타냅니다. 

-  {props.children}  : 리액트 컴포넌트 태그 사이에 내용을 보여주는 props 속성입니다.

  상위 컴포넌트에서 태그 사이에 작성한 "Bye 리액트!" 가 출력됩니다. 

 

• MyComponent.js

import React from "react";

function MyComponent(props) {
    return(
        <div>
            {props.propValue}, {props.children}
        </div>

    );
}
export default MyComponent;

 

•결과 화면  

 

---

📌  Props 타입 

props의 자료형은 자바스크립트의 자료형을 모두 사용 가능합니다. 

⚡ 문자열 타입 프로퍼티 

- 프로퍼티 타입이 문자열인 경우, 프로퍼티 값을 표현할 때는 큰 따옴표("")를 사용합니다. 

<MyComponent name="헬로 리액트!"/>

 

⚡ 문자열 이외 타입의 프로퍼티 

- 문자열 타입 이외의 프로퍼티 값은 중괄호({ })를 사용합니다. 

<MyComponent 
	boolProp= {true} //boolean
	arrProp= {['a','b','c']} //배열
	objProp= {{name:'코딩젤리', title:'헬로리액트!'}} //객체
	funcProp= {() => { alert('알림창'); }}  //함수 
/>

 

---

📌  PropTypes : 데이터 타입 검증하기 

propTypes는 상위 컴포넌트로부터 전달받은 데이터의 타입을 확인하는 라이브러리입니다. 

상위 컴포넌트로부터 전달받은 props가 유효하지 않은 타입의 데이터가 전달되는 경우 콘솔에 에러 경고문이 출력됩니다. 

 

⚡ PropTypes 써야 하는 이유

실무에서 리액트 앱이 커지는 경우 다양한 props가 쓰이게 됩니다.
타입 검사를 활용하면 타입으로 인한 오류 발생을 방지 할 수 있기 때문에 props의 자료형은 미리 선언해주는 것이 좋습니다.

 

⚡ PropTypes 사용하기 전에 

PropTypes는 원래 리액트에 내장 되어있었으나 React v15.5부터 다른 패키지로 이동했습니다.

 propTypes를 사용하려면 npm prop-types 라이브러리를 설치하고 컴포넌트 파일에 PropTypes 를 import 합니다. 

import PropTypes from 'prop-types';

 

⚡ propTypes 사용하기 

propTypes를 사용하여 프로퍼티를 지정해보겠습니다. 프로퍼티 타입 체크는  PropType.Type명 으로 선언 가능합니다.

기본적으로 arry, bool, func, number, object, string 부터 React 타입인 element, 클래스 인스턴스 등 타입 체크가 가능합니다. 

 

• App.js 

- 상위 컴포넌트에서 name, age, isChecked 속성을 하위 컴포넌트로 전달합니다.

<MyComponent name="코딩젤리" age={2} isChecked={false}/>

 

• MyComponent.js

- 하위 컴포넌트에서 전달받은 Props의 타입을 체크합니다. 

- PropType.string, PropType.bool 로 props가 해당 타입인지 체크합니다. 
- PropType.oneOf(['string','number']) : 해당 Props가 여러 종류 중하나가 될수 있는 타입임을 나타냅니다.

  전달받은 props가 string, number 중 하나에 해당하면 됩니다. 

import React from "react";
import PropType from 'prop-types';
function MyComponent(props) {
    return(
        <div>
            {props.name},{props.age}, {props.isChecked ? "true" : "false"}
        </div>
    );
}

MyComponent.prototype = {
    name : PropType.string,
    age : PropType.oneOf(['string','number']),
    isChecked : PropType.bool
}
export default MyComponent;