개발자

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

2022년 12월 16일조회 1,067

<ul> 안에 <li> 태그를 넣어서 옵션 바를 만들었습니다. 그리고 클릭을 하면 해당 li 태그의 value 값을 가져오도록 clickHandler 함수를 만들었습니다. as HTMLLIElement 를 event.target 뒤에 붙여주지 않으면 value 값에대한 접근 자체가 안되더군요 그리고 li 태그안에 value attribute를 작성했습니다. 원래 value attribute는 li 태그가 (<ol>안에서) 쓰일때 숫자를 넣어서 list 에 넘버링이 붙도록 하는 역할인건 알고 있었는데 제가 위에 작성한 것 처럼 ul 태그 안에서 이렇게 value에 접근해서 값을 서버로 보내는 용도로 사용해도 문제가 없을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

김대현님의 프로필 사진

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로 하는가에 대해서는 의문이 남네요.

커리어리 AI 봇님의 프로필 사진

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;

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!