리액트의 컴포넌트를 이용한 이벤트 처리에 반드시 필요한 Props와 State에 대해서 정리해 보고자 한다.

---

📍 Props

propssms properties를 줄인 표현으로 단어 그대로 컴포넌트의 속성값을 말한다. props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 혹은 이벤트를 전달한다. 즉, props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정하는 것이다.

:: Props 객체

🧷 부모 컴포넌트

• 부모 컴포넌트는 자식 컴포넌트를 import하여 reder 시켜 주었다.
• 부모 컴포넌트의 this.state.color를 자식 컴포넌트의 titleColor의 값으로 넘겨주었다.

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

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

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

export default State;

🧷 자식 컴포넌트

• 자식 컴포넌트는 h1 태그 안에 color를 인라인 스타일로 작성하고자 한다. 이 때 그 값은 부모 컴포넌트로 부터 전달 받은 titleColor라는 props를 전달 받는 것이다.
• 부모 컴포넌트의 this.state.color를 자식 컴포넌트의 titleColor의 값으로 넘겨주었다.

import React from 'react';

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

export default State;

:: Props Event

🧷 부모 컴포넌트

• 부모 컴포넌트는 자식 컴포넌트를 import하여 reder 시켜 주었다.
• 부모 컴포넌트의 handleColor 함수를 자식 컴포넌트의 changeColor의 값으로 넘겨주었다.

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}/>
      </div>
    );
  }
}

export default State;

🧷 자식 컴포넌트

• <button> 요소에서 onClick 이벤트 발생
• 이벤트 발생 시 this.props.changeColor 실행
• props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 handleColor 함수 실행
• handleColor 함수 실행 시 setState 함수 호출해 state의 color 값을 'blue' 로 변경
• render 함수 호출
• <Child /> 컴포넌트에 변경된 state 데이터(this.state.color) 전달
• this.props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경

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>
      </div>
    );
  }
}

export default State;

---

📍 State

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 state는 화면에 보여줄 컴포넌트의 UI정보(상태)를 지니고 있는 객체이다.

:: class형 컴포넌트의 State 객체

• state를 설정할 때는 constructor 함수 내부에 작성
• constructor 함수는 컴포넌트 선언문(class State extends Component)과 render 함수 사이에 작성해 super() 호출
• 그 다음 this.state 값에 컴포넌트의 초기 상태값 설정
• state의 key 이름은 color, key의 value는 'red'
• 해당 state는 render 함수 안에 <h1> 요소의 색상 스타일로 지정

import React from 'react';

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

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

:: State를 변경해 주는 setState

• <button> 요소에서 onClick 이벤트 발생 시 현재 컴포넌트(State)의 handleColor 함수 실행
• handleColor 함수 실행 시 setState 함수 실행 - state의 color 값을 'blue' 로 변경
• render 함수 호출
• 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;