useState 사용법

const [상태 변수, 상태 변경 함수] = useState(초기값);

 

1. 상태 변경 함수 (상태 변수 + 1);
2. 상태 변경 함수((현재값) => {
return 현재값 + 1;
});

→ 1번과 2번은 같다.

3. 이벤트핸들러 = {() => {
상태변경함수 {(상태변수 +1)};
상태변경함수 {(상태변수 +1)};
상태변경함수 {(상태변수 +1)};
//  총 1 증가
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
// (prev에 값이 쌓여서) 총 3증가 

// (배치 업데이트)

}}

 

배치 업데이트 (Batch Update): 
어떤 state를 변경시킬 때 한 번에 처리하는 리액트만의 알고리즘

4. const 파일명 = ({ 상태변수, 상태변경함수}) => { }

5.  배치 업데이트를 하는 이유
      1) 불필요한 리렌더링 방지