[React] State(상태)

State

계속해서 변화하는 특정 상태를 의미합니다. 상태에 따라 각각 다른 동작을 합니다.
react에서 State는 컴포넌트가 가지는 동적인 데이터이고, State는 해당 컴포넌트가 관리하게 됩니다.

예제

Counter.js

const Counter = () => {
    return (
        <div>
            <h2>0</h2>
            <button>+</button>
            <button>-</button>
        </div>
    )
}

export default Counter;

App.js

import './App.css';
import MyHeader from './MyHeader';
import Counter from './Counter';
function App() {
  return (
    <div>
      <MyHeader/>
      <Counter/>
    </div>
  );
}

export default App;

이 프로그램의 목표는 + 버튼을 누르면 숫자가 1씩 올라가고 - 버튼을 누르면 숫자가 -1 가 되게 동작하는 것입니다.

여기서 동적으로 변경되는 것은 h2 태그 안에 있는 0 입니다. 이것을 상태로 생각할 수 있겠습니다.

Counter.js

import React, {useState} from 'react';

const Counter = () => {

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

    return (
        <div>
            <h2>{count}</h2>
            <button>+</button>
            <button>-</button>
        </div>
    )
}

export default Counter;

react에서 제공하는 useState메서드를 사용해보도록 하겠습니다. useState 배열을 반환하고, 비 구조화 할당을 통해서 index 0번째에 count, index 1번쨰에 setCount 상수로 받아왔습니다.
count는 상태의 값으로 사용이 되고, setCount는 count를 변화시키는 상태 변화함수로 사용되게 됩니다.

Counter.js

import React, {useState} from 'react';

const Counter = () => {

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

    const plus = () => {
        setCount(count + 1);
    };

    const minus = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
        </div>
    );
};

export default Counter;

+ 버튼을 누르면 +1 , - 버튼을 누르면 -1이 되게 작성하였습니다. 여기서 알 수 있는 것은 count 값이 변경될 때마다 화면이 리렌더링 된다는 것을 알 수 있습니다.
즉, 컴포넌트는 자신이 가진 상태가 변경되면 화면을 다시 그리는 리렌더링이 된다는 것을 알 수 있습니다. (함수 호출)

console.log 를 추가하여 테스트를 해보면 더욱 확실하게 확인할 수 있습니다.

---

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.