리액트7 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. 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. 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 다음
