State

State란?

import { useState } from 'react'

function Example(){
  const [count, setCount] = useState(0)
  return (
    <div>
      <p> 버튼을 {count}번 눌렀습니다. </p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  )
}

• State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.
• 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있음
• State 값이 변경되고 재렌더링이 필요한 경우, React가 자동으로 계산하여 변경된 부분을 렌더링

유의할 점

• State 값을 직접 변경하지 말기

// 잘못된 예시
<p> 버튼을 {count}번 눌렀습니다. </p>
<button onClick={() => count = count + 1}>클릭</button>

State 값을 직접 변경하게 되면 React가 Component를 다시 렌더링할 타이밍을 알아차리지 못함
반드시 setState 함수를 이용해 값을 변경 해야함 (setState 함수를 호출할 때, 재렌더링 명령이 떨어짐)

State를 변경하는 방법

1. setState 내에 변경할 값을 넣기

const [count, setCount] = useState(0)
setCount(count + 1)

2. setState에 함수 넣기

const [count, setCount] = useState(0)
setCount((current) => { // 매개 변수로 현재 값을 전달
  return current + 1 // 새로운 값을 반환
})

함수를 넣는 경우 함수가 반환(return)하는 값으로 State가 변경
현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법 권장

Object, Array 를 갖는 State를 만들 때 주의사항

obj 내부의 값이 변경되어도 obj 자체는 변경되지 않을 수 있음을 주의, React가 State의 변경을 감지하지 못함
이 경우, state가 변경되더라도 컴포넌트가 다시 렌더링되지 않음

{ ... current } obj 복사 후 (새로운 obj 생성) → newUser.grade 값을 새롭게 변경

[ POINT ] object 혹은 array 내의 일부 값만 바꿀 경우 실제 object 나 array 의 변경이 일어나는 것이 아니므로 React에서 State 값의 변경으로 인식하지 않아 재 렌더링 명령이 호출되지 않는다!