[TIL] React props

1. props

React에서 props는 변하지 않는 데이터 (Immutable Date)이다. 상위 (부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용한다.

2.Props 객체

// Login.js

import React from 'react';
import Child from '../pages/Child/Child';

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

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child />
      </div>
    );
  }
}

export default Login;

Login.js 는 상위(부모) 컴포넌트 이다. 부모 컴포넌트안에 <Child/>컴포넌트를 import를 한 후 <h1> 태그 아래에 위치해 준다. 부모 state에 있는 데이터를 컴포넌트에게 props를 통해 넘겨보도록 해보자.

// Login.js

import React from 'react';
import Child from '../pages/Children/Children';

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

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child titleColor={this.state.color}/>
      </div>
    );
  }
}

export default Login;

자식 컴포넌트의 props로 titleColor 속성을 생성해 주었다. titleColor의 값으로 부모 컴포넌트 state 객체중 color 값을 전달해 준다. 이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.

props 객체

state 외 마찬가지로 컴포넌트의 props는 객체 이다.

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
    
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default Child;

render 함수와 return 함수 사이에서 this.props값을 console.log로 확인 해보면
결과 확인 시 props 객체 안에 부모로 부터 전달받은 데이터가 key-value 형태로 담겨있는 것을 확인할 수 있다.

<h1 style={{color : this.props.titleColor}}>Child Component</h1>

컴포넌트 내부에서 부모 컴포넌트로부터 전달 받은 props 데이터를 사용하기 위해선 state 객체에 접근하는 것과 마찬가지로 props 객체의 특정 키값 this.props.titleColor을 작성 해주면 된다. 다음으로는 props 객체를 통해 부모에서 정의한 event handler를 전달하는 방법으로 살펴보자.

props & event

props를 통한 event handler 전달

// Login.js

import React from 'react';
import Child from '../pages/Children/Children';

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

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

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
				<Child titleColor={this.state.color} changeColor={this.handleColor}/>
      </div>
    );
  }
}

export default Login;

props 객체를 통해 state 데이터 뿐만 아니라 부모서 정의한 event handler 함수도 넘겨줄 수 있다. props의 changeColor값으로 Parent 함수에서 정의한 handleColor 함수 자체를 넘겨주고 있다. <Child /> 컴포넌트에서 어떻게 props로 전달받은 handleColor 함수를 활용하는지 살펴보자.

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
				<button onClick={this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default Child;

<button> 태그에서 onClick 이벤트 발생시 this.props.changeColor가 실행된다. props 객체의 changeColo, 즉 부모 컴포넌트로부터 전달받은 handleColor함수가 실행된다. 실행시 setstate 함수를 호출하여 state의 color값을 red값으로 변경 시켜주게 된다.