[FE] [06-05] 별글 컴포넌트 구현, 간단한 레이블 디자인

[MinboyKim]

📎 이슈번호

#42

📃 변경사항

사용자의 사진과 글 정보가 존재할 별글 컴포넌트를 PostStars라는 이름으로 구현했습니다.
PostStars 컴포넌트를 구현하면서 기존에 은하를 구성하는 더미 별들에 달려있던 모든 이벤트는 삭제했습니다. ❌ (onClick 이벤트 등)
PostStars 컴포넌트에 붙어 짧은 설명을 적은 레이블 컴포넌트 디자인을 간단하게 Emotion으로 구현해주었습니다. 현재는 폴더구조가 확정이 되지않아 같은 파일에 존재하지만 폴더구조가 확정이 되면 스타일 컴포넌트는 파일에서 분리하는 것이 좋을듯 합니다.

📌 중점적으로 볼 부분

원래 PostStars 컴포넌트는 서버로부터 전달받은 데이터를 기반으로 생성해야하지만, 현재는 더미데이터로 대체했습니다.

PostStars 컴포넌트는 은하를 구성하는 별 컴포넌트인 Star 컴포넌트를 재활용하는 방식으로 구현했는데, 이제 클릭이벤트 핸들러는 PostStars 컴포넌트에만 필요하므로 Star 컴포넌트에 존재하던 핸들러를 PostStars 컴포넌트로 올리고, props로 핸들러를 전달하는 방식으로 수정했습니다.

이 방식으로 수정할 때의 문제로, 현재 클릭 이벤트 핸들러에서는 Star 컴포넌트의 참조, 즉 ref가 필요한데 핸들러의 위치가 부모 컴포넌트인 PostStars 컴포넌트로 올라오면서 간단히 useRef만 가지고 연결하는 것은 불가능해졌습니다. 따라서 부모컴포넌트에서 생성한 ref를 props로 전달, 자식컴포넌트의 ref와 연결할 수 있게 해주는 forwardRef를 이용했습니다.

forwardRef로 Star 컴포넌트를 감싸주고 부모 컴포넌트에서 useRef로 생성한 meshRef를 Star 컴포넌트에 전달, mesh에 ref로 연결해주는 것을 통해 이제 PostStars에서도 Star 컴포넌트의 mesh에 대한 접근을 할 수 있습니다.

문제는 mesh에 대한 접근이 부모 컴포넌트인 PostStars 컴포넌트 뿐만아니라 Star 컴포넌트 자체에서도 useFrame훅을 통해 스케일을 조절하는 곳에서 필요하다는 것입니다. 하지만 이미 mesh에 대한 ref는 부모에게서 props로 전달받은 ref를 연결해주고 있으므로 Star 컴포넌트 자체에서 mesh에 대한 접근을 얻어올 방법이 없어보였는데, 구글링을 통해 방법을 알아냈습니다. 부모에게서 전달받은 ref를 인자로 커스텀 훅인 useForwardRef에 넘겨 자식컴포넌트에서 사용할 ref인 innerRef를 생성, 이제 이를 활용해 자식컴포넌트에서도 mesh에 접근할 수 있습니다.
추후 폴더구조가 확정되면 커스텀 훅은 분리가 필요해보입니다.

구현하던중 클릭 이벤트 핸들러에서 사용하는 ref가 사용자가 클릭한 mesh가 아니라, 항상 같은 mesh만 가져오는 버그를 경험했습니다. meshRef를 컴포넌트 단에서 한 번만 선언하여 생긴 문제였는데, dummyData.forEach 문 안으로 meshRef 선언문을 옮기는 것으로 일단은 해결했습니다. 하지만 이렇게 수정하면서 클릭이벤트핸들러의 선언도 forEach문 안으로 옮길 수밖에 없었고, 매 forEach의 콜백함수마다 반복하여 함수를 선언해야하는 상황이 되었습니다. 일단 문제는 해결되었으므로 그대로 두었지만 추후에 좀 더 나은 로직으로 개선이 필요해보입니다.

mesh에 대한 짧은 설명 글을 화면에 출력하기 위해 drei의 Html 컴포넌트를 활용했습니다. Html 컴포넌트의 children으로 원하는 HTML 태그를 넘기면 그를 캔버스에 그려주는데, 넘길 HTML 태그를 스타일링하면 캔버스에서도 스타일이 적용된 레이블을 볼 수 있습니다. 마찬가지로 추후 폴더구조가 확정되면 스타일 컴포넌트의 위치를 옮겨줄 필요가 있어보입니다.

🎇 동작 화면

2023-11-16.9.14.08.mov

💫 기타사항

facebook/react#24722
useForwardedRef 훅은 위 링크를 참고했습니다.

[qkrwogk]

넘흐예쁘네요..

[bananaba]

LGTM

[MinboyKim]

@KimGaeun0806 님의 리뷰대로 Early return 적용했습니다.
Star 컴포넌트를 사용하는 현재 방식보다는 PostStar 컴포넌트를 새로 만들어서 사용자 별글들을 생성하는게 좋을 것 같아요. 해당부분은 내일 이야기 해보시죠 🫡