[⚛️] useState : 함수형 업데이트

useState

• setState에 값을 직접 넣어도 되지만 함수를 넣어 함수형 업데이트를 구현할 수 있다.

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

 

• 차이점
  • (기존)값 : 여러 명령을 모아서 한 번에 실행(+1을 100번 해도 +1만 됨)
  • 함수형 : 여러 명령을 모아서 순차적으로 실행(+1을 100번 하면 +100이 됨)
    
    
• 부모-자식 컴포넌트에서 state를 변경하려면?
  

1. count와 setCount를 넘겨주는 방법
2. setCount만 넘겨주는 방법

 

1. 불필요한 props전달

setCount(count + 1);

 

 

2. 함수형을 사용하기

setCount(prev => prev + 1);