useState

렌더링 간에 데이터를 유지하고, 변수를 업데이트하고 컴포넌트를 다시 렌더링 하도록 하는 state setter 함수

🤔 지역 변수는 렌더링 간에 유지되지 않는다. 따라서 초기 선언 값으로 렌더링 된다. 또한, 지역변수를 변경해도 렌더링이 발생하지 않는다.
=> 렌더링 사이에 변경된 데이터를 유지하면서, 새로운 데이터로 컴포넌트를 렌더링 하도록 하기 위해서 필요한 기능이 useState 훅이다.

	import { useState } from 'react';
	const [state, setState] = useState(초기값);

state : 변수의 기능을 하며, 초기값이 세팅된다.
setState : setState() 의 형식으로 사용한다.

🤓 객체 state를 업데이트 하는 방법
객체 내부에 일부 데이터만 변경하고 싶을 때 spread 연산자를 사용해서 변경하면 된다.

	export default function Form() {
      const [person, setPerson] = useState({
        firstName: 'Barbara',
        lastName: 'Hepworth',
        email: 'bhepworth@sculpture.com'
      });
      
      function handleFirstNameChange(e) {
        setPerson({ ...person, firstName: e.target.value });
      }
    }

🤓 배열 state를 업데이트 하는 방법
배열을 직접 변경하는 방식이 아닌 새 배열을 변환하는 방식으로 업데이트 해야 한다.

	export default function Form() {
      const [data, setData] = useState([]);
      
      function handleDataUpdate(e) {
        setData([...data, e.target.value]);
      }
      
      function handelDeleteData(id) {
		let filterData = data.filter(v => v.id !== id);
		setData(filterData);
      }
    }