02장 초급 리액트 props, boolean, 객체형 변수로 사용하기!

안녕하세요 jju_developer입니다.

 

이번시간에는 컴포넌트의 props라는 개념에 대해서 알아보겠습니다.

props는 properties의 줄임말입니다.

우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다.

 

props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.

props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없으며, 데이터를 변경하기 위해서는

컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다. ^^

 

예제 1 props

 

import React, { Component } from 'react';

class R017_Props extends Component {

  render() {

    let props_value = this.props.props_val;

    props_value += ' from App.js'

    return (

    <div>{props_value}</div>

    )

  }

}

export default R017_Props;

 

props

app.js

값을 변경할때에 로컬변수에 값을 넣고 그것에 +from App.js를 해서 App.js에 있는 내용을 추가시켜서

화면에 return하도록 구현한 내용입니다.

 

자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교합니다.

이때 자료형이 일치하지 않는다면 경고 메시지로 알려주기 때문에 잘못된 데이터를 확인할 수 있게 됩니다.

import React, { Component } from 'react';
import datatype from 'prop-types';

class R018_PropsDatatype extends Component {
  render() {
    let {
      String, Number, Boolean, Array, ObjectJson, Function
    } = this.props
    return (
    <div style={{padding: "0px"}}>
      <p>StringProps: {String}</p>
      <p>NumberProps: {Number}</p>
      <span>BooleanProps: {Boolean.toString()}</span>
      <p>ArrayProps: {Array.toString()}</p>
      <p>ObjectJsonProps: {JSON.stringify(ObjectJson)}</p>
      <p>FunctionProps: {Function}</p>
    </div>
    )
  }
}

R018_PropsDatatype.propTypes = {
  String: datatype.number,
  Number: datatype.number,
  Boolean: datatype.bool,
  Array: datatype.array,
  ObjectJson: datatype.object,
  Function: datatype.func,
}

export default R018_PropsDatatype;

콘솔에 내용이 찎힘

props 사용은!!!!??

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 

문자열 외의 값을 전달할 때는 중괄호({ })를 사용합니다.

 

2개의 프로퍼티 넘기기 가능~!
ex) App.js (N개의 프로퍼티 전달 가능.)

 

프로퍼티의 자료형을 미리 선언할 수 있습니다.

리액트 엔진이 프로퍼티로 전달하는 값을 효율적으로 알 수 있고, 버그예방에도 도움이 됩니다.
리액트에서 제공하는 prop-types를 이용하여 각각의 자료형을 선언할 수 있습니다.

 

props 값을 Boolean 형으로 하위 컴포넌트에 전달할 경우, true나 false 중 하나를 할당합니다.

추가 문법으로 props 변수를 선언한 후 값을 할당하지 않고 넘기면 true가 기본값으로 할당됩니다.

 

예제 2 props 값을 Boolean 

 

App.js 파일

import React from 'react';
import './App.css';
import PropsBoolean from './R019_PropsBoolean'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<PropsBoolean BooleanTrueFalse={false}/>
<PropsBoolean BooleanTrueFalse/>
</div>
);
}
export default App;

 

R019_PropsBoolean.js 파일

import React, { Component } from 'react';
class R019_PropsDatatype extends Component {
render() {
let {
BooleanTrueFalse
} = this.props
return (
<div style={{padding: "0px"}}>
{BooleanTrueFalse ? '2. ' : '1. '}
{BooleanTrueFalse.toString()}
</div>
)
}
}
export default R019_PropsDatatype;

처음에 false 넣고 나서 실행하고 기본값은 true인 것을 볼 수 있는 예제입니다!!!

 

예제 3 props 객체형으로 사용하기 

React에서 사용자가 새롭게 정의한 컴포넌트를 발견하면 JSX의 속성을 

단일 객체로 저장하는데 이때의 객체를 props라고 부릅니다.

Javascript에서의 객체를 생각하면 이해하기 쉽죵

 

props 값을 객체로 하위 컴포넌트에 전달할 경우, 

자료형을 object로 선언합니다.

하지만 객체 형태(객체 내부 변수들)의 자료형을 선언할 때는 shape이라는 유형을 사용합니다.

 

예를 들면,

shape()를 사용하여 객체변수 ObjectJson 내부에 있는 key값에 대해 자료형을 선언합니다. (name, type)

 

[020/App.js]

import React from 'react';
import './App.css';
import PropsObjVal from './R020_PropsObjVal'

function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<PropsObjVal ObjectJson={{react:"리액트", twohundred:"200"}}/>
</div>
);
}
export default App;

R020_PropsObjVal.js 파일

 

render() 함수 내에서 지역 변수를 선언해 props로 전달된 값을 할당합니다.
ObjectJson 객체의 key와 value 값들을 화면에 출력하고,
shape 유형을 사용해 객체 변수 OjectJson의 내부 key 값에 대해 자료형을 선언합니다.

twohundred가 문자열("200")로 전달됐지만, 자료형이 number로 선언되었습니다.

자료형이 일치하지 않아 경고 메시지가 발생하고, 경고 메시지는 개발자 도구 콘솔 창에서 확인할 수 있습니다.

 

[020/R020_PropsObjVal.js]

import React, { Component } from 'react';
import datatype from 'prop-types';
class R020_PropsObjVal extends Component {
render() {
let {
ObjectJson
} = this.props
return (
<div style={{padding: "0px"}}>
{JSON.stringify(ObjectJson)}
</div>
)
}
}
R020_PropsObjVal.propTypes = {
ObjectJson: datatype.shape({
react: datatype.string,
twohundred: datatype.number
})
}
export default R020_PropsObjVal;

리액트1 (초보자를 위한 리액트 200제)

브라우저 결과 확인을 보면,
자료형이 일치하지 않아도 화면은 정상적으로 보입니다,

자료형이 틀리면 '에러'가 아닌 단순 '경고 메시지'가 콘솔창에 보이는 것입니다.

 

[정리]

properties의 줄임말로서, 컴포넌트의 입력값입니다.

props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미합니다.

그리고 props는 state와 달리 read-only라는 것을 기억해야 합니다.