React.js(2) - Props

📚 Props(Property)

- 일종의 데이터이다.

- 상위 컴포넌트(App.js)가 하위 컴포넌트(component.js)에 값을 전달할때 사용되는 것이다.(단방향 데이터 흐름 갖는다.)

- 프로퍼티는 수정이 불가능하다.(자식입장에선 읽기 전용인 데이터이다.)

- 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. (문자열 외의 값을 출력하기 위해서 하위 컴포넌트에서 바꿔준다.)

 

💚기본적인 Props 사용 구조 

 

App.js

import React from 'react';
import './App.css';
import Props from './R017_Props';

function App() {
     return (
         <div className="App">
           <h1>Start React 200!</h1>
           <p>CSS 적용하기</p>
           <Props props_val = "This is Props"/>
         </div>
     )

export default App;


}

 

R017_Props.js

import React from "react";
import { Component } from "react";

class R017_Props extends Component {
    render() {
        let props_value = this.props.props_val; //this.props.뒤에 상위 컴포넌트인 App.js에서 전달받은 props 변수명을 붙이면 해당 데이터를 사용할수 있음
        props_value += 'from App.js';
        //데이터를 수정해야 하는 경우에 += 혹은 -=을 넣어서 수정할 수 있다. 
        //부모컴포넌트로부터 받아온 props_value를 옮겨 가공한다.
        // App.js에서 넘겨받은 문자열인(This is Props) 뒤에 새로운 문자열(from App.js)을 붙인다.: This is Props from App.js
        return (
            <div>{props_value}</div>
            //가공한 문자열을 화면에 표시한다. 
        )
    }
}

export default R017_Props;

 

 

✍Props의 데이터 타입 검증하기 

데이터 타입을 자식 컴포넌트에서 선언해준 뒤(function.propTypes={}) 👉 app.js에서 데이터 입력한 변수들을 prop으로 받아오기 (this.props)👉데이터 타입이 맞는지 propTypes에서 검증한 뒤 맞다면, 문자열 형식으로 바꾸어 출력해주기 

 

App.js 

import React from 'react';
import './App.css';
import PropsDatatype from './R018_PropsDatatype';

function App() {
    return (
        <div className="App">
          <h1>Start React 200!</h1>
          <p>CSS 적용하기</p>
          <PropsDatatype
             String = "react"
             Number = {200}
             Boolean = {1==1}
             Array = {[0,1,0]}
             ObjectJson = {{react:"리액트", twohundred:"200"}}
             Function = {console.log("FunctionProps : function!")}
            //문자열(String), 숫자(Number), 불리언, 배열, 객체(ObjectJson)
            //자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교함
            //이때자료형이 일치하지 않는다면 결고 메세지로 알려주기 때문에 잘못된 데이터를확인하는 것이 가능하다. 
      />
        </div>
    
    )

}

 

 

R018_PropsDatatype.js 

import React from "react";
import { Component} from "react";
import datatype from 'prop-types';  //데이터타입 반환 라이브러리 불러오기
//자식 컴포넌트에서 props에 대한 자료형을 
class R018_PropsDatatype extends Component {
    render () {
        let {
            //지역변수를 선언하여 props로 전달된 값들을 (부모 컴포넌트에서 전달받은 값들)을 할당해준다. 
            String, Number, Boolean, Array, ObjectJson, Function
        } = this.props
        return (
            <div style={{padding:"0px"}}>
                <p> StringProps : {String}</p>
                <p>NumberRos : {Number}</p>
                <span>Booleanprops : {Boolean.toString()}</span>   //불리안형은 변수명.toString()을 통해서 문자열형으로 출력한다.
                <p>ArrayProps:{Array.toString()}</p>  //배열형은 변수명.toString()을 통해서 문자열형으로 화면에 출력한다.
                <p>Object JsonProps : {Json.stringfy(ObjectJson)}</p>  //객체형은 Json.stringfy(변수명)을 통하여 출력한다.
                <p>Function Props : {Function}</p>
                //여기서 App.js에서 넘어온값들이 데이터타입과 맞는지를 검사하고 맞다면 그 값들을 출력해준다. 

                
            </div>
        )
    }
}
//이 컴퓨넌트에서 props에 대한 자료형들을 선언해놓았음 
R018_PropsDatatype.propTypes = {
    String : datatype.string,  // 문자열형
    Number:datatype.number,  // 숫자형
    Boolean : datatype.bool,  //불리안형
    Array : datatype.array, // 배열형
    ObjectJson : datatype.object,  //객체형
    Function : datatype.func, //함수형

}

export default R018_PropsDatatype;

 

✍props 유형별 출력하기 

 

🐥BooleanProps

- true, false만 정의 가능한 자료형

- 중괄호로 감싸 전달할 필요 없음. 프로퍼티의 이름만 선언하면 된다.

 

App.js

import React from 'react';
import './App.css';
import PropsBoolean from './R019_PropsBoolean';


function App() {
    return (
    <div className="App">
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <PropsBoolean BooleanTrueFalse= {false}/>
      //Booleanprops 변수를 선언해주고 false값을 담아 props에 전달해준다. 
      <PropsBoolean BooleanTrueFalse/>
      //이것도 위처럼 PropsTrueFalse 변수에 선언하지만 위처럼 할당은 해주지 않고 props에 담아 하위 컴포넌트에 전달한다. 

    </div>
    
    
    
    )
}

export default App;

//콘솔창을 확인해보면 순서대로
//1.false
//2.true가 출력되는 것이 확인가능하다. : 값을 아예 할당해주지 않으면 객체의 초기값은 false가 된다.

 

 

R019_PropsBoolean.js 

import React from "react";
import { Component } from "react";


class R019_PropsBoolean extends Component {
    render() {
        let {
            BooleanTrueFalse  
        } = this.props// this.props를 통해 전달된 값을 BooleanTrueFalse에 할당해준다. 
        return (
            <div>
               
                {BooleanTrueFalse ? '2.' : '1.'} // BooleanTrueFalse가 참이면 2를 반환해주고 아니면 1를 반환해준다는 의미. ? :는 if print else print 구문과 똑같음   
                {BooleanTrueFalse.toString()}
                //Boolean 변수는 직접 출력이 불가능하므로 toString() 함수를 사용해 문자열로 변환하여 출력한다. false true로 숫자 옆에다가 출력함
            </div>
        )
    }

    
}

export default R019_PropsBoolean;

⭐BooleanTrueFalse.toString()

 

객체의 값에 따라 문자열 "true" 또는 "false"를 반환한다. 

 

🐥ObjectProps(객체 리터럴 프로퍼티)

- 주의해야할 점이, 객체를 문자열로 인식해서 ""를 붙이는 것을 주의해야 한다. 객체는 객체이다. 문자열이 아니기 때문에 , {}를 묶어서 전달해주어야 한다. 

-  객체의 형태

객체 : name: Lee, age: 20
객체의 키 : name, age
객체의 값 : Lee, 20

 

App.js

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

function App() {

    return (
    
      <div className = "App">
         <PropsObjVal ObjectJson = {{react : "리액트", twohundred:"200"}}/>
      //ObjectJson변수와 키(react, twohundred)를 선언하고 value를 할당한 뒤 (리액트, 200) props에 담아 하위 컴포넌트(R020_PropObjVal)로 전달함 
      </div>
    
    
    )

           }

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

class R020_PropsObjVal extends Component{
    render() {
        //함수 내에서 지역 변수를 선언해 props로 전달한 값을 할당해준다. 

        let {
            ObjectJson 
        } = this.props
        return (  //return에서 화면을 출력해준다. 
            <div style = {{padding : "0px"}}>
                //JSON.stringify : JavaScript 값이나 객체를 JSON 문자열로 변환해야함 
                {JSON.stringify(ObjectJson)}  // key와 value를 화면에 출력해준다. 

            </div>
        )
    }
    

}

R020_PropsObjVal.propTypes = {
    ObjectJson : datatype.shape({ //shape 유형을 사용하여 객체 변수로 지정한 ObjectJson의 내부 key값(react, twohundred)에 선언한다. twohundred가 문자열("200")로 전달됐지만, 자료형이 number로 선언하였기 때문에 타입이 일치하지 않아 경고메세지가 뜬다. 
        react : datatype.string,
        twohundred : datatype.number
    })
}

export default R020_PropsObjVal;

 

 

⭐객체 변수명 : datatype.shape({ 객체 변수의 key.지정타입})

ObjectJson : datatype.shape({ 
        react : datatype.string,
        twohundred : datatype.number
    })

- App.js의 변수의 key들의 지정타입을 정해주어, 지정타입과 일치하는지를 검사할 수 있도록 한다.

-App.js의 twohundred가 "200"으로 건너왔다 ➡ 여기서 지정해준 datatype.shape은 number이기 때문에 자료형 불일치로 오류가 뜨게 된다.