[React] State란?

리액트 공부 중 State와 Prop이라는 걸 알게 됐는데 중요한 키워드 같아서 state 먼저 확인한 다음 포스팅한다.

먼저 공식문서에선 뭐라고 설명하는지 확인해봤다.

 

https://ko.reactjs.org/docs/faq-state.html

컴포넌트 State – React

prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다

 

state와 prop을 정리하면 아래와 같다.

 

• 둘 다 일반 자바스크립트 객체다
• state는 컴포넌트 안에서 사용된다
• prop은 컴포넌트에 매개변수처럼 전달하는 것이다

 

다른 글에선 뭐라고 설명하는지 확인해봤다.

 

https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-state

ReactJS State: SetState, Props and State Explained [Updated]

state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있다. 변경될 때마다 컴포넌트가 다시 렌더링된다. state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다

- 사용자 작업 또는 네트워크 변경에 따라 state를 수정할 수 있다
- 객체의 상태가 바뀔 때마다 리액트는 컴포넌트를 브라우저에 다시 렌더링한다
- state 객체는 생성자에서 초기화된다
- state 객체는 여러 속성을 저장할 수 있다
- this.setState()는 state 객체의 값을 저장하는 데 쓰인다
- setState()는 새 state와 이전 state 사이의 얕은 병합을 수행한다

	State	Props
유스케이스	뷰에 렌더링돼야 하는 컴포넌트의 데이터를 저장하는 데 사용한다	데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는 데 사용한다
가변성	상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있다	props는 바뀔 수 없다. 한 번 설정되면 props를 변경할 수 없다
업데이트	이벤트 핸들러는 일반적으로 state를 업데이트한다	상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정한다

 

https://medium.com/edonec/state-in-react-an-overview-a182675cee2c

State In React: An overview

state는 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 리액트에서 쓰는 일반 자바스크립트 객체다. 함수에 선언된 모든 변수와 마찬가지로 컴포넌트에서 관리된다. 차이점은 일반 변수는 함수가 종료될 때 사라지지만 state 변수는 리액트에 의해 보존된다는 것이다. 컴포넌트의 역할은 원시 데이터를 HTML로 바꾸는 것이기 때문에 이 원시 데이터는 props, state 객체로 구성돼 있다고 생각할 수 있다. props와 state가 render()의 입력 데이터라고 말할 수도 있다. 따라서 state는 컴포넌트의 동작을 제어하는 일부 속성을 나타낸다. 경험에 따르면 컴포넌트가 자체 속성 변경을 해야 하는 경우 해당 속성은 해당 state의 일부여야 한다. 로컬 state는 클래스에서만 쓸 수 있는 기능이다. 이것이 함수 컴포넌트에 의미하는 바는 나중에 논의될 것이다. state를 반드시 써야 하는 것은 아니며 복잡성이 증가하므로 stateless 컴포넌트가 항상 선호된다. 그러나 이것은 대화형 앱에서 불가피하다...(중략)...state의 올바른 사용법은 state 변수에 변경 사항을 직접 적용하지 않는다는 걸 의미한다. 이는 리액트에서 변경사항으로 간주되지 않기 때문이다. 대신 state 객체에 대한 업데이트를 예약하는 함수인 setState()를 써서 이 작업을 수행해야 한다. 그러나 setState()가 항상 컴포넌트를 즉시 업데이트하는 건 아니다. 업데이트를 일괄 처리하거나 나중으로 연기할 수 있다. 이것은 setState() 호출 직후 this.state를 읽는 걸 잠재적인 함정으로 만든다. setState()는 비동기식이다. 한 줄에서 setState()를 호출하고 다음 줄에서 상태가 업데이트됐다고 가정할 수는 없다. 이유는 setState()가 state를 업데이트하라는 즉각적인 명령이 아니라 state 업데이트에 대한 단순 요청이기 때문이다
이 문제를 해결하기 위해 업데이트가 적용된 후 실행하게 보장하는 setState() 콜백 함수를 사용할 수 있다

 

https://www.geeksforgeeks.org/reactjs-state-react/

ReactJS | State in React - GeeksforGeeks

state는 리액트 컴포넌트 클래스의 인스턴스다. 컴포넌트의 동작을 제어하는 관찰 가능한 속성 집합의 객체로 정의할 수 있다. 즉 컴포넌트의 상태는 컴포넌트 수명 동안 변경될 수 있는 정보를 보유하는 객체다. 매 초마다 render()를 명시적으로 호출하는 것보다 리액트가 동일한 결과를 얻는 더 나은 방법을 제공한다. state를 써서 값을 저장하는 것이다.

 

종종 글을 보다 보면 state는 클래스 컴포넌트에서만 쓸 수 있다는데 이건 리액트 16.8 버전 이전에 해당하는 내용이라고 생각된다.

16.8 이전에는 함수 컴포넌트에서 state를 쓸 수 없었지만 16.8 버전에서 Hooks가 추가되면서 state를 사용할 수 있게 되었다. 그래서 state를 쓰려면 클래스 컴포넌트를 써야 하나 같은 생각은 안 해도 되겠다.

 

state를 쓰는 예제를 간단하게 확인해본다. CSS는 따로 module.css 파일을 만들어 사용했고 그 안의 내용은 대충 이렇게 쓴다.

 

.blueButton {
    background-color: blue;
    color: white;
}

.redButton {
    background-color: red;
    color: white;
}

 

그리고 App.js에서 이걸 import해서 사용할 수 있게 한 다음 버튼을 2개 만들고 버튼 별로 사용할 함수를 2개 만든 다음 적용하는 처리를 한다.

 

import { useState } from 'react';
import styles from './Button.module.css';

const App = () => {
    const [blueCount, setBlueCount] = useState(0);
    const [redCount, setRedCount] = useState(0);

    const handleBlueClick = () => {
        setBlueCount(blueCount + 1);
    };
    const handleRedClick = () => {
        setRedCount(redCount + 1);
    };

    return (
        <div>
            <div>
                <h3>파란색 버튼 클릭 횟수 : {blueCount}</h3>
                <button
                    id="blue"
                    className={styles.blueButton}
                    onClick={handleBlueClick}
                >
                    클릭해 보세요!
                </button>
            </div>
            <div>
                <h3>빨간색 버튼 클릭 횟수 : {redCount}</h3>
                <button
                    id="red"
                    className={styles.redButton}
                    onClick={handleRedClick}
                >
                    클릭해 보세요!
                </button>
            </div>
        </div>
    );
};

export default App;

 

이렇게 하고 화면을 보면 왼쪽 상단에 이렇게 나온다.

 

 

버튼을 클릭하면 횟수 옆의 0이 하나씩 올라가는 게 보인다.

setState()의 값으로는 숫자만 넣을 수 있는게 아니라 boolean, array 등 여러 값들을 넣을 수 있으니 로직 짤 때 참고하자.