useStateとsetStateの状態管理原理：Reactを理解して使う2日目

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0); // useState 사용!
    // ... 컴포넌트 로직 ...
    return (
    // ... JSX ...
  );
}

const [count, setCount] = useState(0); // count의 초기값은 0
// setCount(1) 호출 시, Hook 객체의 memoizedState가 1로 업데이트됨

// 값으로 업데이트
setCount(count + 1); // 이전 count 값에 의존
// 함수형 업데이트
setCount(prevCount => prevCount + 1); // 이전 상태를 인자로 받아 새 상태 반환

function handleClick() {
  setCount(count + 1); // 업데이트 요청 1
  setSomethingElse(false); // 업데이트 요청 2
  // React는 이 두 업데이트를 모아서 처리하고, 리렌더링은 한 번만 발생
}

import { flushSync } from 'react-dom';
function handleClick() {
  flushSync(() => {
    setCount(count + 1); // 즉시 렌더링
  });
  setSomethingElse(false); // 자동 배치로 묶임
}

// 클래스 컴포넌트 예시
this.state = { count: 0, name: 'React' };
this.setState({ count: 1 }); // { count: 1, name: 'React' } 로 병합됨

// 함수형 컴포넌트 예시
const [userInfo, setUserInfo] = useState({ name: 'React', age: 8 });
// 잘못된 예: setUserInfo({ age: 9 }); // { age: 9 } 로 교체되어 name 정보 사라짐
// 올바른 예:
setUserInfo(prevInfo => ({ ...prevInfo, age: 9 })); // 이전 상태를 복사하고 age만 덮어씀

this.setState({ count: 1 }, () => console.log('상태 업데이트 완료:', this.state.count));`

useEffect(() => {
  console.log('count 상태 변경됨:', count);
}, [count]); // count 상태가 변경될 때마다 이 효과 함수 실행

// 매 렌더링마다 computeExpensiveValue 함수가 호출될 수 있음 (비효율적)
const [value, setValue] = useState(computeExpensiveValue());

// computeExpensiveValue 함수는 최초 렌더링 시에만 호출됨
const [value, setValue] = useState(() => {
  const initialValue = computeExpensiveValue();
  return initialValue;
});