리액트 투두리스트 만들기 (0편) : Header UI 만들기

 

 

안녕하세요 

리액트로 투두리스트를 만들어봅시다. 

 

 

 

만들어볼 TodoList는 다음과 같습니다! 

이 글은 한입크기 리액트 인프런 강의를 기반으로 합니다. 

 

 

 

---

1. 요소 간격 Gap (css) 주기 

 

우선 Header, Editor, List 이렇게 3개의 컴포넌트를 만들어줍니다. 

App.jsx

 

자 이렇게 3개의 컴포넌트를 App.jsx에서 호출해줍니다.

그리고 이것들을 묶는 div 태그가 있죠 ?

여기에 CSS를 적용해줄거에요 

 

왜냐하면 각 요소별로 간격을 주고 싶기때문이죠 

 

className은 Css 파일에서 . (점) 으로 제어할수있어요 .

App.css에 들어가서 className이 App인 요소들의 css를 수정하여봅시다. 

 

App.css

 

display : flex는 유연하게 요소의 배치 조절을 가능하게 합니다. 

flex-direction : column 은 열을 기준으로 요소가 배치되도록하구요 

gap:10px는 각 요소별로 10px의 갭(간격)을 두어 배치되도록 합니다. 

 

이렇게 하면 화면은 ? 

 

이렇게 이쁘게 갭이 생긴것을 확인할수있습니다! 

 

 

width 와 margin 을 주어 중앙에 배치되도록 만들었습니다. 

 

 

 

---

 

 

 

2. 헤더 구성하기 

 

 

Header.jsx

 

 

이모지도 잘 반영이 되네요 

오늘의 날짜는 new Date()를 통해서 불러옵니다. 

그냥 불러오면 에러가 발생하기 때문에 toDateString()을 통해 불러옵니다. 

 

 

다음 시간에는 className을 통해서 위 날짜의 색을 변경해보고 

다른 컴포넌트를 만들어보도록 하겠습니다.