React 카운터

🖥️ 실습: 간단한 카운터 앱 만들기

이번 실습에서는 useState를 사용하여 간단한 카운터 앱을 만들어 보겠습니다. 이 앱은 버튼을 클릭하여 카운트를 증가시키거나 감소시키는 기능을 제공합니다.

📜 코드 설명

아래 코드를 사용하여 간단한 카운터 앱을 만들 수 있습니다.

import { useState } from 'react';

function CounterApp() {
  // 상태 변수 count와 그 값을 변경할 setCount 함수 선언
  const [count, setCount] = useState(0);

  // 카운트를 증가시키는 함수
  const increment = () => setCount(count + 1);

  // 카운트를 감소시키는 함수
  const decrement = () => setCount(count - 1);

  return (
    <div style={{textAlign: 'center', padding: '50px', fontFamily: 'Arial, sans-serif'}}>
      <h1>카운터 앱</h1>
      <p>현재 카운트: {count}</p>
      <button 
        onClick={increment} 
        style={{padding: '10px 20px', margin: '10px', backgroundColor: '#61dafb', border: 'none', borderRadius: '5px', color: 'white', cursor: 'pointer'}}
      >증가</button>
      <button 
        onClick={decrement} 
        style={{padding: '10px 20px', margin: '10px', backgroundColor: '#e74c3c', border: 'none', borderRadius: '5px', color: 'white', cursor: 'pointer'}}
      >감소</button>
    </div>
  );
}

export default CounterApp;
  

📝 코드 설명

• useState(0): 카운트의 초기 값을 0으로 설정합니다.
• increment: 카운트를 1씩 증가시키는 함수입니다.
• decrement: 카운트를 1씩 감소시키는 함수입니다.
• 두 개의 버튼은 각각 카운트를 증가시키거나 감소시키는 기능을 합니다.

🎯 실행 결과

앱을 실행하면 화면에 카운트 값이 표시되며, 증가와 감소 버튼을 클릭하여 카운트를 변경할 수 있습니다.