React 5 - State & 이벤트

React 컴포넌트에서 state과 Props는 컴포넌트가 가지고 있는 정보를 담고 있다는 점에서 매우 중요한 개념입니다.

 

State

현재 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로, 화면에 표시되는 함수가 render()라면, 해당 render값에서 어떠한 데이터를 보여줄지에 대한 정보를 가지고 있는 객체입니다. state는 컴포넌트 내에서 정의 및 사용하고, 함수에 의해 변경될 수 있습니다.

 

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에 담겨 반환됩니다.
• 보통 constructor(생성자) 함수는 클래스 상단에 정의하고, state은 this.state의 형태로 생성자 내부에 정의됩니다.
• constructor 내부에는 super()를 호출합니다. 해당 명령어는 javascript this 문법을 사용하기 위해 선언한다고 합니다.
• this.state 내부에 클래스의 상태값을 지정합니다.
• state는 객체 형태로 지정합니다. 

state 사용 예시

state는 컴포넌트 안에 선언된 해당 값을 이요하여 데이터가 변경이 될 경우 이를 효율적으로 뷰(UI)에 반영할 때 사용합니다.

 

예시 1

import React, { Component } from 'react';

export class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

위 코드에서, state 내부에 color : 'red'를 지정하였습니다. render() 함수 내에서는 h1문의 색을 this.state.color로 지정해주었습니다. 다른 함수에 의해 this.state 내부의 color값이 변경될 때, h1의 색이 변경되게 처리할 수 있습니다.

 

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

 

예시 2

import React, { Component } from 'react';

export 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;

위에서 정의한 컴포넌트에 handleColor라는 함수를 추가로 지정했습니다. state값을 변경할 때는 setState 명령어를 사용합니다. render() 함수에서 버튼을 클릭하였을 때 컴포넌트 내부의 handleColor함수가 실행되게 하였고, 해당 함수는 state의 color값을 blue로 변경해주는 역할을 수행합니다.

 

이처럼 ,state는 react 컴포넌트의 상태값을 지정해두고, 이를 반영하여 사용자들에게 효율적으로 보여지는 것을 돕는 역할을 합니다.

다음 포스팅에서는 state와 함께 많이 사용되는 props에 대해 포스팅하겠습니다.