State

• 컴포넌트의 상태값 👉 화면에 그려지는 UI의 정보가 저장되는 객체 (사진, 타이틀, 가격... 등)
• 얼마든지 변경이 가능하다.

import React from 'react';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      titleColor: "red",
      subTitleColor: "blue",
    };
  }
  
  changeTitleColor = () => {
    this.setState({ titleColor: "green", })
  }
  
  render() {
    const { titleColor, subTitleColor } = this.state; 
    const { changeTitleColor } = this;
    return (
      <div>
      	<h1 style = {{ color: titleColor }}>Class Component | state</h1>
	 <button onClick={ changeTitleColor }>색 바꾸기</button>
      </div>
    );
  }
  
  export default Parent;

• state는 렌더링할 때 필요한 컴포넌트에 추가하고 그 다음 다른 컴포넌트도 사용하게 된다면 가까운 상위 컴포넌트에 넣어 사용한다.
• 만약 적절한 컴포넌트가 없다면 만들어서 사용해야한다.

비구조화 활당 (구조분해 할당)

어떤 객체나 배열을 사용 이런 구조를 깬다음 데이터를 어떤 변수에 저장하는

const obj = {
	name: "tony",
    age: 18,
   }; 
const { objName, objAge } = obj;
objName; // 'tony'
objAge; // 18

Props

컴포넌트의 속성값 👉 부모 컴포넌트로부터 전달 받은 데이터를 가지고 있는 객체
(ex: state의 상태 값, event handler)

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;

• props는 속성값 뿐만 아니라 부모 객체에 있는 함수도 받을 수 있다.
• 자식에서 함수가 돌아가는게 아니라 부모에서 함수가 돌아가고 그 값이 부모에서 값이 바뀌면서 다시 자식에게 값도 주게 된다
• 그래서 형제 요소에서 값을 주고 받을 수 없을 때 부모의 컴포넌트에 값과 함수를 만들어서 연결 시켜 바뀐 데이터를 서로에게 주는 플로우로 생각해야함