[React] 컴포넌트의 데이터 관리 ① - props 프로퍼티

2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축

2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정

2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX

2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트의 컴포넌트를 알아보자

---

1. 프로퍼티로 데이터 전달해보기

 전 포스팅에서 기본적인 리액트 컴포넌트 사용법을 알아봤습니다.

하지만 어떻게 서로 다른 컴포넌트 간의 데이터를 관리할까요?

이번에는 프로퍼티를 사용하여 데이터를 주고받아 보겠습니다.

 

// ..\test_project\src\components\ChildComponent.jsx

import React, { Component } from "react";
import PropTypes from "prop-types"; // 프로퍼티 타입을 지정해주기 위해

class ChildComponent extends Component {
  render() {
    // text 프로퍼티 화면에 출력
    return <div>{this.props.text}</div>;
  }
}

// 프로퍼티 타입 지정
ChildComponent.propTypes = {
  text: PropTypes.string, // text프로퍼티는 문자열 타입
};

export default ChildComponent;

 

 일단 자식 컴포넌트를 만들고 부모 컴포넌트로부터 받을 프로퍼티 타입을 지정해줍니다.

이번에는 간단하게 문자열 타입의 text 프로퍼티를 받아서 화면에 출력합니다.

다음으로 부모 컴포넌트 App.js를 하기와 같이 수정합니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";

// 컴포넌트 불러오기 (확장자는 생략가능)
import ChildComponent from "./components/ChildComponent";

class App extends Component {
  render() {
    return (
      <div>
        {/* 프로퍼티와 함께 컴포넌트 추가!!! */}
        <ChildComponent text="부모 컴포넌트 App에서 자식 컴포넌트에 text문자열 프로퍼티 전달" />
      </div>
    );
  }
}

export default App;

 마크업 방식의 <ChildComponent>에 text 프로퍼티 문자열을 추가한 것을 볼 수 있습니다.

여기서 중요한 부분! 프로퍼티는 읽기 전용이며 부모에서 자식으로만 전달 가능합니다!

 

2. 다양한 데이터 타입의 프로퍼티

 이번에는 문자열 타입을 포함한 다양한 데이터 타입을 사용해보겠습니다.

다시 한번 강조하지만 프로퍼티는 변경이 불가능하고 위에서 아래 방향으로 전달합니다!

 

import React, { Component } from "react";
import PropTypes from "prop-types"; // 프로퍼티 타입을 지정해주기 위해

class ChildComponent extends Component {
  render() {
    // 이번에 사용하는 7가지 데이터 타입 (이게 없으면 this.props를 매번 붙여 사용)
    const {
      strVal,
      numVal,
      nodeVal,
      arrVal,
      objVal,
      funcVal,
      boolVal,
    } = this.props;

    const boolText = boolVal ? "진짜" : "가짜";

    // 다양한 프로퍼티 데이터 타입을 화면에 출력
    return (
      <div>
        <p>문자 : {strVal}</p>
        <p>숫자 : {numVal}</p>
        <p>노드 : {nodeVal}</p>
        <p>배열 : {arrVal}</p>
        <p>객체 : {objVal.name + objVal.age}</p>
        <p>함수 : {funcVal}</p>
        <p>불리언 : {boolText}</p>
      </div>
    );
  }
}

// 프로퍼티 타입 지정
ChildComponent.propTypes = {
  strVal: PropTypes.string,
  numVal: PropTypes.number,
  nodeVal: PropTypes.node,
  arrVal: PropTypes.arrayOf(PropTypes.string), // 문자열을 넣는 배열 타입
  objVal: PropTypes.shape({
    // 객체 프로퍼티는 shape 사용
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  funcVal: PropTypes.func,
  boolVal: PropTypes.bool,
};

export default ChildComponent;

 

 소스가 길어보이지만 내용은 간단합니다. 먼저 이번에 사용할 데이터 타입을 맨 앞쪽에 구조 분해 할당식으로

정리해 놓습니다. 이게 없으면 마크업 부분에 this.props을 전부 붙여야 하며 변수명을 알기도 어렵습니다.

다음에 부모에게 받아 온 프로퍼티 내용을 화면에 뿌려주면 끝입니다. 그럼 부모 컴퍼넌트인 App.js 수정!

 

import React, { Component } from "react";

// 컴포넌트 불러오기 (확장자는 생략가능)
import ChildComponent from "./components/ChildComponent";

class App extends Component {
  render() {
    const str = "대한민국";
    const num = 2020;
    const node = <h3>코로나</h3>;
    const arr = ["좀", "꺼져", "제발"];
    const obj = { name: "코로나", age: 19 };
    const func = function (name, age, hope) {
      return name + age + hope;
    };
    const bol = true;

    return (
      <div>
        {/* 다양한 프로퍼티와 함께 컴포넌트 추가!!! */}
        <ChildComponent
          strVal={str}
          numVal={num}
          nodeVal={node}
          arrVal={arr}
          objVal={obj}
          funcVal={func(obj.name, obj.age, "없어짐")}
          boolVal={bol}
        />
      </div>
    );
  }
}

export default App;

 

 이번에도 마찬가지로 맨앞쪽에 자식 컴포넌트에 넘길 데이터를 정리해 놓습니다.

다음에 <ChildComponent>에 프로퍼티와 데이터를 매칭 해서 넘겨주면 끝입니다.

 

3. 프로퍼티 기본, 필수값 및 자식 프로퍼티 사용

 이번에는 프로퍼티에 기본값과 필수 값을 지정하는 법과

부모 컴퍼넌트에서 자식 프로퍼티를 사용하는 법을 배워보겠습니다.

 

// ..\test_project\src\components\ChildComponent.jsx

import React, { Component } from "react";
import PropTypes from "prop-types"; // 프로퍼티 타입을 지정해주기 위해

class ChildComponent extends Component {
  render() {
    // text 프로퍼티 화면에 출력
    return (
      <div>
        {this.props.text}
        {this.props.num}
        {this.props.children} {/* 자식 프로퍼티가 있으면 출력 */}
      </div>
    );
  }
}

// 프로퍼티 타입 지정
ChildComponent.propTypes = {
  text: PropTypes.string, // text프로퍼티는 문자열 타입
  num: PropTypes.number.isRequired, // num프로퍼티는 숫자 타입이며 필수!
};

// 프로퍼티 기본값 지정
ChildComponent.defaultProps = {
  text: "corona",
};

export default ChildComponent;

 

 기본값 지정은 defaultProps을 이용하면 되고, 필수 값 지정은 프로퍼티 타입에 isRequired를 붙여줍니다.

this.props.children를 JSX 마크업 부분에 자식(하위) 컴포넌트가 있을 경우 그 값을 사용할 수 있습니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";

// 컴포넌트 불러오기 (확장자는 생략가능)
import ChildComponent from "./components/ChildComponent";

class App extends Component {
  render() {
    return (
      <div>
        {/* 정상적인 출력 (코로나19) */}
        <ChildComponent text="코로나" num={19} />
        {/* 기본값인 corona 출력 및 num 필수값 경고 (브라우저 콘솔창)*/}
        <ChildComponent />
        {/* 기본값인 corona 출력 및 num값 19 (corona19) */}
        <ChildComponent num={19} />
        {/* 역병 출력 및 ChildComponent로 감싼 부분을 this.props.children로 사용해 출력 */}
        <ChildComponent text="역병">
          <h1>퇴치!!!</h1>
        </ChildComponent>
      </div>
    );
  }
}

export default App;

 

 ChildComponent를 실제로 사용하는 부분인데, 여기서 중요한 부분은

<ChildComponent> 자식 </ChildComponent> 부분입니다.

이런 식으로 감싸면 ChildComponent에서 this.props.children 변수로 사용 가능합니다.

 

오늘은 여기까지입니다.

내용이 좀 길었는데 그래도

 

참 쉽죠?

---

2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트