[React] Hooks - useState

Hooks

리액트 v16.8에 새로 도입된 기능
함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

useState

가장 기본적인 Hook, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌.
함수 컴포넌트에서 상태를 관리해야 한다면 사용하는 Hook

*예제*
  
<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>

import Counter1 from "./08/Hooks/Counter";

const App = () => {
  return (
    <Counter1 />
   );
};
export default App;

① 코드 상단에 import 구문으로 useState 불러옴
② const [value, setValue] = useState(0);

• useState 함수의 파라미터에 상태의 기본값(0)을 넣어줌
• 이 함수가 호출이 되면 배열을 반환
• 배열의 첫 번째 원소는 상태 값, 두번째 원소는 상태를 설정하는 함수
• 상태를 설정하는 함수에 파라미터를 넣어서 호출하면 setValue(value + 1)
  전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링
  

---

useState를 여러번 사용하기

하나의 useState 함수는 하나의 상태 값만 관리할 수 있음.
관리해야 할 상태가 여러개라면 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} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};
export default Info;

<App.js>
  
import Info from "./08/Hooks/Info";

const App = () => {
  return (
    <Info />
export default App;
  

✔ input 태그
value 속성 : 입력 태그의 초기 값
onChange 함수 : 이벤트가 변경됐을때 작동하는 함수