React에 addEventListener 사용 오류

[서유빈]

안녕하세요.

useEffect() 속에 addEventListener 이벤트를 사용하는데 에러는 없지만 
작동이 되다가 안되다가 합니다..(특정 실행조건이랄게 없습니다..거의 안된다고 볼 수 있음)

코드는 
useEffect(()=>{
const label = document.querySelector('.label');
const options = document.querySelectorAll('.optionItem');
const handleSelect = function(item) {
label.innerHTML = item.textContent;
label.parentNode.classList.remove('active');
 }
options.forEach(function(option){
option.addEventListener('click', function(){handleSelect(option); setList(false);})
 })
 }) 

[codingapple]

option태그엔 클릭이벤트 안일어날걸요 
select태그에 change 이벤트리스너같은거 붙입시다
useEffect뒤에 [] 도 추가하는게 나을듯요

[서유빈]

options.forEach(function(option){
option.addEventListener('click', function(){handleSelect(option); console.log(0);})
 })
이부분에서 click 이벤트 실행시 console 창에도 0이 잘찍히는데, 이제 값을 전달한 뒤 list 창을 닫으려고 하는 setList(false);를 뒤에 넣어주면 실행이 되지 않는 것 같습니다.
값을 넘긴 후에 리스트 창을 다시 닫으려는 코드를 어디에 추가하면 좋을까요?

[codingapple]

option 태그말고 select태그 찾아서 change 이벤트리스너 안에 코드짭시다

[서유빈]

선생님 제가 정말 이해가 안가서 그러는데요... 
전체 코드가 이건데 

import { useEffect, useState } from "react";
import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
import Dropdown from "./Dropdown";

function SelectBox() {
let [list, setList] = useState(false);

useEffect(()=>{
const label = document.querySelector('.label');
const options = document.querySelectorAll('.optionItem');
// 클릭한 옵션의 텍스트를 라벨 안에 넣음
const handleSelect = function(item) {
label.innerHTML = item.textContent;
label.parentNode.classList.remove('active');
 }
// 옵션 클릭시 클릭한 옵션을 넘김
options.forEach(function(option){
option.addEventListener('click', function(){handleSelect(option);console.log(0);})
 })
 }, )

return ( 
<div className='selectBox'>
<button className='label' onClick={()=>{setList(!list)}}>选择程度<span className="icon">{list ? <BiUpArrow size={20}/>:<BiDownArrow size={20}/>}</span></button>
<Dropdown list={list}>

<li className='optionItem'>1 级
<li className='optionItem'>2 级
<li className='optionItem'>3 级
<li className='optionItem'>4 级
<li className='optionItem'>5 级
<li className='optionItem'>6 级
<li className='optionItem'>7 级
<li className='optionItem'>8 级
<li className='optionItem'>9 级
<li className='optionItem'>10 级

</Dropdown>
</div>
 )
}export default SelectBox;

제가 select와 option 태그를 사용하지 않아서요... 아니면 제가 이해를 잘못하고 있는건가요...?ㅜㅜ

[codingapple]

이벤트리스너안에선 state변경 잘안될수도 있어서 
현재 li태그들 상태 저장할 state 만들고
state에 따라서 li 태그들 어떻게 클래스명 보일지 if문같은거쓰고
li 클릭시 state 원하는대로 변경합시다

[글쓴이]

글