본문 바로가기

Front-end/React53

Ref - React Hooks 언제 사용해야할까? React Hooks > 함수형 방식 > useRef hook DOM요소에 접근하기 위해 사용한다. useState를 사용하지 않고, Ref만을 사용하여 로직을 구성 할수있다. Ref 는 - 값의 변경이나 상태관리가 이루어질 필요가 없을때, - Dom 요소로 값을 단순히 읽을 경우 에 사용한다. 2024. 3. 15.
React를 자바스크립트, 타입스크립트 중 무엇으로 사용하는게 좋을까? 리액트(React)를 사용할 때 자바스크립트 또는 타입스크립트를 선택하는 것은 프로젝트의 요구 사항 및 팀의 선호도에 따라 다를 수 있다. 여러 가지 요소를 고려하여 결정할 수 있다. ✔자바스크립트를 사용하는 경우: 간편성과 빠른 개발 자바스크립트는 타입스크립트에 비해 문법이 더 자유롭고 유연하며, 초기 설정이 간단합니다. 더 빠른 개발을 원하는 경우 선택할 수 있습니다. 생태계와 문서화 많은 라이브러리와 프레임워크들이 자바스크립트로 작성되어 있고, 관련 문서도 풍부합니다. 이는 문제 해결 시 도움이 될 수 있습니다. ✔ 타입스크립트를 사용하는 경우: 타입 안정성 타입스크립트는 정적 타이핑을 지원하므로 개발자가 코드를 작성할 때 더 높은 수준의 타입 안정성을 확보할 수 있습니다. 이는 런타임 오류를 줄이.. 2023. 12. 22.
[React] 'react-player/lazy' 라이브러리 사용 연속 재생 가능한 비디오 플레이어 만들기 react-player/lazy 라이브러리 사용하여 연속 재생 및 옵션들 추가한 비디오 플레이어를 생성했다. 매우 간단 간결한 코드로 구현 가능하다. 😎구현 화면 😎구현 코드 npm i react-player/lazy import React, {useEffect, useState} from "react"; import ReactPlayer from 'react-player/lazy'; const Video = ({title, vodPlaylistId}) => { const [playIndex, setPlayIndex] = useState(0); const playList = [ {index:1, url: 'https://https://www.youtube.com/watch?v=UVRUKtHuZh0'}, .. 2023. 10. 31.
[PIP 모드 키기] 리액트로 Picture In Picture 창 켜보기 라이브러리 사용 PIP 모드란? 오른쪽 하단 작은 창을 의미한다. PIP = Picture In Picture (사진 속 사진?) 리액트에서 라이브러리 사용하여 간단히 구현 가능하다. 😎 install npm i react-use-pip 😎 import import usePictureInPicture from 'react-use-pip' 😎Script const videoRef = useRef(null) const { isPictureInPictureActive, //PIP 모드가 활성인지 비활성인지 여부 isPictureInPictureAvailable, //PIP 모드가 지원되고 활성화되었는지 여부 togglePictureInPicture, } = usePictureInPicture(videoRef) 😎HTML { .. 2023. 10. 31.
[대시보드] amcharts 라이브러리 사용 리액트 누적 막대 그래프 만들기 어렵지 않게 누적 막대그래프 만드는 코드 입니다. amcharts 라이브러리를 임포트 해줍니다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조는 이러합니다. Arr가 아닌 Obj 구조 var data = [ {"date": "2023-10-01","A": 5,"B": 2,"C": 0,"D": 1,"F": 1,"G": 1}, {"date": "2023-10-02","A": 12,"B": 13,"C": 0,"D": 1,"F": 1,"G": 1}, {"da.. 2023. 10. 17.
React PC/Mobile 접속 기기별 라우팅 react-device-detect npm install react-device-detect 인스톨 실패시 npm install react-device-detect --force import { BrowserView, MobileView, isBrowser, isMobile } from "react-device-detect"; function App() { return ( 브라우저 접속시 뜨는 페이지 모바일 접속시 뜨는 페이지 ); } 2023. 9. 20.
[대시보드] amcharts 라이브러리 사용 리액트 Pie 차트 amcharts 로 차트를 생성하는 코드이다. amcharts 중 버전 5 사용 amcharts 를 install 하고 import 해준다. import * as am5 from "@amcharts/amcharts5"; import * as am5percent from "@amcharts/amcharts5/percent"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조 let data = { {category : '기억' , value : 1 } , {category : '니은' , value : 1 } , {category : '디귿' , value : 1 } , .... .... {category : '히읏' .. 2023. 8. 30.
[대시보드] amcharts 라이브러리 사용 리액트 Bar 차트 amcharts 로 차트를 생성하는 코드이다. amcharts 중 버전 5 사용 amcharts 를 install 하고 import 해준다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조 let data = { {category : '기억' , value : 1 } , {category : '니은' , value : 1 } , {category : '디귿' , value : 1 } , .... .... {category : '히읏' , value : .. 2023. 8. 27.
ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기 ReactQuill 을 사용하면서 기본만 사용하기엔 불편한 부분들이 많다. 정말 쉬운 작업으로 이미지를 드롭하여 인서트 할수 있는 기능을 소개한다. import ReactQuill , {Quill} from "react-quill" import '../../assets/css/quill.snow.css' import { ImageDrop } from "quill-image-drop-module"; Quill.register("modules/imageDrop", ImageDrop); const modules = useMemo(()=>{ return { // table: true, // tableUI: true, toolbar: { container: toolbarOptions, }, // ImageResi.. 2023. 8. 14.
728x90
반응형

티스토리툴바