[miniProject] google Momentum 만들기_02(React)

저번에 이어서 오랜만에 글을 올립니다
18일 자격증 시험이 있어 일단은 그것에 집중하느라 블로그를 쓸 시간이 없습니다

 

이어서 제가 한 걸 보겠습니다

 

전체화면

검색 창 까지 봤었고 그다음은

 

현재 시간

시간 데이터는 자바스크립의 new Data라는 걸 이용하면 현재 표준시간을 전부 불러올 수 있습니다

 

// React
// 현재시간 component
function Nowtime() {
  let [realTime, realTimes] = useState("");
  useEffect(() => {
    setInterval(() => {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      realTimes(`${hours}:${minutes}`);
    }, 1000);
  })
  return (
    <>
      <div className="real-time">{realTime}</div>
    </>
  )
}

캡처 이미지

 

밑에 new Date() 보이시죠

저도 제대로 이해한 것은 아니지만

비어있는 State에 시간 데이터를 넣고 useEffect라는 Hook을 걸어 setInterval을 사용했습니다

setInterval은 자바스크립트에서 주기적으로 인자를 실행하는 함수입니다

저는 1초마다(1000) 실행하라고 했네요

 

 

스케줄(To do list)

이렇게 하루 동안 활동한 것을 적고 체크박스를 체크하면 밑줄 쫙!

 <div className='nice-day'>Have a nice day!</div>
      <div className='todo'>
        {/* input value */}
        <input id="inputText" type="text" placeholder='To do day' className='todo-text' onChange={(e) => {
          setInputvalue(e.target.value)
        }}></input>

        {/* todolist 발행기능 간단 */}
        <Button className='todo-Btn' variant="light" onClick={() => {
          let inputAlert = document.getElementById('inputText').value;
          if (inputAlert === "") {
            alert('내용을 입력해 주세요');
            return false;
          }
          todoCard();
        }}>Schedule</Button>
      </div>

      {/* todolist 반복문 map 사용했음 */}
      {todoList.map(function (a, i) {
        return (
          <div className='check-box col-md-4' key={i}>
            <Form.Check type="checkbox" onClick={() => {
              checkList(i)
              // setTextCheack([true, false, false]);
            }} />
            <p className='check-text'>{a}</p>
            {/* className 조건식 붙이기 어렵ㅠ 미완 */}
            {/* <p className={textCheack[i] === true ? 'check-text' : ""}>{a}</p> */}
          </div>
        )
      })
      }

todolist를 map반복을 통해 구현했지만 여기서 체크박스를 누르면 목록 전부가 눌러지는 현상이 발생

그렇게 이거 해결하느라 시간을 많이 소비했습니다

여기서는 사용하지 못했지만 이 방법 말고도

클래스에 삼항 연산자를 비교하는 방법도 있다고 합니다!

 

마지막 슬라이드 메뉴

 

이건 조금씩 추가해갈 메뉴들을 슬라이드 구현했습니다

 

React 찍먹이지만 나중에 라우터, 리덕스 상태 관리를 파다 보면 너무 어려울 거 같아 걱정입니다ㅠ

다시 정리할 때 깃헙 주소도 같이 올려놓겠습니다