React.js는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로, 복잡한 웹 애플리케이션을 손쉽게 구축할 수 있도록 도와줍니다. 이번에는 React.js를 활용하여 간단한 숫자 맞추기 게임을 만들어보겠습니다. 이 프로젝트를 통해 React의 기본적인 사용법과 상태(State), 속성(Properties)에 대한 이해를 높일 수 있습니다.
## 프로젝트 설정
먼저, Create React App 명령어를 사용하여 프로젝트 설정을 시작하겠습니다.
```bash
npx create-react-app number-guessing-game
cd number-guessing-game
npm start
```
위 명령을 실행하면 기본적인 React 환경이 구축되고, 애플리케이션이 로컬 서버에서 실행됩니다.
## 컴포넌트 만들기
React의 장점 중 하나는 컴포넌트를 사용해 UI를 모듈화할 수 있다는 점입니다. 우리의 게임은 숫자를 입력 받는 인풋 필드와 결과를 출력하는 메시지, 그리고 시도를 기록하는 카운터로 구성됩니다. 각각의 부분을 컴포넌트화 해보겠습니다.
```jsx
// src/components/GuessingGame.js
import React, { useState } from 'react';
const GuessingGame = () => {
const [targetNumber] = useState(Math.floor(Math.random() * 100) + 1);
const [guess, setGuess] = useState('');
const [message, setMessage] = useState('');
const [attempts, setAttempts] = useState(0);
const handleChange = (e) => {
setGuess(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
const guessNumber = parseInt(guess, 10);
setAttempts(attempts + 1);
if (guessNumber === targetNumber) {
setMessage('축하합니다! 정답입니다.');
} else if (guessNumber < targetNumber) {
setMessage('더 큰 수를 입력하세요.');
} else {
setMessage('더 작은 수를 입력하세요.');
}
};
return (
<div>
<h1>숫자 맞추기 게임</h1>
<form onSubmit={handleSubmit}>
<input type="number" value={guess} onChange={handleChange} />
<button type="submit">맞춰보기</button>
</form>
<p>{message}</p>
<p>시도 횟수: {attempts}</p>
</div>
);
};
export default GuessingGame;
```
### 예제 설명
위의 `GuessingGame` 컴포넌트는 다음과 같은 기능을 갖고 있습니다:
- **상태 관리:** React의 `useState` 훅을 사용해 입력된 숫자, 결과 메시지, 시도 횟수를 상태로 저장합니다.
- **이벤트 처리:** 사용자가 숫자를 입력하고 제출할 때의 로직을 처리하는 `handleSubmit` 함수가 포함되어 있습니다.
- **게임 로직:** 사용자가 입력한 숫자를 목표 숫자와 비교하여 적절한 메시지를 표시합니다.
## App 컴포넌트와 합치기
이제 `GuessingGame` 컴포넌트를 우리의 기본 `App` 컴포넌트와 결합하겠습니다.
```jsx
// src/App.js
import React from 'react';
import GuessingGame from './components/GuessingGame';
const App = () => {
return (
<div className="App">
<GuessingGame />
</div>
);
};
export default App;
```
`App` 컴포넌트는 `GuessingGame` 컴포넌트를 렌더링하는 역할을 합니다.
이제 브라우저를 열어 숫자 맞추기 게임을 즐길 준비가 되었습니다! 이 작은 프로젝트를 통해 React.js의 기본 컨셉을 배우고 상태를 관리하는 방법을 이해할 수 있게 됩니다. 추가적인 기능을 더하여, UI를 개선하거나, 결과를 더 자세히 보여주는 등의 확장도 고려해보세요.