• React 컴포넌트에서 다루는 데이터는 두가지로 나뒨다. props & state

props

• props는 부모컴포넌트가 자식컴포넌트에게 주는 값이다.
• 자식컴포넌트에서는 props를 받기만하고 직접 수정 할 수는 없다.

<자식컴포넌트>

import React, {Component} from "react";

class SmartPhone extends Component {
  render() {
    return (
      <div className="SmartPhone">
         <h3>
           제조사: {this.props.maker}
         </h3>
         <h3>
           색상: {this.props.color}
         </h3>
         <h3>
           용량: {this.props.capacity}
         </h3>   
      </div>
    );
  }
}
export default Student;

<부모컴포넌트>

import React, {Component} from "react";
import SmartPhone from "./SmartPhone";

class App extends Component {
  render() {
    return (
      <div className="App">
         <SmartPhone
            maker: "apple"
            color: "black"
            capacity: "256GB"
          />
      </div>
    );
  }
}
export default App;

• 부모 Component(App.js)에서 지정한 maker, color, capacity가 자식 Component(SmartPhone.js)로 전달되어 SmartPhone에서 this.props.maker, this.props.color, this.props.capacity가 사용된다.

state

• state는 compenent 내부에서 선언하고 내부에서 값을 변경 할 수있다.
• props의 값에 따라 내부의 구현에 필요한 데이터이다.
• 외부에서 알 필요 없는 정보를 은닉한다.

import React, {Component} from "react";
import SmartPhone from "./SmartPhone";

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      SmartPhone:{maker: "apple" color: "black" capacity: "256GB"}
  }
  render() {
    return (
      <div className="App">
         <SmartPhone maker: {this.state.SmartPhone.maker} 
                     color: {this.state.SmartPhone.color} 
                     capacity: {this.state.SmartPhone.capacity}>
         </SmartPhone>
      </div>
    );
  }
}
export default App;

• component가 실행될 때 constructor함수가 있다면 constructor함수가 가장 먼저 실행되어 초기화를 담당한다.
• 초기화가 끝나면 this.state를 통해 state 값을 초기화한다.
• SmartPhone 값을 state화 시키기 위해 SmartPhone프로퍼티 값으로 다시 객체를 준다.
• state값을 사용하기 위해 maker에 state값을 준다.
  react에서props값에 따옴표" "를 쓰면 문자로 인식하기 때문에 javascript코드로서 실행되게 하고싶을 때 { }를 써주면 된다.