컴포넌트 - 3. property

컴포넌트 - 3. property

728x90

Property

상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다.

property의 기초

App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다.

import React from "react"; import MyComponent from './MyComponent'; class App() extends React.Component{ render(){ return ( ); } } export default App;

MyComponent에서는 name이라는 이름의 프로퍼티로 전달받은 "msg" 문자열을 render 함수에서 참조한다.

아래 코드에서 this.props.name으로 프로퍼티 값을 참조하고 있음을 확인할 수 있다.

import React from "react"; function MyComponent() extends React.Component{ render(){ const name = this.props.name; return {name} } } export default MyComponent;

property의 다양한 사용법

property의 자료형은 미리 선언해두는 것이 좋다. 이는 react에서 제공하는 prop-types를 사용한다.

property의 자료형을 미리 선언하는 것의 장점

- react 엔진이 property로 전달하는 값의 변화를 효율적으로 감지할 수 있다.

- 개발자가 지정되지 않은 자료형의 property를 전달하려 할 때 경고 메시지를 통해 알려준다.

문자열은 ""를 사용하여 전달하며 다른 property들은 중괄호 {}를 통해 전달한다.

import React from "react"; import PropTypes from 'prop-types'; class MyComponent2() extends React.Component{ render(){ const{ boolValue, numValue, arrayValue, objValue, nodeValue, funcValue, } = this.props; return ( boolean : {boolValue} number : {numValue} array : {arrayValue} object : {objValue} node : {nodeValue} function : {String(funcValue)} ); } } MyComponent2.propTypes = { boolValue : PropTypes.bool, numValue : PropTypes.number, arrayValue : PropTypes.arrayOf(PropTypes.number), objValue : PropTypes.object, nodeValue : PropTypes.node, funcValue : PropTypes.func, } export default MyComponent2;

객체를 전달할 때는 App 컴포넌트의 주석처럼 중괄호를 두 번 사용하는 방법이 있으나 개발자 간의 실수를 줄이기위해 변수에 객체를 담아 전달하는 방식을 선호한다(배열, 객체, 노드, 함수 모두 동일).

import React from "react"; import MyComponent2 from './MyComponent2'; class App() extends React.Component{ render(){ const array = [1,2,3]; const obj = { name : '제목', age : 30 }; const node = header const func=() => {console.log('function property');}; return ( ); } } export default App;

필수 property와 property의 기본값 지정하기

1. 필수 property

PropTypes의 isRequired를 이용하여 requiredStringValue 변수를 선언해 필수 property로 정의한다.

필수 property로 선언되면 상위 컴포넌트에서 해당 컴포넌트를 사용할 때 반드시 필수 프로퍼티를 전달해야하고, 전달하지 않으면 console 창에 오류가 발생한다.

import React from "react"; import PropTypes from 'prop-types'; class MyComponent3() extends React.Component{ render(){ const { objValue, requiredStringValue } = this.props; return ( 객체값 : {String(object.entries(objValue))} 필수값 : {requiredStringValue} ); } } MyComponent3.propTypes = { objValue : PropTypes.shape({ name : PropTypes.string, age : PropTypes.number, }) }; requiredStringValue : PropTypes.string.isRequired; export default MyComponent3;

2. property의 기본값 지정하기

PropTypes의 defaultProps를 이용하여 property의 기본값을 정의할 수 있다.

특히, 아래 코드에서 사용한 boolean 값은 상위 컴포넌트에서 아무런 값도 전달하지 않을 경우 undefined가 전달된다.

import React from "react"; import PropTypes from 'prop-types'; class MyComponent4() extends React.Component{ render(){ let message1 = ""; if(this.props.boolValue === false) message1 = "boolValue의 default value는 false입니다." let message2 = ""; if(this.props.boolValueWithoutDefault === false) message2 = "boolValueWithoutDefault default value는 false입니다." return ( {message1} {message2} ); } } MyComponent4.propTypes = { boolValue : Proptypes.bool, boolValueWithoutDefault : Proptypes.bool }; MyComponent4.defaultProps = { boolValue : false }; export default MyComponent4;

import React from "react"; import MyComponent3 from './MyComponent3'; import MyComponent4 from './MyComponent4'; class App() extends React.Component{ render(){ return ( ); } } export default App;

- App 컴포넌트에서 MyComponent3을 사용할 때 objValue의 age 에 문자열을 대입했기때문에 오류가 한 번 발생하고, 필수 property인 requiredStringValue를 전달하지 않았기 때문에 총 두 번의 오류가 발생한다.

- App 컴포넌트에서 MyComponent4를 사용할 때 아무 값도 전달하지 않았다.

따라서 boolValue는 기본값으로 false를 가지고 boolValueWithoutDefault 는 아무 값도 전달받지 못했기 때문에 undefined를 가진다. 이에 message1만 출력된다.

728x90

from http://mingmeng030.tistory.com/216 by ccl(A) rewrite - 2021-12-14 18:00:28