useState

가장 기본적인 Hook이며, 함수형 컴포넌트에서도 state를 지닐 수 있게 해줍니다.

함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 됩니다.

useState 사용해보기

실습할 파일을 생성하겠습니다.

Counter.js

// Counter.js
import { 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;

App.js

// App.js
import Counter from "./Counter";

function App() {
  return (
    <div>
      <Counter/>
    </div>
  );
}

export default App;

useState는 코드 상단에서 import 구문을 통해 불러오고 다음과 같이 사용합니다.

import { useState } from 'react';
...
const [value, setValue] = useState(0);
...

useState함수의 파라미터에는 상태의 기본값을 넣어 줍니다.

현재는 0을 넣어 주었는데, 카운터의 기본값을 0으로 설정하겠다는 의미입니다.

이 함수가 호출되면 배열을 반환하는데.

배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다.

1. 이 함수에 파라미터를 넣어서 호출하면
2. 전달받은 파라미터로 값이 바뀌고
3. 컴포넌트가 정상적으로 리렌더링됩니다.

useState를 여러번 사용하기

먼저 info.js파일을 생성합니다.

import { 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>
            <div>
                이름 : <input value={name} onChange={onChangeName}/>
                <br/>
                닉네임 : <input value={nickname} onChange={onChangeNickname}/>
            </div>
            <div>
                <p>이름: <b>{name}</b></p>
                <p>닉네임: <b>{nickname}</b></p>
                
            </div>
        </div>
    );
};

export default Info;

App.js

import Counter from "./Counter";
import Info from "./Info";

function App() {
  return (
    <div>
      <Counter/>
      <p>---------------------------------------</p>
      <Info/>
    </div>
  );
}

export default App;

이렇게 useState를 여러개 만들어서 사용할 수 있습니다.