1. State

단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
state는 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체이다.
state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.

State 객체

import React from 'react';

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

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

클래스형 컴포넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은 JSX 요소는 return문 안에 넣어줘야 한다.
state를 설정할 때는 constructor 함수를 작성하여 설정 해준다.
그리고 constructor 메소드 안에는 super()를 호출한다.
마지막으로 this.state 값에 컴포넌트의 초기 상태값을 설정했다.

state 객체

    this.state = {
      color: 'red'
    };

• 컴포넌트의 state는 객체이다.
• 객체 안의 key 이름은 원하는대로 설정할 수 있다.
• 여기서는 색 정보를 담은 데이터를 담기 위해 key 이름을 color로 지정했다.
• color key의 값으로 “red” 를 value로 주었다.

setState

state 객체 안의 value를 바꿔줄 수는 있게 바로 setState이다.
setState를 통하지 않고 그냥 바꿔버리면 렌더링이 되지 않는다

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;

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

2. Props

단어 뜻 그대로 컴포넌트의 속성값이다.
props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.

Props 객체

// Parent.js

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

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

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

export default State;

• Parent.js는 부모 컴포넌트 이다.
• 부모 컴포넌트 안에서 <Child/> 컴포넌트를 import 후 <h1> 태그 아래에 위치해주었다.
• 부모의 state에 있는 데이터를 <Child /> 컴포넌트에게 props를 통해 넘겨보겠다.

// Parent.js

import React from 'react';
import Child from '../pages/Children/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;

자식 컴포넌트의 props 로 titleColor 속성을 생성했고
titleColor의 값으로 this.state.color, 즉 부모 컴포넌트의 state 객체 중 color 값을 전달해주었다.
이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다. 하지만 서로 형제요소라면 이동할 수 없다.
형제 요소에 데이터를 전송해야 한다면 부모 요소에서 데이터를 가져와야 한다.