[0514] TIL

오늘 배운 것~~

1. 리액트는 라이브러리

리액트가 프레임워크가 아니라 라이브러리라니!!

2. CSS 테마

이번 개인 과제는 어떻게 할지 대충 구상한 것이다 ㅎㅎㅎㅎㅎㅎ
추가 기능으로 테마를 넣어보려고 하는데~
이런 식으로 구현 중이다!

theme을 state로 설정해주고

const [theme, setTheme] = useState({ color: COLOR.BLUE, mode: MODE.LIGHT });

상위 컴포넌트에 className을 테마 색상으로 지정해준 후,

<div className={`app ${theme.color} ${theme.mode}`}></div>

색상을 변수처럼 지정해준 후

div.blue {
  --main-1: #e7f5ff;
  --main-2: #a5d8ff;
  --main-3: #4dabf7;
  --main-4: #228be6;
  --main-5: #1971c2;
}

색상을 이렇게 변수를 이용하여 설정해주면~

.app .todo-submit-btn {
  background-color: var(--main-2);
}

쉽게 테마를 지정해줄 수 있었다
와우와우와우!!!!!! 😫 미치따이

지금 기본 기능은 구현 다 해서 내일은 놀 수 있을 것 같다....ㅎㅎㅎ
(내일은 휴일이니 봐줘잉)