5/13 TIL (React 개인과제 - 1일차)

Hwi·2024년 5월 13일

TIL

목록 보기

24/96

오늘은 React 개인과제를 진행하는 1일차
본격적으로 리액트를 배우는 과정에 들어서게 됐는데

일단 다른 건 다 그렇다 치고 useState 훅의 사용법을
아직도 정확하게 잘 모르겠다.. 아는듯 모르는듯 한 느낌이랄까

대충 const [id, setId] = useState(기본값)
라는 게 있다면 id가 기본값, setId가 변경될 값으로 생각하면
된다곤 하는데 아직 잘 써보진 못해서 감을 못 잡는 거 같다ㅠㅠ

일단 리액트 입문주차 개인과제의 목적은 이렇다.

과제의 목적, 구현해야 할 기능

과제 진행 시 요구사항 및 힌트

질문에 대한 답변, 주의사항, 셋업가이드

리액트 강의를 useState 부분까진 얼추 본 후에 과제를 진행하였는데, 일단 Ui는 이런 식으로 만들었다.

투두리스트를 만드는 요구사항에는 현재 날짜의 기능은 없었지만,
할 일을 등록하는 기능을 하는 웹페이지인 만큼 현재 날짜가 헤더에
출력되면 좋을 거 같아서 열심히 구글링해서 공부하면서 넣어봤다.

현재 날짜 코드

// 헤더 (날짜) 부분
function Header() {
  const date = new Date(); // 현재 날짜 
  const dateStr = date.toLocaleString('ko-KR', { 
    // 날짜 문자열 ex) 20xx년 x월 xx일
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  });

  const today = date.toLocaleString('ko-KR', { // 요일 생성 ex) 일요일
    weekday: 'long'
  });

  return (
  <div>
    <h1 className="date">
      🗓️ Today : {dateStr} - {today} 🗓️
      <h4 class ="ment">오늘 할 일을 내일로 미루지 말자! 🔥 </h4>
    </h1>
  </div>
  )
}