원티드 프리 온보딩 9일차 TIL

오늘은 ..

오늘은 착잡한 날입니다. 하려고 하는 것도 잘 안되고 뭔가 집중도 잘 안되는 날이었던 것 같다.

오늘 한 일

1. 일단 오늘은 react-portal을 이용해서 modal을 구현하였습니다.

     const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
     root.render(
         // 우리가 넣고 싶은 컴포넌트
     )

   React는 다음과 같이 id를 root로 가지는 엘리먼트 하위에 우리가 원하는 화면이 구현된다.

   ...
   <div id="root"></div>
   <div id="portal"></div>
   ...

   React Portal은 다음과 같이 정의 하여서 root의 하위가 아닌 독립적으로 component를 관리할 수 있다. 그러면 어떤 상황에 이용할 수 있을까? 공식 Docs에서는 overflow: hidden 이나 z-index를 사용하는 곳에서 사용하라고 나와있다. 즉, 일반적인 상황에서는 눈에 보이지 않는 Modal과 같은 컴포넌트를 구현할 때 사용하면 더욱 용이하게 구현할 수 있을 것같다. 아무래도 독립적으로 관리하는 것이 style 적용도 훨씬 쉽지 않을까?

2. 드래그 & 드랍
   드래그 & 드랍 친구 중에 드래그만 일부 구현하였다. eventListener에서 dragevent를 사용할지 mouseevent를 사용할지 아직 고민 중 이다.

   const handleDragStart = (event: MouseEvent<HTMLButtonElement>) => {
   	setPos([event.clientX, event.clientY])
   	setIsDragging(true)
   }
   const handleDrag = (event: MouseEvent<HTMLButtonElement>) => {
     if (isDragging) {
       const moveX = `${event.clientX - pos[0]}px`
       const moveY = `${event.clientY - pos[1]}px`
       event.currentTarget.style.position = 'fixed'
       event.currentTarget.style.transform = `translate(${moveX}, ${moveY})`
       event.currentTarget.style.zIndex = '9999'
       event.currentTarget.style.transition = 'opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s'
   	}
   }
   
   const hadleDragEnd = (event: MouseEvent<HTMLButtonElement>) => {
     setIsDragging(false)
     event.currentTarget.removeAttribute('style')
   }

   일단은 mouseDown에서는 일단 dragging을 체크하고 현재 마우스 위치를 저장합니다.
   그리고 mouseMove에서 움직이는 위치에 따라 button에 translate를 통해 내가 dragging하고 있는 아이템을 움직여줍니다.
   그리고 mouseUp을 하면 dragging을 끄고 제자리로 옮겨 놓습니다.
   일단은 여기까지만 구현하였고 내일 드래그하면서 자리 비우기나 드랍에 대해 고민해야 할 것 같습니다.

후기

쉽지 않았다. 하지만 내가 되고자하는 사람은 무조건 나보다 이 길을 먼저 걸어 갔고 포기하지 않았을 것이다.