2021.03.05 / React - Hooks useState

useState

가장 기본적인 훅으로서, 함수형 컴포넌트에서도 가변적인 형태를 지니고 있을 수 있게 해준다.

컴포넌트에서 동적인 값을 상태(state)라고 한다.

리액트에서는 이러한 동적인 값의 상태를 관리하기 위해 useState라는 함수를 쓴다.

함수형 컴포넌트에서 상태를 관리해야 하는 일이 발생한다면 이 Hook을 사용하면 된다.

 

Counter.js

import React, { useState } from 'react';

const Counter = () => {
    // 비구조화 할당 문법
    // ()안에는 기본값(초기값)
    const [value, setValue] = useState(0);
    
    return(
        <div>
            <p>
                현재 카운터 값은 <b>{value}</b> 입니다.
            </p>
            <button onClick={() => setValue(value + 1)}>+1</button>
            <button onClick={() => setValue(value - 1)}>-1</button>
        </div>
    );
}

export default Counter;

 

이 함수의 파라미터( useState() )에는 상태의 기본값을 넣어준다.

위에서 값을 0으로 넣어줬기 때문에 초기값이 0이 된다.

이 함수가 호출되고 나면 배열을 반환하며, 그 배열의 첫 번째 원소는 상태 값이고, 두 번째 원소는 상태를 설정하는 함수이다.

이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링이 된다.

 

useState 다중 사용

하나의 useState 함수는 하나의 상태 값만 관리할 수 있기 때문에

만약 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 된다.

info.js

import React, { useState } from 'react';

const Info = () => {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const onChangeName = e => {
        setName(e.target.value);
    };

    const onChangeNickName = e => {
        setNickname(e.target.value);
    };

    return (
        <div>
            <input value={name} onChange={onChangeName} />
            <input value={nickname} onChange={onChangeNickName} />
            <div>
                <div>
                    <b>이름:</b> {name}
                </div>
                <div>
                    <b>닉네임:</b> {nickname}
                </div>
            </div>
        </div>
    );
}

export default Info;

 

 

참고

- velog.io/@qor8917/useState

- velog.io/@velopert/react-hooks