React의 상태 관리

안녕하세요 개발자 여러분!
이번 포스팅에서는 React JS에서 State Management를 배워보도록 하겠습니다.

상태는 무엇입니까??

모든 React 구성 요소는 UI의 모양을 설명하는 JSX를 반환합니다. state는 React에서 예약어입니다. 따라서 상태는 변경될 수 있는 앱의 부분을 나타내는 객체입니다.

Reactv16.8부터 함수 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있는 후크가 도입되었습니다.

프로젝트 설정

먼저 create-react-app 으로 React 앱을 만들어 봅시다. Create React App은 반응 앱을 구축하기 위해 공식적으로 권장되는 도구입니다. 컴퓨터에 Node >= 8.10 and npm >=5.6가 있어야 합니다. 프로젝트를 만들고 실행하려면 다음 명령을 입력합니다.

npx create-react-app my-app
cd my-app
npm start

이 자습서에서는 카운트를 늘리거나 줄일 수 있는 간단한 카운터 앱을 만들 것입니다.



이제 코드로 이동하겠습니다!

카운터 앱의 기본 구조를 만들어 보겠습니다.
src/App.js

import React, { Component } from "react";
import "./App.css";

class App extends Component {
    onIncrementHandler = () => {

    };

    onDecrementHandler = () => {

    };

    render() {
        return (
            <div className="App">
                <h3 className="counter">0</h3>
                <div className="container">
                    <button onClick={this.onIncrementHandler}>Increment</button>
                    <button onClick={this.onDecrementHandler}>Decrement</button>
                </div>
            </div>
        );
    }
}

export default App;

우리는 App.css에 있습니다. 카운터 앱이 더 잘 보이도록 몇 가지 스타일을 추가해 보겠습니다.
src/App.css

.App {
    height: 100vh;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.counter{
    font-size: 150px;
    font-weight: 400;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 15%;
  margin: 0 30px;
  font-size: 30px;
  color: white;
  background-color: black;
  border: none;
  transition: transform .2s;
  cursor: pointer;
}

button:hover {
  border: 1px solid black;
  color: black;
  background-color: white;
  transform: scale(1.2);
}

카운터 값을 0으로 하드 코딩한 것을 보셨을 것입니다. 그렇다면 카운터 값을 조작하는 방법🤔??

카운터 값을 조작하기 위해 상태를 소개합니다. 상태는 구성 요소에 속하는 속성 값을 저장하는 javascript 개체입니다. 구성 요소의 상태가 변경되면 구성 요소 UI도 변경됩니다.

클래스에 로컬 상태 추가

state = {
    counter: 0
}

카운터를 동적으로 얻으려면 <h3 className="counter">0</h3>를

<h3 className="counter">{this.state.counter}</h3>

상태를 올바르게 사용하기
setState()는 초기 상태 설정 후 상태를 업데이트하는 합법적인 방법입니다.

// Right
this.setState({comment: 'Hello World!'});

여기서 우리는 객체를 setState() 에 전달합니다. 개체에는 업데이트하려는 상태의 일부가 포함되어 있으며 이 경우에는 comment 값입니다. React는 이 값을 가져와 필요한 객체에 병합합니다.

상태를 직접 수정하지 마십시오. 우리는 항상 불변적으로 상태를 업데이트해야 합니다.

// Wrong
this.state.comment = 'Hello World';

업데이트를 위해 이전 상태를 사용해야 하는 경우 위의 방법이 작동하지 않습니다. 따라서 위의 접근 방식에 대한 대안은 다음과 같습니다.

this.setState((prevState) => {
    counter: prevState.counter + 1
});

이제 onIncrementHandler 및 onDecrementHandler 에서 상태를 업데이트하겠습니다.

onIncrementHandler = () => {
        this.setState((prevState) => ({
            counter: prevState.counter + 1,
        }));
};

onDecrementHandler = () => {
        this.setState((prevState) => ({
            counter: prevState.counter - 1,
        }));
};

상태 관리가 포함된 최종 업데이트된 코드는 다음과 같습니다.

import React, { Component } from "react";
import "./App.css";

class App extends Component {
    state = {
        counter: 0,
    };

    onIncrementHandler = () => {
        this.setState((state) => ({
            counter: state.counter + 1,
        }));
    };

    onDecrementHandler = () => {
        this.setState((prevState) => ({
            counter: prevState.counter - 1,
        }));
    };

    render() {
        return (
            <div className="App">
                <h3 className="counter">{this.state.counter}</h3>
                <div className="container">
                    <button onClick={this.onIncrementHandler}>Increment</button>
                    <button onClick={this.onDecrementHandler}>Decrement</button>
                </div>
            </div>
        );
    }
}

export default App;