[Solid] Syntax | 06. classList

Solid는 class를 사용해 엘리먼트의 className을 설정할 수 있습니다.

const [current, setCurrent] = createSignal('bar');

// current signal값이 foo라면 class='selected'로 설정합니다.
<button
  class={current() === 'foo' ? 'selected' : ''}
  onClick={() => setCurrent('foo')}
>foo</button>

여기서 class 대신 classList를 사용하면 조건문을 좀 더 편리하게 작성할 수 있습니다.

classList는 {class이름 : 조건} 형식의 객체입니다.

조건이 참이면 class이름을 반환하고, 거짓이면 삭제됩니다.

const [current, setCurrent] = createSignal('bar');

// current signal의 값이 'foo'이면 className='selected'가 됩니다.
<button
  classList={{selected: current() === 'foo'}}
  onClick={() => setCurrent('foo')}
>foo</button>

CSS 모듈에서 받은 이름을 동적으로 적용할 수도 있습니다.

import { active } from "./style.module.css"

<div classList={{ [active]: isActive() }} />