092624 til

 

 

todo list 꾸미기 .. 

 

 

어제 없어졌던 투드리스트 입력하는 form 을 다시  연결해주고 컴포넌트를 분리해서 

 

꾸며주기를 했다 . 

 

보면서 따래했는데 뭔가 또 잘 안됨 .. 

 

styled-components 로 꾸며줌 

 

Styled Components는 React에서 CSS를 더 쉽게 사용할 수 있도록 도와주는 라이브러리다

 

보통은 CSS 파일을 따로 만들어서 사용하는데,

 

Styled Components를 사용하면

 

JavaScript 파일 안에서 CSS를 바로 작성할 수 있다는 장점 이있다 

 

컴포넌트마다 스타일을 지정할 수 있어서 코드가 더 깔끔해지고,

 

CSS 클래스 중복 문제도 줄어든다 

 

import styled from "styled-components";

const TodoDashboard = () => {

return (

<DashboardSection>

<DashboardHeader>

<h1>Todo Dashboard</h1>

</DashboardHeader>

<DashboardCardList>

<DashboardCard> 16<b /> New Task</DashboardCard>

<DashboardCard>3 <br />Completed</DashboardCard>

<DashboardCard>13<br />Pending</DashboardCard>

</DashboardCardList>

</DashboardSection>

);

};

export default TodoDashboard;

const DashboardSection = styled.section`

display: flex;

flex-direction: column;

gap: 4px;

` ;

const DashboardHeader = styled.div`

h1 {

font-size: 1.5rem;

}`;