<ul> 과 <li> 태그를 사용하여 커스텀으로 select 태그 기능을 구현하려고 합니다.

https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.mouseevent.html#target 이미 MouseEvent<HTMLLIElement>로 타입을 명시했는데도, 또 as HTMLLIElement를 붙였을 때만 타입검사를 통과한 이유는, MouseEvent<A> 인터페이스의 target이 null일 수 있기 때문인 것 같습니다. 코드에서 null여부를 한번 걸렀다면, as HTMLLIElement없이도 컴파일 되었을 것 같아요. 예를 들어, 1. if (event.target) { event.target.value } 블럭으로 null이 아닐 때만 해당 작업을 하도록 걸어주거나, 2. event.target?.value 같이 표현해도 컴파일은 될 것 같습니다. 3. 또는, target이 반드시 있을 거란 가정하에, event.target!.value도 괜찮겠죠 (사실 as HTMLLIElement가 이 역할을 한 것) 어느쪽이든, li에 있는 value에 접근하는 것은 문제가 없어보입니다. 다만, <select> <option>태그로 하고, onChange 이벤트 핸들러를 걸 일을, 왜 ul/li로 하는가에 대해서는 의문이 남네요.

HTML5에서는 value 속성이 ' li ' 요소에 대한 리스트 아이템 값으로 사용되지만, React에서는 ' value ' 속성이 ' input ' 요소에서 사용되므로 ' li ' 요소에서 ' value ' 속성을 사용하여 값을 설정하면 문제가 될 수 있습니다. 따라서, ' data-* ' 속성을 사용하여 값을 설정하고 가져오는 것이 좋습니다. 예를 들어, ' data-value ' 속성을 사용하여 값을 설정하고, ' event.target.dataset.value '를 사용하여 해당 값을 가져올 수 있습니다. 코드는 아래와 같이 수정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
interface Iprops {
  options: { name: string; value: string }[];
  setSelected: any;
  setDropdown: any;
  style: {};
}

const COptions: React.FC<Iprops> = ({ options, setSelected, setDropdown, style }) => {
  const clickHandler = (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
    let value = event.currentTarget.dataset.value;
    let name = event.currentTarget.innerText;
    setSelected(name);
    setDropdown(false);
  };

  return (
    <ul className="COptions border-box absolute" style={{ ...style }}>
      {options.map((el, i) => {
        return (
          <li key={`opt${i}`} data-value={el.value} onClick={(e) => clickHandler(e)}>
            {el.name}
          </li>
        );
      })}
    </ul>
  );
};

export default COptions;