[React] Props

Props

Props?

prperties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소

Props 특징

1) Props는 부모컴포넌트에서만 사용 가능합니다.

2) 변하지 않는 데이터를 다룰 때 사용합니다.

---

Props 렌더링 과정 

props 렌더링 → props 값 설정 → props 기본 값 설정 → props 값 검증

1. jsx 내부에서 props 렌더링

this키워드로 props에 접근 가능합니다.

PropComponent.js

import React, {Component} from 'react';

import PropTypes from 'prop-types';

class PropComponent extends Component{

render(){

return(

<div>

<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>

</div>

)

}

export default PropComponent;

app.js

import React, { Component } from 'react';

import './App.css';

import PropComponent from './component/PropComponent';

class App extends Component {

render() {

return (

<PropComponent name="hyeung"/>

);

}

}

export default App;

실행 결과

---

2. props 값 설정, 기본값 설정

defaultProps 객체를 이용해서 기본으로 값을 설정 가능하고, 별도 설정이 없다면 기본으로 설정된 값이 사용 됩니다.

값을 설정하는 방법은 두 가지가 있습니다.

1) 클래스 밖에서 설정

PropComponent.defaultProps= {

name : 'default name'

}

2) transform-class-properties 문법

class PropComponent extends Component{

static defaultProps = {

name : '기본 이름'

,age : 30

}

render(){

return(

<div>

<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>

<p>나이는 {this.props.age}살 입니다.</p>

</div>

)

}

}

---

3. props 값 검증

props 값 검증을 위해 타입을 지정할 수 있습니다.

1) props type 지정

type역시 값 설정과 같이 두가지 방법으로 설정이 가능합니다.

isRequired를 사용하면 필수값으로 지정이 가능합니다.

import React, {Component} from 'react';

import PropTypes from 'prop-types';

class PropComponent extends Component{

static defaultProps = {

name : '기본 이름'

,age : 30 // 제거 시 에러(isRequired)

}

static propTypes = {

name : PropTypes.arrayOf(PropTypes.string)

,age : PropTypes.number.isRequired

}

render(){

return(

<div>

<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>

<p>나이는 {this.props.age}살 입니다.</p>

</div>

)

}

}

PropComponent.defaultProps= {

name : 'default name'

}

PropComponent.propTypes = {

name : PropTypes.string

}

export default PropComponent;

 

2) props type 종류

- array : 배열

- bool  : true, false

- func  : 함수

- number : 숫자

- object : 객체

- string : 문자열

- symbol : ES6문법의 심볼 객체

- node   : 렌더링할 수 있는 모든 것(숫자, 문자열, element 또는 이들로 구성된 배열)

- element : 리액트 요소

- instanceof(MyClass) : 특정 클래스의 인스턴스

- oneOf(['male','Female']) : 주어진 배열 요소 중 값 하나

- oneOfType([React.PropTypes.string, React.PropTypes.number]) : 주어진 배열 안 요소중 하나

- arrayOf(React.PropTypes.number) : 주어진 종류로 구성된 배열

- objectOf(React.PropTypes.number) : 주어진 종류의 값을 가진 객체

- shape({name:React.PropTypes.string, age:React.PropTypes.number}) : 주어진 스키마를 가진 객체

- any : 아무 종류

3) 타입 관련 error

타입관련된 에러를 직접 발생 시켜 봤습니다.

name 타입을 잘못 입력하고, 

필수값인 age를 입력하지 않았습니다.

PropComponent.js

import React, {Component} from 'react';

import PropTypes from 'prop-types';

class PropComponent extends Component{

static defaultProps = {

// name : '기본 이름'

// ,age : 30 // 제거 시 에러(isRequired)

}

static propTypes = {

// name : PropTypes.arrayOf(PropTypes.string)

name : PropTypes.string

,age : PropTypes.number.isRequired

}

render(){

return(

<div>

<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>

<p>나이는 {this.props.age}살 입니다.</p>

</div>

)

}

}

export default PropComponent;

  

app.js

 

class App extends Component {

render() {

return (

<PropComponent name={3} />

);

}

}

페이지는 정상적으로 렌더링 되는 것처럼 보이지만

개발자 도구 콘솔창에는 에러가 발생 했습니다.

첫 번째는 string 타입인데 number 타입을 적용 한 경우

두 번째는 필수값을 입력하지 않아 undefined가 들어가서 발생한 경우 입니다.

---

관련 포스팅

[React] State

[React] Props

---

참고 : 리액트를 다루는 기술(저:VELOPERT)