[TIL] 03.12 enum tpye, as, sass 간단 정리

 

align을 타입 지정할때 아래와 같이 지정을 하면 길어지기도 하고 다른 요소를 추가할때 일일이 다 적어주어야 하는 불편함이 있다. 

그래서 enum 타입을 지정하여 한번에 받도록 변경해 주었다. 코드가 훨씬 짧아지고 가독성도 높일수 있고 재사용성도 가지게 되었다. 

interface button {
	align: left | center| right
}

//enum type
enum AlignLocation{
    LEFT = 'left',
    CENTER = 'center',
    RIGHT = 'right',
}

interface button {
	align: AlignLocation
}

enum  참고 블로그 

 

component의 태그를 결정하여 렌더 시켜주는 부분이 있었는데 타입스크립트로 바꾸면서type을 만들어주어야 했다. 

as는 타입을 대체 시켜주는 역할을 한다. 

const TitleComponent = level ? 'h'+level : 'div';

	// 타입으로 변경할 시 컴포넌트에 STRING이 들어갈수 없으므로
	// 에러가 난다 타입스크립트에서 볼 때는 잘못된 사용이다.

type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

	//타입을 만들어서 사용하면 해결책이 될 수 있다. 

const TitleComponent = Component as Typography.HeadingTag | 'div';

 //as는 타입을 재체시켜 준다. 

type 단언 참고 블로그 : https://hyunseob.github.io/2017/12/12/typescript-type-inteference-and-type-assertion/

 

sass 간단 정리

 

1. & : 자기 자신을 가르킨다. 

2. classnames: className을 나열 가능 

return <button className={classNames('Button', size, color)}></button>;

3.mixin:  매개변수 값($size)를 받을수 있다. 

@mixin button-color($color) {
  background: $color;

  &:hover {
    background: lighten($color, 10%);
  }
  &:active {
    background: darken($color, 10%);
  }
}

//호출하는 경우 
 &.blue {
    @include button-color($blue);
  }

  &.gray {
    @include button-color($gray);
  }

  &.pink {
    @include button-color($pink);
  }

참고 블로그 : https://velog.io/@johnque/Sass-%EA%B8%B0%EC%B4%88