useState의 기초

이 후크는 함수 구성 요소에서 상태를 관리하는 기능을 활성화합니다.

import React, { useState } from 'react'

const Header = () => {
    //setting initial state up and getting state variable
    // and function that is going to manage it
    const [darkModeActive, setDarkModeActive] = useState(false)
    // This inner function makes use of the setDarkModeActive to set the new state.
    const handleClick = () => {
        setDarkModeActive(!darkModeActive)
    }
    return (
        <div className="Header">
            <h1>Crypto Swag</h1>
            <button 
                type="button" 
                onClick={
                    handleClick}>{darkModeActive ? 
                    'Light Mode' 
                    : 'Dark Mode'}
            </button>
        </div>
    )
}

export default Header

위의 예에서 헤더는 구성 요소이며 웹 사이트의 darkMode를 제어하기 위해 useState를 사용하고 있습니다.

useState 후크는 제어하려는 초기 상태를 수신한 다음 2개의 요소가 있는 배열을 반환합니다. 첫 번째 요소는 현재 상태를 포함하는 변수이고 두 번째 요소는 상태 자체를 변경하는 기능입니다.