React useState() Hook 사용법: 코드 예시로 배우는 실전 활용 가이드

React의 가장 잘 알려진 hook 중 하나는 useState() hook입니다. 이를 통해 컴포넌트에 상태 변수를 추가할 수 있습니다. useState() hook은 문자열, 배열, 숫자, 객체 등 다양한 값을 편리하게 관리할 수 있습니다.

이 글에서는 useState() hook에 대해 배우고, 세 가지 다른 예시를 통해 그 사용법을 보여드리겠습니다: 조건부 렌더링이 있는 버튼, 폼 처리, 유명한 카운터 예시입니다.

사전 지식

• HTML, CSS 및 JavaScript의 기본 지식이 필요합니다.
• React에 대한 초보 지식이 있으면 도움이 됩니다.
• 마지막으로 통상적으로 VS Code와 같은 IDE가 필요합니다.

React 애플리케이션을 준비하고 나면 useState를 사용할 준비가 됩니다. 시작하려면 아래와 같이 React에서 useState()를 가져와야 합니다:

import React, { useState } from 'react';

useState()가 어떻게 작동하나요?

useState() hook은 애플리케이션에서 상태 관리를 처리합니다.

useState() hook은 초기 상태 변수 값을 인수로 받습니다. 두 번째 값은 상태를 설정하는 데 사용되므로, 항상 setState로 시작됩니다. 작동 방식은 아래와 같습니다.

const [state, setState] = useState(값 입력);

const [calories, setCalories] = useState(칼로리 초기값);

처음 렌더링할 때는 초기 상태를 반환하고, set 함수를 사용하여 리렌더링하는 동안 다른 값으로 업데이트됩니다.

조건부 렌더링과 useState() Hook

다음 예시는 사용자의 로그인 상태에 따라 상태를 업데이트합니다. 초기 상태가 false로 설정된 이유는, 사용자가 로그인하지 않았다는 것을 의미하기 때문입니다.

import React, { useState } from 'react';

const Signin = () => {
    const [signedIn, setSignedIn] = useState(false);

    const handleSignIn = () => {
        setSignedIn(true);
    };

    const handleSignOut = () => {
        setSignedIn(false);
    };

    return (
        <div>
            {signedIn ? (
                <div>
                    <button type="button" onClick={handleSignOut}>Sign Out</button>
                    <p>Welcome back, good to see you here</p>
                </div>
            ) : (
                <div>
                    <button type="button" onClick={handleSignIn}>Sign In</button>
                    <p>Please Sign in</p>
                </div>
            )}
        </div>
    );
};

export default Signin;

React 카운터 앱에서 useState() Hook 사용하기

이 예시는 클릭을 통해 상태를 업데이트하는 방법을 사용한 useState() 사용법을 보여줍니다.

import React, { useState } from 'react';

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

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

    return (
        <div>
            <button type="button" onClick={incrementCount}>You clicked {count} times</button>
        </div>
    );
};

export default Counter;

React에서 양식에 useState() Hook 사용하기

양식은 개발자가 입력값을 다루기 위해 빈 상태를 설정할 수 있게 해주는 useState()를 활용합니다.

import React, { useState } from 'react';

const Form = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(name, email);
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" placeholder="Enter your name" onChange={(e) => setName(e.target.value)} value={name} required />
                <input type="email" placeholder="Enter your email" onChange={(e) => setEmail(e.target.value)} value={email} required />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

export default Form;

결론

이 글을 통해 여러분은 React의 useState() hook에 대해서, 그리고 세 가지 다른 예제를 통한 사용법에 대해서 배웠습니다. 다른 모든 React Hook과 마찬가지로 useState() hook도 React hook의 일반적인 규칙을 따릅니다.