전체 글15 TypeScript - React 자식 컴포넌트에게 props 넘기기 (구조분해 할당) 처음 TypeScript를 경험을 하게 되면 "좋은 건가? JavaScript가 더 편한 것 같아"라는 생각을 했다가 나중에는 "어떻게 TypeScript 없이 작업했지?"라는 경험을 느낄 수 있을 거예요 경험했던 에러 React를 사용하게 되면 Props를 전달하게 되는 일이 많습니다. JavaScript를 이용해 적용할 때에는 쉽게 전달하지만 TypeScript는 자식 컴포넌트에게 props를 넘겨줄 때 TypeScript를 통해 전달을 하기 위해서는 prop를 전달받는 컴포넌트에서 Type을 지정해주어야 합니다. Props 전달 방법 useState의 타입을 productData라는 props를 전달 main.tsx import {ProductProps} from 'ProductList.tsx'; .. 2023. 9. 24. 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 - 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. JavaScript - filter(Boolean) Array.filter() JavaScript의 배열 메서드 중에 filter를 이용하면 지정한조건을 배열의 길이만큼 반복합니다. 원본 배열을 해치지 않고 새로운 배열을 만들어주는 메서드입니다. const arr = [{user:'dale', age:30},{user:'zelda',age:25},{user:'minsoo',age:20}] const filterArr = arr.filter((userInfo)=> userInfo.age > 24) // user age가 24이상인 객체만 나오게 //[{ user: 'dale', age: 30 },{ user: 'zelda', age: 25 }] filter 메서드는 자주 사용하는 메서드 중에 하나라고 생각됩니다. filter(Boolean) 을 이용한 fa.. 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. 이전 1 2 다음
