[React] Hooks - useState

안녕하세요. J4J입니다.

 

이번 포스팅은 hooks의 useState에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

useState란?

 

useState는 hooks에서 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다.

 

여기서 말하는 반응성이라는 것은 말 그대로 화면에 사용되는 데이터가 변경될 때 변경된 데이터가 화면에 업데이트되어 보이는 것인지를 말합니다.

 

예를 들어 숫자 값을 증가시킨다고 할 때 반응성이 제공될 때에는 숫자를 증가할 때 마다 숫자가 증가되는 것이 실시간으로 화면에 보이게 되는 것이고, 반응성이 제공되지 않을 때에는 실제로 숫자는 증가하지만 화면에는 기존 값이 유지되어 있는 것입니다.

 

 

 

클래스형 컴포넌트에도 useState와 동일한 역할을 처리해주는 것이 있었습니다.

 

클래스형 컴포넌트에서는 this.state.~, this.setState( ~ ) 등을 사용하여 반응성을 위한 데이터들을 사용 및 업데이트를 하곤 했는데 함수형 컴포넌트에서는 useState가 해당 역할을 담당하여 처리해줍니다.

 

 

반응형

 

 

useState의 사용방법은 정말 간단합니다.

 

우선 useState는 기본적으로 리액트 사용을 위해 설치한 'react' 패키지에서 제공해줍니다.

 

그리고 vscode에서 제공해주는 useState에 대한 설명을 보면 다음과 같습니다.

 

function React.useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>]

 

 

 

파라미터 값은 한 개만 넣어줄 수 있고 입력되는 파라미터 값은 초기 값을 의미합니다.

 

리턴 값으로는 길이가 2인 배열입니다.

 

배열의 첫 번째 요소는 데이터가 저장되어 있는 상태 값이고, 두 번째 요소는 상태 값을 반응성을 주며 업데이트 시킬 수 있는 함수입니다.

 

 

 

여기서 알고 가셔야 되는 부분은 배열의 두 번째 요소로 리턴되는 setState함수를 이용하여 데이터를 업데이트하지 않고 첫 번째 요소 값에 일반 변수처럼 데이터를 업데이트할 수 있다는 것입니다.

 

하지만 함수를 사용하는 것과의 차이점은 실제 변수는 업데이트는 되지만 화면에 반응성을 제공해주지 않는다는 점입니다.

 

 

 

그리고 만들어진 state값은 일반 변수를 가져다 사용하는 것 처럼 중괄호( { } )를 이용한 보간을 통해 화면에서 가져다 사용할 수 있습니다.

 

 

 

위의 내용들을 기반으로 하여 useState와 관련된 간단한 예시코드를 만들어 보겠습니다.

 

 

 

예시 코드

 

import * as React from 'react';

const App = (): JSX.Element => {

    /* 타입 스크립트 사용할 경우 */
    let number1: number = 0;
    let [number2, setNumber2] = React.useState<number>(0);
    const [number3, setNumber3] = React.useState<number>(0);

    /* 타입 스크립트 사용하지 않을 경우 
    let number1 = 0;
    let [number2, setNumber2] = React.useState(0);
    const [number3, setNumber3] = React.useState(0);
    */

    const divStyle = {
        border: '1px solid orange',
        marginBottom: '10px',
        padding: '4px',
    }

    return (
        <>
            <div style={divStyle}>
                <h3>일반 변수</h3>
                <button onClick={() => {number1 += 1; console.log(`number1= ${number1}`);}}>증가</button>
                <p>number1: {number1}</p>
            </div>

            <div style={divStyle}>
                <h3>useState 변수로 업데이트</h3>
                <button onClick={() => {number2 += 1; console.log(`number2= ${number2}`);}}>증가</button>
                <p>number2: {number2}</p>
            </div>

            <div style={divStyle}>
                <h3>useState 함수로 업데이트</h3>
                <button onClick={() => {setNumber3(number3+1); console.log(`number3= ${number3}`)}}>증가</button>
                <p>number3: {number3}</p>
            </div>
        </>
    )
}

export default App;

 

 

728x90

 

 

위에서 number1은 바닐라 스크립트에서 단순하게 자주 사용되는 변수의 형태입니다.

 

number2는 useState를 사용하지만 setState함수를 사용하지 않고 데이터를 업데이트시킵니다.

 

number3는 useState를 사용하고 setState함수로 데이터를 업데이트시킵니다.

 

코드를 작성하고 실행해보면 다음과 같은 결과가 나옵니다.

 

실행 결과

 

 

 

결과를 보시면 아시겠지만 3가지 케이스에 해당하는 데이터들을 모두 증가시켜 봤을 경우 3번째에 해당하는 데이터, 즉 setState함수를 이용하여 데이터를 업데이트시키는 경우에만 화면에 반응성을 일으킵니다.

 

그리고 여기서 한 가지 더 알고 가셔야 되는 부분은 console창에 출력되는 데이터입니다.

 

1, 2번째는 증가된 값에 맞게 그대로 콘솔 창에 출력이 되고 있지만 3번째는 증가된 값이 아닌 이전 데이터 값이 출력되고 있습니다.

 

그 이유는 setState는 실행과 동시에 데이터가 업데이트시켜주지 않고 관련된 모든 로직이 처리가 완료된 이후에 데이터 업데이트 처리를 해줍니다.

 

그러므로 콘솔로 데이터를 출력하기 전에 데이터를 업데이트시켰지만 관련된 모든 로직이 완료가 되지 않았기 때문에 데이터가 이전 데이터로 출력되고 있는 것이고, 콘솔 출력까지 모두 완료가 되면 그때서야 데이터가 업데이트되어 화면에 보이게 되는 것입니다.

 

 

 

 

 

 

이상으로 hooks의 useState에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.