[React] Hooks : useState( )

---

📝 useState

리액트 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다.
사용자 인터렉션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요합니다.
useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다.

📜 useState 활용

import { useState } from 'react';

const Counter = () => {

      let [count, setCount] = useState(0);

    return(
        <div>
              <h1> { count } </h1>
              <button onClick={() => {setCount(count + 1)}}>+1</button>
            <button onClick={() => {setCount(count - 1)}}>-1</button>
          </div>
    )
};
export default Counter;

useState는 상단에 import 구문을 통해 불러옵니다.
useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재는 카운터의 기본값을 0으로 설정한 상태입니다.

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

이 함수가 호출되면 배열을 반환합니다.
배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다.
이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 렌더링됩니다.

📜 useState를 여러 번 사용하기

하나의 useState 함수는 하나의 상태 값만 관리할 수 있습니다. 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 됩니다.

import { useState } from 'react';

const Info = () => {

      let [name, setName] = useState('');
      let [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} />
                  <input value={nickName} onChange={onChangeNickName} />
            </div>
            <div>
                <p>이름 : </p> {name}
                <p>닉네임 : </p> {nickName}
            </div>

          </div>
    )
};

export default Info;