lit-html 에서 readonly, checked, disabled, selected 설정

원문 : https://velog.io/@jerrynim_/lit-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-4n-%EB%B0%94%EC%9D%B8%EB%94%A9

 

 

다음과 같이 lit-html 을 사용한다고 해 보자..

import { html } from 'lit-html';

const sValue = "값1";

 

if (조건1) {

  return html`<input type="text" readonly value="${ sValue }">`

} else {

  return html`<input type="text" value="${ sValue }">`

}

 

위와 같은 코드를, 아래와 같이 (if 문을 없애고 변수에 담아서) 바꾸면 작동할까..?

const sReadonly = 조건1 ? 'readonly' : ''; (아래에선 생략)

return html`<input type="text" ${ sReadonly } value="${ sValue }">`

음.. 작동하지 않는다..

 

이렇게 하면 어떨까..?

return html`<input type="text" readonly="${ sReadonly }" value="${ sValue }">`

역시, 작동하지 않는다..

 

그러면, 맨 처음에 기술한 코드를 써야 할까..? 아니당..

return html`<input type="text" ?readonly="${ sReadonly }" value="${ sValue }">`

이제, 제대로 작동한다.

 

checked, disabled, selected 등도 마찬가지로 해 보시길..

(그런데. checked 는 상기 2번째 방법으로도 동작하는듯.. ? 를 사용하지 말라는 것은 아님)

 

?readonly="..." 적용시, 값이 제대로 동작하지 않는 케이스가 간혹 발생..

이 때, value="..." 를 .value="..." 로 변경하면 정상 작동..

.value="..."' 라고 하면, 우리가 알던 input 의 value 에 해당하고..

value="..." 라고 하면, type 등과 같이 속성의 하나로 인식하여 어디선가 오류가 발생.

결론은 아래와 같이 사용하라는 것.

return html`<input type="text" ?readonly="${ sReadonly }" .value="${ sValue }">`

 

그런데, input 에서와 달리 select 의 option 에서는,

html`<option value="...">...</option>` 이나

html`<option .value="...">...</option>` 이나 차이는 없는듯..

그래도 '.' 를 사용하시라..

 

여기에 이벤트를 입힐 때, 아래와 같이 하면 에러.

return html`<input type="text" v-on:keyup="..." ...>`

 

그러면, 어떻게 해야 하느냐..?

return html`<input type="text" @keyup="..." ...>`

const foo = () => {...} 라면..

@keyup="${ foo }"

 

그런데, style class src type 이런 속성에는 뭔가를 추가하지 않음.

 

이벤트를 넘겨준다면..

const foo = (e: Event) => { ... }

@keyup="${ (e) => foo(e) }"

keyup 했으니, e.target.value 를 사용하려 할 텐데..

<input value="123" @keyup="${ (e) => foo(e) }"> 라고 했을 때,

const foo = (e: Event) => {

  // e.target.value 이 적용되는듯 하다가도 제대로 동작하지 않을 때가 있음

}

따라서 아래와 같이 '.' 를 사용해야 함. 잊지 마시라..

<input .value="..." @keyup="${ (e) => foo(e) }">