오늘 배운 것

scss 모듈화를 배웠다!

// _variables.scss
$hour-height: 48px;
$grid-line: #dadce0 1px solid;
$today-color: #1a73e8;

변수만 담아서 모듈화 했다. 파일이름 앞에는 언더스코어를 넣어 줘야 한다.

//main.scss
@import "variables";
@import "backgroundGrid","dayWeekHead","day";

body {
  font-size: 14px;
  overflow: hidden;
  height: 100%;
  background-color: #fff;
}
.yoil.today{
    color: $today-color;
}

불러오기 위해서는 @import에 언더스코어를 제외한 문자열만 입력해주면 된다! 너무 편하다.

조건문으로 클래스 네임 추가하기

<div className = {"yoil"+(isToday ? ' today':'')}>

삼항연산자를 사용해서 isToday의 불린값에 따라 클래스네임을 추가 하는 법을 배웠다. 다른날의 속성을 가진 컴포넌트 말고 오늘을 속성으로 가지고있는 컴포넌트에만 css 효과를 다르게 주고 싶어서 이 방법을 썻다.