State, Props, Event

✅ State & Event
👉 State 객체

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

👉 Class형 컴포넌트에서 state 객체, 즉 해당 컴포넌트의 상태를 어떻게 정의 하는가?

import React from 'react';   

class Practice extends React.Component {
  constructor() {     // constructor() { } 함수 선언(위치 유의하기)
    super();
    this.state = {    // 컴포넌트의 초기값 설정, 컴포넌트의 state는 객체이다.
      color: 'red'    // 객체 안에 '키:값' 형태의 초기값이 담겨있다
    };
  }

  render() {     // 이하 클래스형 컴포넌트 안의 필수요소(render 함수, return문 안의 JSX 요소)
    return (
      <div>
        <h1> Hello! </h1>
      	<main>
      	   <p style={{ color: this.state.color }}>I like blue </p>
          // p태그 객체(state)의 특정 key(color) 값에 접근하여 그 값을 color 속성의 value로 지정 (중괄호 2번 겹치기 유의)
          // this.state.color로 정의하여 constructor 함수의 키값을 적용(해당 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 하고 싶은 경우)
      	</main>
      </div>
    );
  }
}

export default State;

❗ state를 설정할 때는 constructor 함수를 작성 후 그 안에 설정.
❗ constructor 함수는 컴포넌트 선언문(class State extends Component)과 render 함수 사이에 작성. 위치 유의!!
➡ constructor 함수와 컴포넌트가 잘 연결되었는지 확인하려면 render() 위에서 console.log 찍어보기
❗ constructor 메소드 안에는 super()를 호출.
❗ this.state 값에 컴포넌트의 초기 상태값을 설정.

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

✅ Event & setState
👉 State 객체

• state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다.

👉 setState를 통해 Event 적용하는 방법

import React from 'react';   

class Practice extends React.Component {
  constructor() {         // constructor() { } 함수 내 컴포넌트의 초기값 설정
    super();
    this.state = {    
      color: 'red'    
    };
  }

  handleColor = () => {   // this.handleColor, 즉 현재 컴포넌트(State)의 handleColor 함수 실행
    this.setState({
      color: 'blue'
    })
  }

  render() {     
    return (
      <div>
        <h1> Hello! </h1>
      	<main>
      	   <p style={{ color: this.state.color }}>I like blue </p>
           // button 요소 추가 및 onClick 이벤트 적용
           <button onClick={this.handleColor> Click </button>
           // handleColor 함수 실행 시 setState 함수 실행 ➡ state의 color 값을 'blue' 로 변경
      	</main>
      </div>
    );
  }
}

export default State;

❗ 코드 실행 순서
🔸 JSX 내 <button> 요소에서 onClick 이벤트 발생
🔸 this.handleColor (=현재 컴포넌트인 state의 handlerColor 함수) 실행
🔸 handleColor 함수 실행 시, setState 함수 실행 ➡ state의 color값을 blue로 변경
🔸 render 함수 호출

🍧 JSX 함수를 읽어내려 가면서 지정 함수를 마주치면, 해당 함수를 찾아 올라가서 실행. 즉 re-render된다.
(값이 red였을 때(<p>태그) render, 값이 blue였을 때(<button>태그) re-render)