[TIL] 프리온보딩 18일차 - 220520

원래 오늘 아침까지 각자 구현해보기로 하였으나 예상 외로 시간이 부족하여 하루 더 공부하며 개발해보기로 하였다.

 

 

1️⃣ input의 keydown 이벤트

input창에 커서가 있고 ArrowDown, ArrowUp, enter, escape를 누르면 이벤트가 실행되도록 하였다.

list의 focus를 주는 것은 우선 index값을 -1으로 줬다.

list의 첫번째 데이터가 0번째 데이터이기 때문에 ArrowDown을 누르면 0번째가 되도록 하기 위함이다.

const [index, setIndex] = useState<number>(-1)

 

ArrowDown을 누르면 index값을 +1하게 하였고, ArrowUp을 누르면 -1되게 하였다.

그리고 list의 마지막 데이터에 focus가 되어있을 때 ArrowDown을 누르면 index를 0으로 바꾸어 0번째 데이터로 다시 focus되게 하였고, 0번째 데이터에서 ArrowUp을 누르면 index를 -1하여 focus된게 없도록 처리하였다.

case 'ArrowDown':
  setIndex((prev) => prev + 1)
  if (listRef.current?.children[1].childElementCount === index + 1) setIndex(0)
  break
case 'ArrowUp':
  setIndex((prev) => prev - 1)
  if (index <= 0) setIndex(-1)
  break

 

아직 해결 못한 문제가 있는데 enter를 눌렀을 때 focus된 값이 input의 값으로 들어올 수 있도록 하고 싶었지만 li의 데이터를 어떻게 상위 컴포넌트로 어떻게 가져와야할지 아직 해결하지 못했다. 아래 console.log부분은 li의 값이 들어오긴 하나 코드가 지저분하고.. 옵셔널 체이닝때문에 변수로 저장되지 않는다..

 

1) map으로 <li>를 return하고 있는데 여기에 ref를 어떻게 지정할지?

2) 지정한 ref를 상위 컴포넌트로 가져와서 value값 사용

case 'Enter':
  console.log(listRef.current?.children[1].children[index].childNodes[1].textContent)
  break