React 6 - Props & 이벤트

Props

props는 property라는 뜻으로 컴포넌트의 속성값을 뜻하며, 부모 컴포넌트로부터 전달받는 데이터를 가지고 있는 객체입니다. 리액트에서는 이 props를 통해서 부모 컴포넌트로부터 자식 컴포너트에게 state 값, event handler를 넘겨줄 수 있습니다.

 

Props 객체

// Parent.js

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

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

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

export default State;

부모 컴포넌트에서 <Child/>컴포넌트를 선언해주고, prop을 통해서 부모state 데이터를 자식 컴포넌트에게 넘길 수 있습니다.

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

<Child />에 titleColor prop을 선언하여 전달해주었고, 값으로는 this.state.color, 부모 컴포넌트 state의 color값을 전달했습니다.

<Child /> 컴포넌트에서 전달받은 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 State;

위 코드에서, <Child /> 컴포넌트 내에 h1요소에 style 속성을 지정해주었고, this.props.titleColor로 값을 정의했습니다. 부모 컴포넌트가 전달해준 값의 titleColor라는 변수를 받아오는 것을 확인할 수 있습니다.

Props로 이벤트 전달

props를 통해 데이터 뿐 아니라 함수도 전달할 수 있습니다.

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

부모 요소의 handleColor함수(this.state.color를 변경해주는 함수입니다.)가 위와 같이 선언되어 있을 경우,

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

<Child> 자식 요소에게 전달하는 changeColor는 부모 컴포넌트 내부의 함수를 전달합니다.

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

자식 요소의 버튼에 위와 같이 this.props.changeColor를 통해 이벤트를 전달할 수 있습니다.

 

중요!

위 과정이 헷갈릴 경우, 과정을 잘게 쪼개서 생각하면 이해에 도움이 됩니다. 1) 부모 컴포넌트에서, 자식 컴포넌트에게 전달하고자 하는 함수나 데이터를 선언합니다. 2) 그 다음 부모 컴포넌트의 render함수에서 자식 컴포넌트를 호출하는 부분에 변수명을 새로 선언하여 전달해줍니다. 3) 마지막으로 자식 컴포넌트의 JSX에서 이벤트를 걸어줄 요소에 이벤트 핸들러를 부모 컴포넌트에서 자식 컴포넌트에 내려준 변수명으로 this.props.{변수명}의 형태로 지정해줍니다.

 

props와 state의 경우, 계속해서 사용해보면서 익숙해져야 합니다.