[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드 21일차(과제 제출)

📝숙제

import React, { useState, useEffect } from 'react';
const Background = () => {
  const imageUrls = [
    "./img/img1.jpg",
    "./img/img2.jpg",
    "./img/img3.jpg",
    "./img/img4.jpg",
    "./img/img5.jpg",
    "./img/img6.jpg",
    "./img/img7.jpg",
  ];
  useEffect(() => {
    const changeBackground = () => {
      const randomIndex = Math.floor(Math.random() * imageUrls.length);
      const imageUrl = imageUrls[randomIndex];
      document.getElementById("background").style.backgroundImage = `url('${imageUrl}')`;
    };
    changeBackground();
    const interval = setInterval(changeBackground, 5000);
      clearInterval(interval);
    };
  }, []);
  return <div id="background"></div>;
};
const Clock = () => {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  const hours = time.getHours();
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  return <div id="clock">{hours} : {minutes} : {seconds}</div>;
};
const WelcomeComponent = () => {
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('');
  const addToWelcome = () => {
    setGreeting(`좋은 아침입니다. ${name}님`);
    setName('');
  };
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      addToWelcome();
    }
  };
  return (
    <div id="welcome">
      <input
        id="nameInput"
        type="text"
        name="name"
        placeholder="이름을 입력하세요"
        value={name}
        onChange={(event) => setName(event.target.value)}
        onKeyPress={handleKeyPress}
      />
   {/* input에서 value는 초기값을 설정한다. 단, 사용자가 직접 지우고 입력해야한다는 단점이 있다. 
       onChange는 input 안의 값이 변경될 때 발생한다. 실행시켜서 input에 글자를 적으면 setName안의 글자가 input안의 글로 바뀌게 된다.  */}
      <button onClick={addToWelcome}>입력</button>
      <div id="greeting">{greeting}</div>
    </div>
  );
};
const ToDoList = () => {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const addToList = () => {
    if (inputValue.trim() !== '') {
      setTasks((prevTasks) => [...prevTasks, inputValue]);
      setInputValue('');
    }
  };
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      addToList();
    }
  };
  return (
    <div id="to-do">
      <input
        type="text"
        id="whatToDo"
        name="whatToDo"
        placeholder="할 일을 입력하세요"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
        onKeyPress={handleKeyPress}
      />
      <button onClick={addToList}>추가</button>
      <h2>오늘 할 일</h2>
      <ul id="ToDoList">
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
};
const App = () => {
  return (
    <div>
      <Background />
      <Clock />
      <WelcomeComponent />
      <ToDoList />
    </div>
  );
};
export default App;

## 🧩결과
>사진이 또 안 되네 다시 시도 해보기


## 📍숙제를 하면서 느낀 점
>왜 이미지가 안 들어가는지 체크 후 수정하기
<br><br>

_본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다._
<br>
#IT개발캠프 #React #개발자부트캠프 #리액트 #리액트캠프 #부트캠프 #스나이퍼팩토리 #웅진씽크빅 #유데미 #인사이드아웃 #프로젝트캠프 #프로젝트캠프후기