코드스테이츠 프론트엔드 부트캠프 s2u4

usestate

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(42);
  const [name, setName] = useState('Taylor');
  // ...

하나 이상의 변수를 선언해야함

age = 초기상태
setAge = 변환해주는 함수

function handleClick() {
setName('Robin');
}

이런식으로 호출한다

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}   ///////  = > x 

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
} ////////// = >  o

이전 상태를 기준으로 업데이트 된다
위 코드처럼 쓰면 안됨

// 🚩 Don't mutate an object in state like this:
form.firstName = 'Taylor';

// ✅ Replace state with a new object
setForm({
  ...form,
  firstName: 'Taylor'
});

array는 읽기전용이라 복사해서 바꿔야함
원본 배열은 못바꾼다

////////////////////////////////////////////////

구성 요소에 다른 키를 전달하여 구성 요소의 상태를 재설정할 수 있습니다. 이 예에서 재설정 단추는 버전 상태 변수를 변경합니다. 이 변수는 양식에 대한 키로 전달됩니다. 키가 변경되면 React는 Form 구성요소(및 모든 하위 구성요소)를 처음부터 다시 작성하여 상태를 재설정합니다.

//////////////////////////////////////

필요한 값을 현재 특성이나 다른 상태에서 모두 계산할 수 있는 경우 중복 상태를 완전히 제거합니다. 너무 자주 다시 계산하는 것이 걱정된다면 메모 후크를 사용하는 것이 도움이 될 수 있습니다.

//////////////////////////////////////

어찌저찌 과제는 해결했는데
어떻게 활용하는건지 감이 안온다
조금 더 공부해야겠다