Portfolio

🔍 배경 및 궁금증

리액트를 공부하다가 문제점을 맞닥뜨렸다. 바로 메뉴 만들기!

호오... 마치 노션처럼, 미트볼 메뉴를 클릭했을 때, 메뉴를 자유자재로 렌더링시키고 싶었다.

하지만 나는, div 안에 <미트볼메뉴/>와 <더보기메뉴/>를 만든 상태였다.

이에 대한 문제점은 다음 2가지였다.

따라서 이를 해결하기 위해 공식 문서를 찾아보기로 했다.

일단 내가 접근한 아이디어는 다음과 같았다.

React 공식문서에는 createPortal이라는 ReactDOM.method에 대한 소개가 있었다.

이는 다음과 같았다.

따라서 이 값을 정확하게 입력 후 도출되는 결과는, container 안에, child가 들어가도록 하는 것이다. 어느 위치에서 선언을 했던지 말이다.

따라서 이를 이용한다면, document.body에서 전체 크기에 맞는 일종의 전체 페이지 크기의 컴포넌트를 생성 가능했다.

먼저 엘리먼트를 DOM에 추가시켜주자.

이후, active가 되었다면 이 친구를 el에 담아서 렌더링시켜줄 수 있다.

먼저 내가 클릭하였을 때 발생하는 이벤트를 뜯어보기로 했다.

내가 만약 클릭한다면, 이벤트 객체에서 clientX와 clientY라는 속성에서 마우스 위치를 도출함을 확인했다.

따라서, 이를, 렌더링할 때마다 감시해주어 위치 상태 값을 변화시켜주면 된다!

이에 대한 코드는 다음과 같다.

useMemo vs useRef