TIL-23-04-19

 

 

문제점

드롭박스 관련 작업을 하다가 기존 <select> <option>로 만들어진 드롭박스는 내가 원하는 css 스타일링을 하는데 한계가 있어 드롭박스를 직접 만들었다.

완성 후, 한가지 문제점을 발견! 

드롭박스 리스트 중 하나를 선택하지 않으면 드롭박스 창이 계속 켜진 상태로 유지되어있다는것!

내가 원하는건, 굳이 리스트 중 하나를 선택하지 않아도 다른 부분 클릭시 드롭박스 창이 사라지게 만드는것이다.

 

 

 

 

시도해본것 && 해결

일단 머리속에 떠오른건 useRef()훅,

이걸로 좌표를 찍어주고 현재 내가 클릭하고 있는 곳과, useRef로 찍어놓은 좌표의 위치가 다르면 드롭박스를 사라지게 만들면 되겠다는 생각으로 코딩을 해보았다.

 

 const dropLeftRef = useRef(null);
  <button className={styled.btn} onClick={leftBtnClick} ref={dropLeftRef}>
  
 
 const dropRightRef = useRef(null); 
  <button className={styled.btn} onClick={rightBtnClick} ref={dropRightRef}>
            
            
 const dropOutsideClick = (e) => {
    if (dropLeftRef.current !== e.target) {
      setLeftModal(false);
    } else if (dropRightRef.current !== e.target) {
      setRightModal(false);
    }
  };

드롭박스가 좌,우 2개가 존재했기에 각각 ref 좌표를 걸어준 후, 이걸 컨트롤하기위한 함수를 위와 같이 작성했다

좌표의 현재 위치과 클릭이벤트가 발생한 e.target을 비교해 각각의 드롭박스를 종료해주는 함수이다.

이 함수를 작성할때, 조금 고생한 점이  current라는 프로퍼티에 대해서 몰라서 고생했다

ref좌표가 찍혀있는곳과 클릭이벤트가 발생한 e.target을 비교하는것인데... 해당 좌표의 현재 위치를 어떻게 가지고 와야하는지가 도저히 떠오르지않았다... 그래서 바로 찾아보았다

그래서 current라는 프로퍼티를 알게되었고, 이리저리 고민했던게 무색할 정도로 바로 해결되어버렸다....1시간 가까이 고생했던것같은데...

 

 

 

 

알게된점

드롭박스는 무조건 <select> <option>태그로 만드는게 아니다!

내 입맛에 맞게 직접 만들수도있다는것! css스타일링도 훨씬더 맘에 들게 만들수있다..