React 13 기초 state

State

React 에서의 state 는 컴포넌트의 데이터 관리를 위한 핵심적인 개념입니다 컴포넌트는 자체적인 state 를 가질 수 있으며 이 state 는 컴포넌트의 상태를 나타내는 데이터를 관리합니다 React 에서는 state 가 변경되면 React 는 해당 컴포넌트를 다시 렌더링 하여 새로운 상태를 화면에 반영합니다

class 형 State

import React from "react";

class Class_state2 extends React.Component{

    constructor(props){
        super(props)

        this.state = {
            flag : "false"
        }
    }

    render(){

        const settrue_flag = () =>{
            this.setState({flag : "true"})
        }

        const setfalse_flag = () =>{
            this.setState({flag : "false"})
        }

        return (

            <div>
                <span>지금의 상태는 : {this.state.flag}</span>
                <button onClick={settrue_flag}>true 상태 변경하기</button>
                <button onClick={setfalse_flag}>false 상태 변경하기</button>
            </div>
        )
    
    }
}

export default Class_state2;

지금 보면 간단한 class 형 컴포넌트가 있다 앞전에 구조를 살펴 보았으니 나름 쉬울것이다 여기세 새로운 개념인 state 가 들어올것이다 state 는 지금처럼 생성자에 this.state 라고 사용하고 관리하고 싶은 상태를 key-value 형태로 정의를 한다 우리는 key 는 flag 값은 “false” 라는 문자열을 관리할것이다

그리고 아래 현재 상태를 보여줄때는 state 안에 있는 값은 이처럼 가져온다 그리고 버튼 2개에 각각 onClick 이 달려 있는 모습을 볼 수 있는데

Click 함수

const settrue_flag = () =>{
        this.setState({flag : "true"})
}

클릭함수는 이렇게 생겼다 함수 선언은 잘 알것인데 우리는 안에 있는 state 를 이와 같이 변경을 할것입니다 이때 중의할것은 반드시 setState 를 활용해서 안에 있는 값의 변화를 주어야 합니다 그리고 react 는 변화를 감지하면 다시 DOM 을 렌더링 하게 됩니다

함수형 컴포넌트의 state

import React, { useState } from "react";

function Function_state(){

    const [flag , setFlag] = useState("false");

    const settrue_flag = () =>{
        setFlag("true");
    }

    const setfalse_flag = () =>{
        setFlag("false");
    }

    return (

        <div>
            <span>지금의 상태는 : {flag}</span>
            <button onClick={settrue_flag}>true 상태 변경하기</button>
            <button onClick={setfalse_flag}>false 상태 변경하기</button>
        </div>

    )

}

export default Function_state;

그럼 같은 예제를 함수형 컴포넌트로 알아보자 함수형 컴포넌트는 되려 좀 간다하게 보일 수 있다 다만 이때 볼것은 const [flag , setFlag] = useState("false"); 이 부분이다 이렇게 사용을 하면 class 형 컴포넌트 처럼 변수 flag 하나와 그를 변경할 수 있는 setFlag 함수를 return 받을 수 있다 그리고 각각의 버튼을 클릭시 flag 의 상태값을 변경하고 DOM 을 재렌더링 하게 됩니다

이전값을 저장하고 있는 state

예시 -> 버튼을 클릭해서 값이 1씩 올라가거나 , 1씩 떨어지는 class 형 컴포넌트와 함수형 컴포넌트를 각각 만들어보시오

잘못된 예시

import React from "react";

class Calss_state3 extends React.Component{

    constructor(props){
        super(props)

        this.state = {
            count : 0
        }
    }

    render(){

        const increment = () => {
            this.setState({count : count++})
        }

        const decrement = () => {
            this.setState({count : count--})
        }

        return (

            

            <div>
                <span>현재값 : {this.state.count}</span>
                <button onClick={increment}>count 증가</button>
                <button onClick={decrement}>count 감소</button>
            </div>
        )
    }
}

export default Calss_state3;

이렇게 할것이라고 생각했는데 이는 문제가 발생한다 count 라는 값을 react 가 알지 못한다 그래서 현재 저장된 state 에 저장된 값을 가져와야 함으로

const increment = () => {
    this.setState({count : this.state.count += 1 })
}

const decrement = () => {
    this.setState({count : this.state.count -= 1})
}

올리고 내리는 함수를 각각 이렇게 만들 수 있다 이렇게 하면 이전에 저장된 값을 가져와서 state 를 변경하고 그리고 렌더링을 하게 된다 이거 말고 더 좋은 방법은 이처럼 하는것이 좋다

제일 좋은 예시

const increment = () => {
    this.setState( (prevState) =>  ({count : prevState.count + 1 }))
}

const decrement = () => {
    this.setState( (prevState) => ({count : prevState.count - 1}))
}

제일 좋은 예시는 파라미터 변수를 줘서 이전 상태를 가저오는 변수를 선언해서 값을 올리고 내리는게 가장 좋다

함수형 컴포넌트

import React, { useState } from "react";

function Function_state2(){

    const [count , setCount] = useState(0);

    const settrue_flag = () =>{
        setCount(prevCount  => prevCount  + 1);
    }

    const setfalse_flag = () =>{
        setCount(prevCount  => prevCount  - 1);
    }


    return (

        <div>
            <span>지금의 상태는 : {count}</span>
            <button onClick={settrue_flag}>true 상태 변경하기</button>
            <button onClick={setfalse_flag}>false 상태 변경하기</button>
        </div>

    )

}

export default Function_state2;

함수형 컴포넌트에서는 이렇게 사용을 할 수 있습니다 오늘은 React 에서 가장 중요한 state 라는 것에 대해서 배웠습니다