useState 심화

import React, { useState } from 'react';

function Counter() {
  // [현재 상태 값, 상태를 업데이트하는 함수] = useState(초기값);
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // 현재 값에 1을 더하여 업데이트
  };

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

setCount(prevCount => prevCount + 1);

import React, { useState } from 'react';

function BuggyCounter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // 같은 이벤트 핸들러 안에서는 두 호출 모두 같은 렌더의 count snapshot을 읽습니다.
    setCount(count + 1);
    setCount(count + 1); // 동일한 값으로 교체하는 업데이트를 두 번 큐에 추가
  };

  return (
    <div style={{ border: '1px solid #dc3545', padding: '15px', margin: '20px', borderRadius: '8px' }}>
      <h3>버그 있는 카운터</h3>
      <p>카운트: {count}</p>
      <button onClick={increment}>두 번 증가 시도</button>
      <p style={{ fontSize: '14px', color: '#666' }}>
        버튼 한 번에 두 번 호출해도 같은 snapshot을 사용하므로 '1'만 증가합니다.
      </p>
    </div>
  );
}

export default BuggyCounter;

import React, { useState } from 'react';

function FixedCounter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // ⭐️ 함수형 업데이트: 큐의 대기 중인 상태를 받아 다음 상태를 반환합니다.
    // 첫 updater의 반환값이 다음 updater의 입력이 됩니다.
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div style={{ border: '1px solid #28a745', padding: '15px', margin: '20px', borderRadius: '8px' }}>
      <h3>수정된 카운터</h3>
      <p>카운트: {count}</p>
      <button onClick={increment}>두 번 증가 시도</button>
      <p style={{ fontSize: '14px', color: '#666' }}>
        버튼 한 번 클릭 시 항상 '2'가 증가합니다.
      </p>
    </div>
  );
}

export default FixedCounter;

import React, { useState } from 'react';

function UserForm() {
  const [user, setUser] = useState({ name: '홍길동', age: 30, city: '서울' });

  const handleNameChange = (e) => {
    // ❌ 잘못된 방식: 객체를 직접 변경 (재렌더링 안 될 수 있음)
    // user.name = e.target.value;
    // setUser(user);

    // ⭕ 올바른 방식: 스프레드 문법(...)을 사용하여 새로운 객체 생성
    setUser({
      ...user, // 기존 user 객체의 모든 속성 복사
      name: e.target.value // name 속성만 새로운 값으로 덮어쓰기
    });
  };

  const handleAgeChange = (e) => {
    setUser(prevUser => ({
      ...prevUser,
      age: Number(e.target.value) // 숫자 타입으로 변환
    }));
  };

  return (
    <div style={{ border: '1px solid #00BCD4', padding: '15px', margin: '20px', borderRadius: '8px' }}>
      <h3>사용자 정보 편집</h3>
      <div>
        <label>
          이름:
          <input type="text" value={user.name} onChange={handleNameChange} style={{ marginLeft: '5px' }} />
        </label>
      </div>
      <div style={{ marginTop: '10px' }}>
        <label>
          나이:
          <input type="number" value={user.age} onChange={handleAgeChange} style={{ marginLeft: '5px' }} />
        </label>
      </div>
      <p style={{ marginTop: '15px' }}>
        현재 사용자: {user.name}, {user.age}세, {user.city}
      </p>
    </div>
  );
}

export default UserForm;

// ...
const [todoItems, setTodoItems] = useState([]);

// 할 일 완료 상태 토글 핸들러
const handleToggleComplete = (id) => {
  setTodoItems(
    // ❌ 잘못된 방식: item.completed = !item.completed;
    // ⭕ 올바른 방식: map()을 사용하여 새로운 배열 생성, 특정 아이템만 새 객체로 교체
    todoItems.map((item) =>
      item.id === id ? { ...item, completed: !item.completed } : item // 해당 아이템만 새 객체 생성
    )
  );
};

// 할 일 삭제 핸들러
const handleDeleteTodo = (id) => {
  setTodoItems(todoItems.filter((item) => item.id !== id)); // filter()를 사용하여 새 배열 생성
};

// 새 할 일 추가 핸들러
const handleAddTodo = (e) => {
  // ...
  const newTodoItem = { id: newId, text: newTodo, completed: false };
  setTodoItems([...todoItems, newTodoItem]); // 스프레드 문법으로 새 배열 생성
  // ...
};

import React, { useState } from 'react';

// 비용이 많이 드는 초기값 계산을 시뮬레이션하는 함수
function expensiveCalculation() {
  console.log('초기값 계산 중...');
  let sum = 0;
  for (let i = 0; i < 100000000; i++) {
    sum += i;
  }
  return sum;
}

function LazyInitCounter() {
  // ❌ 일반적인 초기값 설정 (매 렌더링 시 expensiveCalculation 호출)
  // const [count, setCount] = useState(expensiveCalculation());

  // ⭕ 지연 초기화: 순수한 initializer를 전달하여 초기화할 때만 호출
  const [count, setCount] = useState(() => expensiveCalculation());

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div style={{ border: '1px solid #ff007f', padding: '15px', margin: '20px', borderRadius: '8px' }}>
      <h3>지연 초기화 카운터</h3>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
      <p style={{ fontSize: '14px', color: '#666' }}>
        버튼으로 리렌더해도 초기값 계산 로그가 추가되지 않는지 확인하세요.
      </p>
    </div>
  );
}

export default LazyInitCounter;