---

useState

• function 컴포넌트의 상태를 관리하기 위해. (사용자 인터랙션 등 독정 관리 가능)
• React 16.8 이전 버전에서는 function 컴포넌트에서 상태 관리를 할 수 없었음.

state 만들기

• React에서 useState 함수를 임포트.
  import {useState} from 'react'
• useState 는 배열을 반환하는 함수.
• 반환한 배열의 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수. (Setter함수에 대한 내용은 여기)

function App() {
  const numberState = useState(0);
  const number = numberState[0];
  const setNumber = numberState[1];
  return <></>;
}

• 위와 같은 과정으로 만들지만, 배열의 비구조화 할당을 통하면 간결. (비구조화 할당에 대한 내용은 여기)

function App() {
  let [임의state명, 임의state변경함수명] = useState('임의state 값');
  return <></>;
}

사용예시

import React, { useState } from 'react';

// 카운터 앱.
function App() {
  // State 생성
  const [number, setNumber] = useState(0);
  // 1증가 함수
  const increase = () => {
    setNumber(number + 1);
  };
  // 1감소 함수
  const decrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
    </div>
  );
}

state 에서 객체 다루기

• state 에서 불변성을 가지지 않으면, 변경할 수 없음. (불변성에 대한 이야기는 여기)
• 확산연산자를 사용해서 불변성을 부여할 수 있는데,

// 로그인 정보를 가진 state
const [inputs, setInputs] = useState({
  id: 'hi',
  password: '1234',
});
// 비밀번호를 변경하는 함수
function valChange(e) {
  const { name, value } = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  });
}

state 사용하는 이유

• 값을 잠시 보관하는건 변수도 가능한데 state 를 쓰는 이유가 뭘까?

1. 값이 변하면 => 컴포넌트가 렌더링하는데, 이 과정에서 변수를 이용하면 상태를 초기화 하고 다시 그리지만, state 를 사용하면 이전에 설정한 값을 유지하면서 상태를 업데이트 할 수있게 해줌.
2. setState 를 호출하면 React의 가상돔이 자동으로 컴포넌트의 상태여부를 비교하고 변경 부분을 렌더링함.

• 예를 들어 컴포넌트 내에서 변수를 선언하면,

function MyComponent() {
  const count = 0;

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• 사용자가 버튼을 클릭하면 값이 바뀐것을 React가 찾고 다시 컴포넌트를 초기화하고 재랜더링 됨. 즉, 변하지 않음.
• 변수를 컴포넌트 밖에서 사용한다면 큰 문제가 없지만, 만약 컴포넌트 내부에서만 사용하는 변수를 컴포넌트 외부에 선언하게 되면 React의 큰 장점인 컴포넌트 재사용을 버리는 것.
• useState를 이용하면 정상작동함.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default MyComponent;

---