[React] State & Event

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

1. State 객체

state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체라고 했습니다.
클래스형 컴포넌트에서 state, 즉 해당 컴포넌트의 상태를 다음과 같이 정의합니다.

Class component | 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 함수를 컴포넌트 선언문(class State extends Component)과 render 함수 사이에 작성하여 설정합니다.
• constructor 메소드 안에서 super()를 호출합니다.
• 그 다음에 this.state 값에 컴포넌트의 초기 상태값을 설정해 줍니다. state는 초기값 설정이 필수입니다!

state 객체

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

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

2. State 사용 예시

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

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

• 우선 JSX 요소에 인라인 스타일을 적용하기 위해, 그 중에서도 글자색을 설정해주기 위해 다음과 같이 작성합니다.

```jsx
<h1 style={{ color:  }}>Class Component | State</h1>
```

• dot notation을 사용하여 객체(state)의 특정 key(color) 값에 접근하여 그 값을 color 속성의 value로 지정해주었습니다.

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

state에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영에서 화면(UI)에 나타내기 위함입니다.

3. Event & setState

props 다르게 state 값을 변경할 때는 state를 직접 조작해서는 안되며, setState 메서드를 이용해야 합니다. React.js의 경우 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링을 하는데 setState메소드를 사용하지 않고 직접 state 값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 못하기 때문입니다.

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;

<h1> 태그 아래에 <button> 요소를 추가해주었습니다. 코드는 다음의 순서에 따라서 실행됩니다.

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

render 함수가 언제 호출되는지 꼭 기억합시다!