State & Event

State

state는 말 그대로 상태를 뜻 한다.

Component 내부에서 가지고 있는 Component의 상태값이다

state는 화면에 보여줄 Component의 상태를 지니고 있는 객체이다

state는 Component 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다

 

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;

state를 설정할 때는 위와 같이 constructor 함수를 작성해야한다.

super()를 하는 이유는 자신이 extend한 Class의 Constructor를 호출하기 위해서이다.

 

물론 constructor 없이도 state를 선언 할 수 있다

const list = ['a', 'b', 'c'];   class App extends Component {   state = {     toggle: true,   };     onToggleList = () => {     this.setState(prevState => ({       toggle: !prevState.toggle,     }));   }     render() {     return (       <div>         <Toggle           toggle={this.state.toggle}           onToggleList={this.onToggleList}         />         {this.state.toggle && <List list={list} />}       </div>     );   } }

 

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

state는 객체로 저장된다.

따라서 key-value의 pair로 저장된다

 

State 사용 예시

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;

 

Event & setState

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;

위 Class를 보면 알 듯이  this.setState를 통하여 this.state의 key-value 값을 바꿔준다.

render가 새로 되기 위해서는 class 내의 state가 바뀌었다는 것을 인식해야한다.