React8 React - Lucide React, Radix Icon, 아이콘 컴포넌트처럼 사용하기 React의 다양한 라이브러리 중에 아이콘을 편하게 사용할 수 있도록 지원해 주는 라이브러리가 있어요! Lucide React, Radix Icon을 컴포넌트처럼 사용하는 방법을 알려드릴게요. 현재 맞닥뜨린 상황 아이콘을 사용할 때마다 아이콘의 이름을 매번 import 하는 것이 너무 싫었어요. 하나의 컴포넌트에서 다양한 아이콘을 사용한다면 import 한 아이콘들의 이름이 길어질 상황이 예상되었어요. lucide 공식문서 예시코드 import { Camera } from 'lucide-react'; const App = () => { return ; }; export default App; Radix Icon 공식문서 예시코드 import { FaceIcon, ImageIcon, SunIcon } fr.. 2023. 9. 23. React - Tab 컴포넌트 만들기 이전에 블로그에 적었던 버튼 클릭 후 원하는 컴포넌트를 렌더링 하는 방법을 고도화했어요 구현 목표 - Headless 기반으로 제작하여 원하는 방식으로 스타일을 지정할 수 있도록 대응 - 키보드 이벤트를 추가해서 화살표 이동에 따라 TabItem이 Focus가 되어 해당 Tab의 값에 따라 원하는 컴포넌트를 렌더링 구현 방식 밖에서 버튼의 Ref에 접근하기 위해 forwardRef를 사용합니다. 컴포넌트의 interface는 HTML의 Button의 기본 타입을 사용할 수 있도록 ButtonHTMLAttributes 을 확장해서 사용합니다. 시맨틱 한 코드를 위해 button element에 role을 부여해서 tab이란 것을 알립니다. onKeyDown이벤트에 ArrowRight, ArrowLeft 일.. 2023. 9. 23. React - Image URL을 다운로드 할 수 있는 방법 구현을 하고 싶은 형태 유저가 다운로드 버튼을 클릭할 시 서버에서 받은 이미지 URL을 파일로 저장! 구현 방법 다운로드 버튼은 공통적으로 많이 사용할 것 같아 utils 폴더의 downloadFile.ts에 작업했습니다. 이미지 URL과 fileName을 받도록 해서 fileName을 넘기지 않을 경우 공통적으로 download라는 파일명으로 저장이 됩니다. downloadFile.ts export const toDataURL = (url: string) => { return fetch(url) .then((response) => { return response.blob(); }) .then((blob) => { return URL.createObjectURL(blob); }); }; export co.. 2023. 9. 23. React - Portals 로 모달만들기 React에서 제공하는 Portal은 UI를 어디에서 렌더링 시킬지 DOM을 사전에 선택하여 부모 컴포넌트 바깥에서 렌더링 할 수 있도록 해줍니다. child (첫번째인자) : ReactChildren container (두번째인자) : DOM 엘리먼트 ReactDOM.createPortal(child, container) 사용방법 html id 추가 react프로젝트의 html에서 기본적으로 제공하는 index.html 에서 코드를 추가합니다. react에서는 index.html에 추가하지만 next는 _document에서 추가할 수 있습니다. // index.html // id가 modal인 div추가 modal Portals 컴포넌트 생성 두번째 인자에는 DOM오브젝트가 들어가야 하므로 첫번째 단계.. 2023. 9. 23. React - 합성 컴포넌트 적용해보기 (Modal) 컴포넌트 (Component) 컴포넌트는 React에서 UI를 그리는 최소한의 단위입니다. 컴포넌트를 만들 때 어떤 기준으로 만들어야 하는지는 개개인마다 다릅니다. 유연한 컴포넌트 만들기 우리들은 하나의 서비스를 만들면서 다양한 변화를 마주하게 됩니다. 어떤 기능이 추가되거나 삭제되거나 하는 다양한 변화에 대응해야 합니다. Headless 기반의 추상화하기 : 변하는것, 변하지 않는 것 구분하기 한 가지 역할만 하기 : 한 가지 역할로만 가지고 있는 것으로 조합 도메인 분리하기 : 도메인을 포함하는 컴포넌트와 그렇지 않은것 구분하기 Component UI 지금까지 사용해본 React UI 라이브러리는 두 가지 라이브러리입니다. 대표적인 Component UI 방식입니다. Antd MATERIAL-UI 라.. 2023. 9. 23. React - 스크롤 퍼센트 구하기 스크롤 퍼센트 구하기 이전 글에는 요소의 절대위치를 구하는 글을 적었습니다. 이번에는 현재 내가 얼마나 스크롤을 했는지 퍼센트를 구하는 방법입니다! ( 스크롤 된 높이 + 보고있는화면(viewport)높이 ) / 전체문서높이 * 100 활용하기 Element.scrollTop : 요소의 콘텐츠가 세로로 스크롤되는 픽셀수 Element.scrollHeight : 요소의 콘텐츠의 총 높이 Element.clientHeight : 요소의 내부높이 스크롤 시 몇 퍼센트 했는지 알 수 있는 로직입니다. const [percentage, setPercentage] = useState(); const getScrollPercentage = () => { const scroll = document.documentEle.. 2023. 9. 23. React - 버튼 클릭으로 컴포넌트 렌더링하기 button 클릭으로 원하는 컴포넌트를 렌더링 할 수 있습니다! 지금은 버튼을 이용했지만 checkbox, radio, select 등 모두 사용 할 수 있는 방법입니다. 구현 해야 할 로직 파악해 보기 ! 어떠한 것을 구현할 때 가장 먼저 생각해야 하는 것은 로직을 생각하는 것이라고 생각합니다. 적용해야 할 로직을 나눈다면 이렇게 볼 수 있습니다. 버튼클릭 버튼 클릭한 버튼의 상태값 저장 상태값의 따른 컴포넌트 렌더링 state 선언, onClick 이벤트 선언 클릭한 버튼의 name 값을 state에 저장합니다. value가 될 수 있고, innerText 등 상황에 맞게 사용하면 됩니다. const [content, setContent] = useState(); const handleButtonCl.. 2023. 9. 23. React - 컴포넌트 절대위치 찾기 컴포넌트 절대위치 찾기 웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있어요. 절대위치를 이용해 스타일을 꾸미거나 로직을 만들 때 적용해 볼 수 있어요. 절대위치 절대위치란? 해당 요소가 웹 페이지를 기준으로한 위치입니다! 스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를 구할 수 있습니다. window.scrollY : 스크롤 양 Element.getBoundingClientRect() : 엘리먼트의 상대좌표를 알려주는 객체를 반환 const ele = document.getElementById(value); const elePosition = window.scrollY + ele.getBoundingClientRect().top; 활용하기 스크롤을 할 때 .. 2023. 9. 23. 이전 1 다음
