useState 함수 사용예

setState() - 함수 기반 상태 관리

React Hooks에서 제공하는 useState() 함수를 사용해서 위의 클래스 기반 컴포넌트를 함수 기반으로 재작성해보았습니다. setState() 함수는 배열을 리턴하는데 첫 번째 원소는 상태 값을 저장할 변수이고 두번 째 원소는 해당 상태 값을 갱신할 때 사용할 수 있는 함수입니다. 그리고 setState() 함수에 인자로 해당 상태의 초기 값을 넘길 수 있습니다.

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

 

예제)

 

import React, { useState } from 'react';

function Counter(props) {

    // 공통변수

    // 1) 변수와 2)변수의 값을 바꿀 수 있는 함수....

    // 두개를 짝궁으로 리턴하는 기능.

    // useState를 통해서 변수를 초기화

    const [count, setCount] = useState(10)

    let titleStyle = {

        fontSize: "23pt",

        color:"red"

    }

    return (

        <div>

            <h1 style={titleStyle}>This is a counter</h1>

            <h1 style={{color:"magenta",

                    backgroundColor:"cyan"}}>This is another counter</h1>

            <h1>현재 카운트 : {count}</h1>

        </div>

    );

}

export default Counter;

 

 

상태 변경 함수를 만들때 꼭 화살표함수를 만들어 사용해야 함.

또한 아래 예제에서, setCount 함수를 사용해야만 상태값이 변경된 것을 React가 알 수 있다. 

 

import React, { useState } from 'react';

function Counter(props) {

    // 공통변수

    // 1) 변수와 2)변수의 값을 바꿀 수 있는 함수....

    // 두개를 짝궁으로 리턴하는 기능.

    // useState를 통해서 변수를 초기화

    const [count, setCount] = useState(10)

    // 상태를 변경하려면...

    const increase = () => {

        setCount(count + 1);

    }

    const decrease = () => {

        setCount(count - 1);

    }

    let titleStyle = {

        fontSize: "23pt",

        color:"red"

    }

    return (

        <div>

            <h1 style={titleStyle}>This is a counter</h1>

            <h1 style={{color:"magenta",

                    backgroundColor:"cyan"}}>This is another counter</h1>

            <h1>현재 카운트 : {count}</h1>

            <button type="button" onClick={increase}>증가</button>

            <button type="button" onClick={decrease}>감소</button>

        </div>

    );

}

export default Counter;