[JavaScript] React - props

React

Props

• Props는 컴포넌트의 속성값입니다.
• 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다.
• 부모 컴포넌트로부터 자식 컴포넌트에게 state

Props 객체

• props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다.
• props를 확인해보도록 합시다!!

import React from 'react';
import Child from '../pages/Child/Child';	// Child 컴포넌트 import

class Mom extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>나는 h1 이다아!!!!!</h1>
	  <Child titleColor={this.state.color}/>		
	// Child 컴포넌트 사용
	// Child 컴포넌트에 titleColor 속성으로 this.state.color 전달
      </div>
    );
  }
}

export default State;

• 자식 컴포넌트인 Child 컴포넌트의 props로 titleColor속성을 생성해주었습니다.
• titleColor의 값으로 this.state.color의 값을 전달해주었습니다.
• this.props를 console.log를 통해 확인해보면 전달받은 데이터가 key-value 형태로 출려되는 것을 확인할 수 있습니다.
• 즉,
  this : 해당 컴포넌트인 Mom을 뜻합니다.
  this.props: 해당 컴포넌트의 props의 객체를 뜻합니다.
  this.props.titleColor: props의 객체의 특정 key 값을 뜻합니다.

Props and Event

• props 객체를 통해 state도 넘겨줄 수 있고, 부모에서 정의한 함수도 넘겨줄 수 있습니다.
• 아래의 코드에서는 props의 changeColor 값으로 부모 함수에서 정의한 handleColor 함수 자체를 넘겨주고 있습니다.

// Parent.js
import React from 'react';à
import Child from '../pages/Children/Children';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child titleColor={this.state.color} changeColor={this.handleColor}/>
      //자식 컴포넌트에게 props를 통해 handleColor 함수 전달
      </div>
    );
  }
}

export default State;

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
	<button onClick={this.props.changeColor}>Click</button>
	//부모 컴포넌트에서 전달받은 함수를 onClick event가 발생할때 호출하게 됩니다.
      </div>
    );
  }
}

export default State;

• Child.js에서 button 요소에서 onClick event가 발생하면 부모에게 전달받은 changeColor 함수가 호출됩니다.
• 부모 컴포넌트의 handleColor 함수가 실행되고 setState함수가 호출됩니다.
• setState 함수가 실행되면 state의 color 값을 'blue'로 변경합니다.
• state의 값이 변경되었으므로 render 함수가 호출되고 자식 컴포넌트에 변경된 state 값을 전달합니다.
• this.props.titleColor를 글자 색상으로 지정하는 h1 타이틀 색상이 변경됩니다.