[React] State 의미와 useState() 사용방법

State(상태) 란?

State(상태)란 React에서 동적인 데이터의 값을 다루기 위해 사용하는 Object입니다.

 

리액트는 함수를 사용해서 변수 대신에 State(상태)에 저장하여 사용하는데

그 때 사용하는 리액트 함수가 바로 useState()입니다.

 

State는 변수와 달리 상태가 변경되면 자동으로 재렌더링이 되는 장점이 있습니다.

 

---

useState() 사용방법

이해하기 쉽게 아래 영상에 해당하는

간단한 예제 코드와 함께 설명을 해보겠습니다.

 

counter.js

import React, { useState } from 'react';

const Counter = () => {

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

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

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

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

 

import React, { useState } from 'react';

: 먼저 useState()를 사용하기 위해서는 리액트 패키지로부터 불러와 import를 해주어야 합니다.

 

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

: 여기서 count의 위치는 현재 상태 값의 변수를 칭하고,

  setCount의 위치는 set의 역할 그대로 새로운 상태 값으로 set해주는 역할입니다.

 

  그리고 useState()는 상태 초기 값을 의미하는데, useState(0)은 초기 값을 0으로  설정해 주겠다는 의미입니다.

 

const onIncrease = () => {
    setCount(count + 1);

};

 

const onDecrease = () => {
    setCount(count - 1);

};

: 보는 바와 같이 onIncrease 함수를 사용하면, 현재 상태 값인 count에 +1을 하여

  새로운 상태 값으로 setter를 시켜주는 기능을 합니다.

 

  반대로 onDecrease는 현재 상태 값에 -1을 적용하여 새로운 값으로 set을 해주는 기능입니다.

 

export default Counter;

:  export default는 해당 모듈 전체를 export한다는 의미입니다.

  즉, 다른 모듈에서 Counter 모듈을 import하여 사용할 수 있도록 하는 것이다.