createPortal 이란? https://react.dev/reference/react-dom/createPortal createPortal – React The library for web and native user interfaces react.dev 리액트에서 제공하는 메서드로써 UI요소를 DOM 계층 구조에서 분리된 다른 DOM 노드로 렌더링 할 때 사용되는 메서드입니다. 일반적으로 모달,드랍다운메뉴,툴팁 등 과 같이 현재 컴포넌트와 관련이 없는 DOM 요소에 UI를 렌더링 할 때 사용되는 메서드입니다. 구현 비하인드...😃 프로젝트 초창기 역할분담을 했는데 제가 아닌 다른팀원분이 모달이 구현해 주기로 하셨습니다. 하지만 모달을 맡았던 팀원분이 구현을 해주셨지만 중간에 하차를 하게되었습니다...
사이드프로젝트에서 채팅룸에 현재 참여하고 있지 않은 유저들을 닉네임으로 검색한 후 초대하는 기능을 구현하였습니다. 검색된 유저들을 불러오는건 React-query의 useQuery를 사용하여 데이터를 fetching 하였습니다. import { getSearchedUserList } from '@/service/chatRoom'; import { useQuery } from '@tanstack/react-query'; export default function useGetSearchedUserList( roomId: string, nickname: string, ) { const { data, isLoading } = useQuery({ queryKey: ['searchedUserList', nickna..
현재 진행중인 사이드 프로젝트에서는 디자이너분들이 피그마에 작성해주신 디자인 시스템이 있습니다. 그리고 프론트엔드 개발자는 디자인시스템 스펙에 맞게 컴포넌트를 설계합니다. 저는 Dropdown 컴포넌트의 확장성 재사용성을 고려하여 컴포넌트를 설계하도록 노력하였습니다. 드랍다운 컴포넌트의 조건은 다음과 같습니다. 1. 특정 버튼(트리거)를 클릭하면 메뉴리스트박스가 아래로 내려오면서 렌더링 되어야한다. 2. 메뉴아이템의 특정 이벤트가 있다면 해당 이벤트가 수행되어야한다. 3. 어디서든 쉽게 사용가능 하도록 구현해야한다. 4. 커스텀 및 확장이 쉬워야 한다. 저는 이조건들에 맞는 디자인 패턴인 Compound pattern 을 사용하여 Dropdown 컴포넌트를 설계해보았습니다. 1.드랍다운 컴포넌트의 상태를..
채팅방을 생성하는 모달입니다. 현재 게시물에선 해시태그를 어떻게 구현했는지에 대해서 설명할것이기 때문에 해시태그 관련된 코드만 어떻게 구현했는지에 대해 설명하겠습니다. const [tag, onChangeTag, reset] = useInput(''); const [tagList, setTagList] = useState([]); 해시태그를 관리하는 컴포넌트입니다. tag : 현재 input의 입력된 value onChangeTag : value 변환시 계속 업데이트해주는 함수 reset : value 초기화 함수 tagList : 태그 리스트를 관리하는 string 배열의 상태 setTagList: 태그 리스트 상태변경해주는 상태변경함수. input의 value값은 커스텀훅인 useInput을 사용하여..
