변경될 수 있는 데이터를 처리할 때 효율적으로 사용될 수 있습니다.
state
는 컴포넌트안에서 관리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
함수가 필요constructor
함수를 작성하여 설정합니다.constructor
함수는 컴포넌트 선언문(class State extends Component
)과 render
함수 사이에 작성합니다. super()
를 호출합니다.this.state
값에 컴포넌트의 초기 상태값을 설정해 주었습니다.this.state = {
color: 'red'
};
color
로 지정color
key의 값으로red
를 value로 지정state에서 상태값을 설정하는 이유는 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면에 나타내기 위함 입니다.
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;
return
문 안에 <h1>
타이틀 요소가 있습니다.<h1 style={{ color: }}> Cloass component | State</h>
<h1 style={{ color: this.state.color }}>Class Component | State</h1> - this : 해당 컴포넌트 - this.state : 해당 컴포넌트의 state 객체 - this.state.color : state객체의 특정 key(color)값
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;
<button>
요소에서 onclick
이벤트 발생this.handleColor
, 즉 현재 컴포넌트(state
)의 handleColor
함수 실행handleColor
함수 실행 시 setState
함수 실행 - state의 color
값을 'blue'
로 변경<h1>
태그 글자 색상 변경