react12 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 - SVG 아이콘 컬러지정 (With Styled-component) 평소의 사용방법 프로젝트에서 아이콘을 사용할 때 SVG이용을 많이합니다. 기본 사이즈의 png 나 jpg를 이용하면 이미지가 깨질 수 있어 svg 이용을 많이 이용하게 됐어요 하지만 메인 페이지의 배너 같이 1920사이즈 같은 경우는 svg로는 용량이 무겁기 때문에 png파일 크기를 x3을 이용하고 타이니png 통해 파일용량을 줄이고 사용합니다 아이콘은 svg 큰 이미지는 png x3 → 타이니 png 용량 줄이고 사용 해결하고 싶은 부분 발견 저는 아이콘의 색상이 다를 때마다 svg를 새로 다운을 받으면서 사용했습니다. 이번에 Tooltip 컴포넌트를 만들었을 때 화살표 부분 때문에 화살표 부분을 고민했어요 네모칸은 Div, 하단의 화살표는 svg 컬러를 props로 넘겨줄 때 svg 컬러도 같이 바뀌.. 2023. 9. 23. Styled-component Switch문 + TypeScript 활용한 모듈화하기 Styled-component + TypeScript 저는 React, TypeScript ,Styled-componet 이 세 가지 조합을 많이 사용하고 있습니다. Styled-component를 사용하는 이유는 독자적인 클래스를 만들어 스타일 충돌을 방지 SASS와 같은 nesting, 변수 기능 props를 활용한 조건부 스타일 지정 이 세가지 이유가 큰 것 같아요! props와 TypeScript를 활용해 모듈화 한 컴포넌트의 스타일을 다양한 조건으로 사용할 수 있어요! Type, interface 지정하기 라벨버튼을 예시로 만들어 보겠습니다. 폰트컬러, 배경컬러, 테두리 를 props로 받아 스타일이 정해지는 컴포넌트입니다. Styled-componet와 css를 import 하고 interfa.. 2023. 9. 23. Styled-component 스타일 재사용 특정 스타일 재사용을 하고 싶은 이유? 스타일링을 하게 되면 일정한 스타일을 반복하게 사용될 경우가 있어요. 예시로 아래 코드는 완전히 동일한 스타일이 적용되어 있고 코드의 양이 2배가 돼서 불필요한 코드를 줄이고 싶었어요. const Text = styled.p` font-size: 10px; margin: 5px; line-height: 10px; color: #194384; `; const ButtonText = styled.p` font-size: 10px; margin: 5px; line-height: 10px; color: #194384; `; 재사용 방법 styled-component 에서는 똑같은 스타일링을 복사해서 사용하면 중복되는 코드의 양을 줄일 수 있고 Text 컴포넌트의 스타일.. 2023. 9. 23. Styled-component 스크롤바 디자인 스타일컴포넌트에서 스크롤바 안 보이게 하기 스크롤은 작동되지만 안보이게 하고 싶다면! &::-webkit-scrollbar { display: none; } CSS 스크롤바 선택기 ::-webkit-scrollbar : 전체 스크롤바. ::-webkit-scrollbar-button : 스크롤 막대의 버튼 ::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들. ::-webkit-scrollbar-track : 흰색 막대 위에 회색 막대가 있는 스크롤 막대의 트랙 ::-webkit-scrollbar-track-piece : 핸들로 덮이지 않은 트랙 부분 ::-webkit-scrollbar-corner : 수평 및 수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리 이것은 종종 브라.. 2023. 9. 23. TypeScript - React Props 구조분해 할당 전달방법 타입스크립트를 이용해 React Props 전달방법 React를 사용하게 되면 Props를 전달하게 되는 일이 많습니다. JavaScript를 이용해 적용 할 때에는 쉽게 전달하지만 TypeScript를 통해 전달을 하기 위해서는 prop를 전달 받는 컴포넌트에서 Type을 지정해주어야 합니다. Props 전달 하는법 useState의 타입을 productData라는 props를 전달 main.tsx import {ProductProps} from 'ProductList.tsx'; . . const [productData, setProductData] = useState([]); return Props를 받는 방법 Props를 받기위해서는 해당하는 Props가 어떤 타입인지 선언해주어야 합니다! inte.. 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. 이전 1 2 다음
