useState

가장 기본적인 hook이며,
함수형 컴포넌트 내에서 가변적인 상태를 갖게 함

 

기본 사용법

const [state, setState] = usestate(초기값);
usestate는 배열을 return하고, 이것을 구조분해할당으로 꺼냄.

state가 객체 데이터 타입인 경우엔 불변성을 유지해줘야 함

함수형 업데이트

setState((currentNumber)=>{
  return ccurrentNumber + 1;
})

수정할 값이 아니라 함수를 넣을 수 있다.
함수의 인자에서 현재 state를 가져올 수 있고,
메인 로직에서는 이 값을 변경하는 로직을 작성할 수 있음

차이점

• 배치 업데이트: 한꺼번에 변경된 내용들을 모아서 최종적으로 한 번만 실행
• 함수형 업데이트: 명령을 모아서 '한번씩' 실행시킴
  인자에 현재상태가 들어오고 바뀐 스테이트를 반환하기 때문에 계속해서 최신 값들을 유지할 수 있는것.

렌더링이 잦다! => 성능에 이슈가 있는 것
불필요한 렌더링을 피하기 위해서 한꺼번에 요청사항을 모아서 한 번만 처리하는게 렌더링을 줄일 수 있는 방법

// 기존 업데이트 방법 -> 결과1
// 배치성으로 처리 됨. 배치 업데이트
setNumber(number + 1)
setNumber(number + 1)
setNumber(number + 1)

// 함수형 업데이트 -> 결과3
setState((currentNumber)=> ccurrentNumber + 1)
setState((currentNumber)=> ccurrentNumber + 1)
setState((currentNumber)=> ccurrentNumber + 1)