[React.js] props에 대해 알아보자! 리액트 데이터 흐름 매커니즘

컴포넌트를 조합할 때 기본이 되는 props(속성)에 대해 알아보겠습니다!

리액트에서는 컴포넌트의 조합과 재사용을 위해 props를 제공합니다

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 매커니즘이라고 할 수 있죠

props는 자식 컴포넌트 안에서 변경할 수 없고 부모 컴포넌트가 전달하며 소유하는 것입니다

예시를 보도록 하죠!

import React, { Component } from 'react';
 
//부모 컴포넌트
class Parent extends Component {
  render() {
    return (
      <ul>
        <Child name="A" age="10" />
        <Child name="B" age="15" />
        <Child name="C" age="20" />
      </ul>
    )
  }
}
 
//자식 컴포넌트
class Child extends Component {
  render() {
    return (
      <li>
        {this.props.name} : {this.props.age}                                                     
      </li>  
    )
  }
}
 
export default Parent;  

결과화면은!

부모 컴포넌트에서 이름과 나이 값을 자식 컴포넌트의 props로 지정해줌으로써

자식 컴포넌트에 값이 전달됨을 알 수 있습니다 ^ㅡ^

매우 중요한 기본이므로 꼭 이해해야 합니다!