[React] 코드 보면서 공부하기 04

공부해볼 코드 01

1. 정답 단어 입력기

• 페이지 상단에 “정답 단어 적기”라는 제목과 함께 입력 필드가 표시됩니다.

• 사용자가 단어를 입력하면 입력된 값이 WordGame 컴포넌트에 전달됩니다.

• WordGame 컴포넌트는 사용자가 입력한 단어를 활용할 수 있도록 설계되었습니다. (이 부분은 추가 구현이 필요할 수 있습니다.)

2. 색상 선택 드롭다운

• “Pick Color”라는 제목 아래에 색상을 선택할 수 있는 드롭다운 메뉴가 표시됩니다.

• 현재는 기능이 구현되지 않았지만, 선택한 색상에 따라 페이지의 배경색을 변경하도록 확장할 수 있습니다.

3. 실시간 시계

• Clock 컴포넌트가 현재 시간을 표시합니다.

• 이 시계는 매초마다 업데이트되며, 사용자의 로컬 시간(예: HH:MM:SS)을 보여줍니다.

 

1121_1_clock.js

import { useEffect, useState } from "react"; // useEffect와 useState 훅 가져오기
import "./App.css"; // CSS 스타일 적용
import WordGame from "./WordGame"; // WordGame 컴포넌트
import Clock from "./Clock"; // Clock 컴포넌트

function App() {
  // 정답 단어를 저장하는 상태
  const [answerWord, setAnswerWord] = useState("");

  // 입력된 정답 단어를 업데이트하는 함수
  function handleAnswerWord(event) {
    setAnswerWord(event.target.value); // 사용자가 입력한 값을 answerWord로 설정
  }

  // 현재 시간을 저장하는 상태
  const [time, setTime] = useState(() => new Date());

  // useEffect로 매초마다 현재 시간을 업데이트
  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date()); // 매초마다 현재 시간으로 업데이트
    }, 1000);

    // 컴포넌트가 사라질 때 타이머 정리
    return () => clearInterval(id);
  }, []); // 빈 배열: 처음 렌더링될 때만 실행

  return (
    <div className="App">
      {/* 단어 입력 UI */}
      <h3>정답 단어 적기</h3>
      <input type="text" onChange={handleAnswerWord} />
      <br />
      <br />
      <br />
      <hr />
      {/* WordGame 컴포넌트에 정답 단어 전달 */}
      <WordGame answer={answerWord} />

      {/* 색상 선택 UI */}
      <h3>Pick Color</h3>
      <select>
        <option>lightcoral</option>
        <option>midnightblue</option>
        <option>rebeccapurple</option>
      </select>

      {/* Clock 컴포넌트에 현재 시간을 전달 */}
      <Clock time={time.toLocaleTimeString()} />
    </div>
  );
}

export default App;

 

Clock.jsx

// Clock 컴포넌트: Props로 전달된 시간을 화면에 표시
export default function Clock({ time }) {
  return <h1>{time}</h1>; // 전달된 시간 표시
}