1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React, { useState } from 'react';

function Counter() {
  // count: 현재 상태값, setCount: 상태를 변경하는 함수
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function NameInput() {
  const [이름, 이름변경] = useState('');

  return (
    <div>
      <input
        type="text"
        value={이름}
        onChange={(e) => 이름변경(e.target.value)}
        placeholder="이름을 입력하세요"
      />
      <p>안녕하세요, {이름 || '익명'}님!</p>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function UserForm() {
  const [사용자, 사용자변경] = useState({
    이름: '',
    나이: 20,
    취미: ''
  });

  const 정보수정 = (필드, 값) => {
    // 객체 업데이트 시 스프레드 연산자로 기존 값 복사 후 변경
    사용자변경({...사용자, [필드]: 값});
  };

  return (
    <div>
      <input
        value={사용자.이름}
        onChange={(e) => 정보수정('이름', e.target.value)}
        placeholder="이름"
      />
      <input
        type="number"
        value={사용자.나이}
        onChange={(e) => 정보수정('나이', Number(e.target.value))}
        placeholder="나이"
      />
      <select 
        value={사용자.취미} 
        onChange={(e) => 정보수정('취미', e.target.value)}
      >
        <option value="">취미 선택</option>
        <option value="reading">독서</option>
        <option value="sports">운동</option>
        <option value="coding">코딩</option>
      </select>
      
      <p>이름: {사용자.이름}, 나이: {사용자.나이}, 취미: {사용자.취미 || '없음'}</p>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

  // 함수를 전달하는 방식 (안전한 업데이트)
  const 한번증가 = () => {
    setCount(이전값 => 이전값 + 1);
  };

  // 연속으로 세 번 증가
  const 세번증가 = () => {
    // 각 호출마다 이전 상태를 기반으로 업데이트
    setCount(이전값 => 이전값 + 1);
    setCount(이전값 => 이전값 + 1);
    setCount(이전값 => 이전값 + 1);
  };

  // 🚫 이렇게 하면 안 됩니다! - 잘못된 방식
  const 잘못된증가 = () => {
    // 세 번의 호출이 모두 같은 count 값을 참조합니다
    setCount(count + 1); // count가 0이라면
    setCount(count + 1); // 여전히 0에 1을 더합니다
    setCount(count + 1); // 여전히 0에 1을 더합니다
    // 결과: 예상은 count가 3 증가하는 것이지만, 실제로는 1만 증가합니다!
  };

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={한번증가}>1 증가</button>
      <button onClick={세번증가}>3 증가 (올바른 방식)</button>
      <button onClick={잘못된증가}>3 증가 (잘못된 방식)</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function ExpensiveInitialState() {
  // 복잡한 계산이 필요한 초기값은 함수로 전달
  const [결과, 결과변경] = useState(() => {
    // 이 코드는 컴포넌트 첫 렌더링 시에만 실행됨
    console.log('복잡한 초기값 계산 중...');
    return 복잡한계산();
  });

  // 복잡한 계산을 시뮬레이션하는 함수
  function 복잡한계산() {
    let 결과 = 0;
    for (let i = 0; i < 1000; i++) {
      결과 += i;
    }
    return 결과;
  }

  return (
    <div>
      <p>계산 결과: {결과}</p>
      <button onClick={() => 결과변경(이전값 => 이전값 + 1)}>증가</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

function AsyncUpdate() {
  const [카운트, 카운트변경] = useState(0);

  const 버튼클릭 = () => {
    카운트변경(이전값 => 이전값 + 1);
    // 여기서 console.log(카운트)를 실행하면 아직 업데이트되지 않은 값이 출력됨
    console.log("업데이트 직후 (아직 반영 안됨):", 카운트);
    
    // setTimeout을 사용해 다음 렌더링 후 로그 확인
    setTimeout(() => {
      console.log("다음 렌더링 후:", 카운트);
    }, 0);
  };

  return (
    <div>
      <p>카운트: {카운트}</p>
      <button onClick={버튼클릭}>증가</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function TodoApp() {
  // 관련 상태를 개별적으로 관리
  const [할일목록, 할일목록변경] = useState([]);
  const [입력값, 입력값변경] = useState('');

  const 할일추가 = () => {
    if (입력값.trim()) {
      할일목록변경(이전목록 => [...이전목록, 입력값]);
      입력값변경(''); // 입력 필드 초기화
    }                  
  };

  return (
    <div>
      <input
        value={입력값}
        onChange={(e) => 입력값변경(e.target.value)}
        placeholder="할 일 입력"
      />
      <button onClick={할일추가}>추가</button>
      <ul>
        {할일목록.map((할일, 인덱스) => (
          <li key={인덱스}>{할일}</li>
        ))}
      </ul>
    </div>
  );
}