[React] State 개념 잡기

LeeTaeHee·2021년 3월 15일

React.js

목록 보기

2/5

지난 시간에 배운 Props에 이어 State 를 배워볼 차례입니다.
Props 글을 먼저 보고 오는걸 추천드려요 🙋‍♂️
그럼 이제 State를 배워볼까요

⏳ State

state : 자기 자신의 컴포넌트에서 관리되는 데이터 객체

저는 state를 이렇게 위와 같이 정의 해봤습니다.

앞선 글에서 props는 데이터는 상속을 받아 사용하기 때문에 읽기전용이라고 말씀드렸습니다.
그럼 해당 데이터를 변경해야할때마다 부모컴포넌트에서 props 데이터를 변경시켜줘야 할까요?

❌❌❌ NO !!!

자기 자신의 컴포넌트에서 데이터를 관리할 때에는 state를 통해 관리 할 수 있습니다.

그럼 state의 사용방법을 살펴 보겠습니다.

🎈 state 사용법

App.js 는 이전 게시글과 동일

변경된 Hello.js

import React, { Component } from 'react'

export default class Hello extends Component {
    constructor(props){
        super(props) 

        this.state = {bgColor:"skyblue"} 1️⃣    // EX) this.state = {key:value}
    }
    
    render() {
        return (
            <div className={"color_box"} style={{backgroundColor:this.state.bgColor}}> 2️⃣
                <span>Hello {this.props.name}</span>  
            </div>
        )
    }
}

1번을 보시면 constructor 안에서 State를 선언 한것을 볼 수 있습니다.
state는 가장 먼저 설정 되어야하기 때문에 constructor 생성자 안에서 선언을 해줍니다.
해당 소스에서 bgColor 의 경우 관리할 state의 key 값이고, "skyblue" 는 초기값을 선언해 준것입니다.

🔺 초기값으로는 정수, 문자, (빈)배열, (빈)객체, boolean 모두 선언이 가능합니다.

2번: props 와 동일하게 this.state 로 접근할 수 있으며 1번에서 선언한
bgColor 의 초깃값 skyblue가 적용 된 것을 볼 수 있습니다. (아래 사진 참고)

이번에는 해당 컴포넌트에서 관리되는 state 를 변경 시키는 법을 알아보겠습니다.

🎐 state 값 변경하기 (setState)

자신의 컴포넌트에서 관리되는 state의 값은 setState() 함수를 통해 변경 시킬 수 있습니다.

Hello.js

import React, { Component, Fragment } from 'react'

export default class Hello extends Component {
    constructor(props){                     // 생성자 선언 안에서 state 초기화 
        super(props) 

        this.colorChange = this.colorChange.bind(this); 1️⃣ 
        this.state = {bgColor:"skyblue"}    // EX) this.state = {key:value}
    }
    
    colorChange(){
        this.setState({bgColor:"green"}) 3️⃣
    }
    render() {
        return (
            <Fragment>
                <div className={"color_box"} style={{backgroundColor:this.state.bgColor}}>
                    <span>Hello {this.props.name}</span>  
                </div>
                <button onClick={this.colorChange}>color Change</button> 2️⃣
            </Fragment>

        )
    }
}

colorChange 를 Arrow Function 을 이용하여 선언 하지 않았기 때문에 함수를
수동으로 bind 해줘야 한다 자동으로 bind 하기 위해서는 es6 문법인 Arrow Function 으로 선언.

onClick 이벤트 발생 시 colorChange 함수를 호출

this.setState() 함수를 통해 bgColor 의 값을 green 으로 변경 시켜준다.