테스트를 통과시키는 기본 컴포넌트 구현 - React로 시작하는 TDD 4편

Implementing Basic Component to Pass Tests - TDD with React Part 4

export default function Counter() {
  return (
    <div>
      {/* 아직은 아무 내용도 없는 빈 껍데기입니다 */}
    </div>
  );
}

export default function Counter() {
  return (
    <div>
      <p>현재 숫자: 0</p>
      <button type="button">+</button>
    </div>
  );
}

import { useState } from 'react';
 
export default function Counter() {
  // [상태] 숫자를 기억하는 메모리 상자(state)를 만듭니다. 초기값은 0입니다.
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    // [동작] 기존 값에 1을 더해줍니다.
    setCount(prev => prev + 1);
  };
 
  return (
    <div>
      {/* 고정된 숫자 0 대신, 변하는 값 count를 보여줍니다. */}
      <p>현재 숫자: {count}</p>
      
      {/* 버튼을 누르면 handleClick 함수가 실행됩니다. */}
      <button type="button" onClick={handleClick}>
        +
      </button>
    </div>
  );
}

npm test

 PASS  src/components/Counter.test.tsx
  Counter 컴포넌트 동작 테스트
    ✓ 초기값은 0이며, + 버튼을 누르면 숫자가 1 증가한다 (50 ms)

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part4