Props, State

React의 Component 객체에서 DOM 객체를 제어할 때에 위의 두 가지 개념을 이용해서, 부모 컴포넌트 객체의 데이터를 자식 컴포넌트에서 출력해주고, 출력해주는 부분을 수정할 수 있도록 만들어 줄 수 있다.

Props

Props는 property의 줄임말로, React에서 사용자가 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터를 말한다. props는 읽기 전용 데이터로써 변경되지 않는다. 그렇기 때문에 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 props를 변경할 수 없다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
 return (
   <div>
     <Welcome name="Sara" />
     <Welcome name="Cahal" />
     <Welcome name="Edite" />
   </div>
 );
}

State

state는 props와 달리 동적인 데이터를 다룰 때 사용하는 개념이다. 또한 부모로부터 내려받는 props와 달리 부모든 자식이든 어떤 컴포넌트든 관계없이 존재할 수 있다. 그렇기 때문에 state는 변경이 가능하다. 단 클래스형 컴포넌트에서만 작성이 가능하고, 각각의 state는 자신이 속해있는 컴포넌트 이외의 장소에서는 간섭이 불가능하다.

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

color key의 값으로 “red” 를 value로 지정하겠다.

state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함이다.

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를 설정할 때는 화면에 보이듯이 constructor 함수를 작성하여 설정한다.
constructor 함수는 컴포넌트 선언문(class State extends Component)과 render 함수 사이에 작성한다.
그리고 constructor 메소드 안에는 super()를 호출한다.
그 다음에는 this.state 값에 컴포넌트의 초기 상태값을 설정해 준다.

return 문 안에 h1 타이틀 요소가 있다.
해당 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 하고 싶은 경우,
다음의 순서대로 state 값을 특정 요소에서 반영할 수 있다.

 <h1 style={{ color: this.state.color  }}>Class Component | State</h1>
 
  // this : 해당 컴포넌트
  // this.state : 해당 컴포넌트의 state 객체
  // this.state.color : state 객체의 특정 key(color)값. 즉 "red"