[React] 클래스형 컴포넌트 - Props / 자료형 선언 / 필수값과 기본값 지정

 

 

 

드뎌.. 리액트 공부 다시 시작..! 🥺

 

 

---

 

 

◽ Props

데이터를 수정해야할 경우 props 자체가 아닌 컴포넌트 내부 변수(예제에서는 "props_value"라는 변수)에 옮겨 가공한다.

import React from "react";
import './App.css';
import ChildComp from './ChildComp'

function App() {
  return (
   // JSX
   <div>
     <h1>Start React</h1>
     <ChildComp test_value="this is props" />
   </div>
  );
}

export default App;

 

import React, { Component } from "react";

class ChildComp extends Component {
  render() {
    // props 인자 받아오기
    let props_value = this.props.test_value;
    props_value += ' from App.js'
    return (
        <div>
          { props_value }
        </div>
    );
  }
}

export default ChildComp

 

 

 

 

 

---

 

 

 

 

타입스크립트처럼 자료형도 지정할 수 있었다.

npm install --save prop-types

prop-types

 

 

◽ Props 자료형 선언

import React from "react";
import './App.css';
import ChildComp from './ChildComp'

function App() {
  return (
   <div>
     <h1>Start React</h1>
     <ChildComp
      val_string="string"
      val_number={100}
      val_boolean={true}
      val_array={[0, 1, 2]}
      val_object={{react: '리액트'}}
      val_function={console.log("테스트")}
     />
   </div>
  );
}

export default App;

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

class ChildComp extends Component {
  render() {
    console.log(this.props);
    let {
      val_string, val_number, val_boolean, val_array, val_object, val_function
    } = this.props

    return (
        <div style={{ padding: '20px' }}>
          <p>val_string: {val_string}</p>
          <p>val_number: {val_number}</p>
          <p>val_boolean: {val_boolean.toString()}</p>
          <p>val_array: {val_array.toString()}</p>
          <p>val_object: {JSON.stringify(val_object)}</p>
          <p>val_function: {val_function}</p>
        </div>
    );
  }
}

// props의 자료형을 각각 지정해 줄 수 있다.
ChildComp.propTypes = {
  val_string: datatype.string,
  val_number: datatype.number,
  val_boolean: datatype.bool,
  val_array: datatype.array,
  val_object: datatype.object,
  val_function: datatype.func,
}

export default ChildComp

 

 

 

 

---

 

 

 

 

◽ Prop 필수값으로 지정하기

변수 뒤에 isRequired를 붙여준다.

ChildComp.propTypes = {
  val_required: datatype.number.isRequired,
}

 

◽ Prop 기본값 지정하기

ChildComp.defaultProps = {
  val_number: 0,
}

 

 

 

---

 

 

 

Vue.js의 slot 처럼 노드를 전달할 수도 있다.

this.props.children로 접근한다.

import React from "react";
import './App.css';
import ChildComp from './ChildComp'

function App() {
  return (
   <div>
     <h1>React</h1>
     <ChildComp>
       <span>안녕!</span>
     </ChildComp>
   </div>
  );
}

export default App;

import React, { Component } from "react";

class ChildComp extends Component {
  render() {
    return (
        <div style={{ padding: '20px' }}>
          {this.props.children}
        </div>
    );
  }
}

export default ChildComp

 

 

 

 

 

---

 

출처

이정열, 초보자를 위한 리액트 200제 (정보문화사, 2021)