[+32]children-React

• props
• props 사용 예시
• children사용 예시
• 프로젝트 적용 사례

1.props

Component Hierarchy (컴포넌트 계층구조)
컴포넌트의 장점: 하나의 컴포넌트가 다른 컴포넌트를 포함할 수 있다.
즉 부모-자식 관계가 될 수 있다.

props란?
properties의 준말로 부모 컴포넌트->자식 컴포넌트로 데이타를 보내주는 역할을 한다.

• 부모->자식

<Child name="aerirang" >

• 복수의 props이용

<Child name="aeri" age=13 >

//props는 객체 형태의 데이터
props = {
   name: "aerirang",
   age: 30
}

React props system

리액트에서 props를 통해 컴포넌트 간에 상호작용하는 2가지

1. 부모 컴포넌트-> 자식 컴포넌트로 정보 전달
2. 자식 컴포넌트에서 전달된 정보 사용/ 반영

props 사용 예시
children.js

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "./Children.scss";
import Person from "./Person";

export class Children extends Component {
  render() {
    return (
      <div className="Children">
        <h1>React Children</h1>
        <hr />
        <section className="card-section">
          <Person
            name="arirang"
            email="arirang@wecode.com"
            position="student"
          />
          <Person
            name="aerirang"
            email="aerirang@wecode.com"
            position="Frontend dev"
          />
          <Person
            name="aripark"
            email="aripark@wecode.com"
            position="teacher"
          />
        </section>
      </div>
    );
  }
}

export default withRouter(Children);

Children이라는 부모 컴포넌트가 있고 Person이라는 3개의 children컴포넌트가 포함되어 있다.
Person컴포넌트에는 name, email, position이라는 세가지 props가 있다.

세가지 props를 통해 부모 컴포넌트에서 자식 컴포넌트에세 정보를 전달하고 있다.

Person.js

import React, { Component } from "react";
import "./Person.scss";

export class Person extends Component {
  render() {
    return (
      <div className="Person">
        <div className="name">{this.props.name}</div>
        <div className="detail">
          <div>{this.props.email}</div>
          <div>{this.props.position}</div>
        </div>
      </div>
    );
  }
}

export default Person;

3.children 사용 예시

children.js

// Children.js - 부모 컴포넌트
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import Person from "./Person";
import ApprovalCard from "./ApprovalCard";
import "./Children.scss";

export class Children extends Component {
  render() {
    return (
      <div className="Children">
        <h1>React Children</h1>
        <hr />
        <section className="card-section">
          <ApprovalCard>
            <Person
              name="arirang"
              email="arirang@wecode.com"
              position="student"
            />
          </ApprovalCard>
          <ApprovalCard>
            <Person
              name="aerirang"
              email="aerirang@wecode.com"
              position="frontend dev"
            />
          </ApprovalCard>
          <ApprovalCard>
            <Person
              name="aripark"
              email="aripark@wecode.com"
              position="teacher"
            />
          </ApprovalCard>
        </section>
      </div>
    );
  }
}

export default withRouter(Children);

• ApprovalCard컴포넌트를 셀프 클로징 태그가 아닌 opening 태그와 closing 태그를 만든다.
• 그 안에 Person컴포넌트를 넣었다.
• 부모는 ApprovalCard 컴포넌트, 자식은 Person컴포넌트로 들어간다.
• key값(props name)은 children, value는 Person

props = {
  children: <Person />
}

ApprovalCard.js

// ApprovalCard.js - this.props.children
import React, { Component } from "react";
import "./ApprovalCard.scss";

export class ApprovalCard extends Component {
  render() {
    console.log("this.props: ", this.props);
    return (
      <div className="ApprovalCard">
        <div className="top">{this.props.children}</div>
        <div className="bottom">
          <div className="btn cancel">Decline</div>
          <div className="btn okay">Approve</div>
        </div>
      </div>
    );
  }
}

export default ApprovalCard;

• props로 전달받은 Person컴포넌트를 내부에서 사용할 때 {this.props.children} 으로 접근할 수 있다.
• console.log(this.props)로 확인 할 수 있다.

• children 값으로 컴포넌트, plain text, multiple elements등 어떤 것이든 전달 할 수 있다.

효율적이도, 재사용할 수 있다.