[JavaScript] React-State and Event

React

State

• state란 상태를 가르킵니다.
• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
• state란 화면에 보여주는 컴포넌트의 상태를 가지고 있는 객체 입니다.
• state는 컴포넌트 내에서 정의되며, setState를 사용하여 상태값을 변경할 수 있습니다.

Class Component (state)

• class형 컴포넌트를 구성하였습니다. class에는 render 함수가 필요합니다.
• render함수 안에는 return문이 필요하며 return문 안에는 JSX요소가 있어야합니다.
• state를 설정할 때에는 constructor 함수를 사용합니다.
• constructor 함수 안에는 super()를 호출합니다.
• this.state는 컴포넌트 초기의 상태값을 설정해주어야 합니다.
• this.state는 객체입니다.
• 객체 안의 키는 자유롭게 설정이 가능합니다.
• 우리는 State 컴포넌트의 상태값을 color: black으로 설정하였습니다.

import React from 'react' //리액트를 사용하기 위해 import

class State extends React.Component {
  constructor() {
    super()
    this.state = {
      color: 'black'
    }
  }
  
render() {
  return (
    <>	  //flagments의 사용 : 최상위 태그는 1개여야 하지만 2개 이상일 때 사용할 수 있다.
      <h1> 나는 </h1>
      <h1> Component다!! </h1>
      <h1 style={{ color: this.state.color }}>나는 상태값을 가지고 있!!</h1>
    </>
export default State

State

state를 설정하는 이유는 컴포넌트 안의 요소에서 상태값을 반영하여 데이터가 바뀔 때마다 효율적으로 화면을 그려주기 위해서 입니다.

• 위의 코드에서는 return문 안에는 h1요소가 있고, 처음에 render하게되면 초기 상태인 this.state 상태값인 'color: red'가 h1에 들어가게되고 inlinestyle로 빨간색 "나는 상태값을 가지고 있다!!! 라고 출력됩니다.
• dot.notation을 사용하여 객체의 키값에 접근하여 color 속성의 value로 지정했습니다.

Event and setState

import React, { Component } from 'react';   //component 사용하기 위해 import

export class State extends Component {
  constructor() {
    super();
    this.state = {			   // 해당 컴포넌트의 초기값을 설정해준다.
      color: 'red'			   // color키에는 red라는 값을 넣어준다.
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'			   // 해당 함수 호출시 state의 color의 
    })					   // value값을 'blue'로 바꿔준다.
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>나는 상태값을 가지고 있!!</h1>
        <button onClick={this.handleColor}>Click</button>
	// onClick은 Click이벤트를 말하며 Click이벤트 발생시 handleColor 함수 호출
	// handleColor => etState로 state값을 color키의 value값 변경한다.
	// setState되면서 바뀐 값으로 render가 다시 실행된다.
      </div>
    );
  }
}

export default State;