![]()
저번 시간에 Portal을 이용해 모달을 구현하려 했지만 상단 header바에 사용하기 적합하지 않다는 팀원의 의견을 반영해서 독립된 컴포넌트를 만들어 적용하기로 했다. 우선 헤더에 사용할 모달 컴포넌트의 코드를 보자 import { ReactComponent as HomeSVG } from 'assets/svg/home.svg'; import { ReactComponent as SettingSVG } from 'assets/svg/setting.svg'; import { ReactComponent as LogoutSVG } from 'assets/svg/logout.svg'; import { Link } from 'react-router-dom'; interface UserInfo { accountMo..
모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..
