붉은거위 노트 (redgoose note)

svelte 불편한점 (컴포넌트 class)

Nest
Blog
Category
Diary
Hit
389
Star
0

<Parent class="foo"/> 형식으로 하위 컴포넌트로 간단하게 사용할 순 없다.
컴포넌트가 기본적으로 여러개의 엘리먼트를 루트로 넣을 수 있기 때문에 props를 넘길 수 없나보다.

이리저리 방법을 찾아보면서 변수로 쓰던지 여러개의 class를 사용해보려 했지만 편법만 늘리는 방식일 것이다.
<Children class="bar {$$props.class}"> 형식으로 사용하면 .bar 클래스의 속성이 우선시 되어서 .foo속성은 강제적으로 !important를 사용해야해서 좋아 보이지는 않는다.
class 이름을 랜덤문자를 이용하는 특성 때문에 아직까지 딱히 좋은 방법이 생각이 안나서 스타일도 좀 번거롭지만 props로 컨트롤 하면서 컴포넌트 내부에서 모든 스타일을 처리해야 할것이다.

내부에서 사용하는 컴포넌트 스타일도 있지만 외부에서 적용시켜주는 스타일의 역할이 존재하기 때문에 알맞는 장소에서 적용되어 주는것이 자연스럽다고 생각하는데 이 부분이 아쉬운 점이고, vue는 이 점을 아주 자연스럽게 해소해 주었다.

svelte를 이제 막 작은 프로젝트로 뭔가 만들어보는 단계여서 도큐먼트 열어보면서 코드를 작성하고 있는데 아마도 치명적인 문제점들이 하나씩 드러날거 같다. 흠..