React47 [React] 영상 썸네일 만들기 가끔 클라이언트 사이드에서 영상을 선택하고, 썸네일을 만들어야 하는 상황이 있다. 으로 영상을 선택 후, 원하는 시간의 썸네일을 만드는 예제입니다. import React, {useState, useEffect, useRef, } from 'react'; import "./styles.css"; export default function App() { const [OriginalVideo, setOriginalVideo] = useState(""); //비디오 파일 저장하는 변수 const [MaxVideoTime, setMaxVideoTime] = useState(0); //비디오 총 시잔 저장하는 변수 const Cnt = useRef(0); const onLoadFile = (e) =>{ setOr.. 2023. 2. 10. [리액트] PC 웹캠으로 사진 촬영 웹캠을 이용하여 사진 촬영하는 코드입니다. import "./styles.css"; import React, {useState, useEffect, useRef } from 'react'; export default function App() { const videoRef = useRef(null); const [filterO, setfilter] = useState(''); const video = document.getElementById('videoCam'); const canvas = document.getElementById("canvas"); const [CanvasState, setCanvasState] = useState('none'); //사 const [CameraState, setCa.. 2023. 1. 26. [리액트] map 반복문으로 만든 자식 컴포넌트의 함수 작동 (useRef 배열) map을 이용하여 여러 개의 자식 컴포넌트를 만들었지만, 특정 자식 컴포넌트만 변화를 주고 싶을 때가 있습니다. 예를 들어, map을 이용하여 10개의 자식 컴포넌트를 만들었지만, 2번째에 해당하는 자식 컴포넌트만 뷰를 바꾸거나 해당 자식의 함수를 바꾸고 싶을 때 useRef를 이용하면 됩니다. 하지만 단일 컴포넌트를 사용하는 것처럼 했다가는, 원하는 자식만 골라 작동하지 못할 겁니다. 이를 해결하기 위하여 useRef({})에 배열을 만들고 map 반복문에 ref={(element) => myRefs.current[i] = element}를 설정하면 됩니다. 파일 구조 App.js 코드 import "./styles.css"; import Child from "./child.js"; import { u.. 2023. 1. 12. [리액트] 이미지 넣기 순수 자바스크립트로 프로젝트를 진행하다, 리액트로 넘어갔을 때, 기초적인 부분까지도 너무 달라서 헤맨 적이 있습니다. 원하는 이미지를 넣고 싶었지만, 넣는 방법이 달라 한참 헤맨 적이 있습니다. 이번 포스트에서는 이미지 넣는 방법에 대하여 포스팅해 보겠습니다. 전체 코드 import "./styles.css"; export default function App() { return ( teamnova otodev9@gmail.com ); } 기존 html에서는 이미지를 처럼 사용했다면, 리액트는 와 같이 사용하시면 됩니다. 또한 style 설정도 style={{원하는설정:"값"}} 과 같이 설정 해야합니다. 2022. 12. 19. [리액트] 페이지 이동(Routes) 리액트를 처음 사용했을 때, 페이지 이동을 a태그를 사용하여 href를 통해 페이지를 이동했었습니다. 하지만 해당 방식을 사용하면 리액트를 사용할 필요가 없습니다. 리액트를 사용하면서 페이지 이동하는 방법을 포스팅 해보겠습니다. Routes를 사용하기 위해서는 npm install react-router-dom 설치 해주셔야 합니다. 프로젝트 구조 App.js 전체 코드 import "./styles.css"; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './home'; import Mypage from './mypage'; export default function App() { return ( );.. 2022. 11. 29. [리액트] 간단한 게시판 CRUD 리액트로 데이터를 추가 수정 삭제를 해야할 일이 반드시 있습니다. 오늘은 간단하게 게시판 CRUD를 포스팅 해보겠습니다. 전체 코드 import "./styles.css"; import React, {useState, useEffect,useRef } from 'react'; export default function App() { const [data, setdata] = useState([]); //게시판의 모든 데이터를 보관해 둘 useState입니다. const [inputs, setInputs] = useState('');//추가할 텍스트를 입력할 인풋 박스 값입니다. const [Modifyinputs, setModifyInputs] = useState('');//추가할 텍스트를 입력할 인풋 .. 2022. 11. 20. [리액트] 모달창 외부 클릭 시, 꺼지게 하기 웹 개발을 하게 되면, 모달창을 불가피하게 만들어야 하는 상황이 찾아오곤 합니다. 하지만, 단순히 창을 껐다 켰다 하면 속 편하겠지만, 모달창 외부를 클릭했을 때, 모달창을 꺼지는 기능을 만들어야 깔끔합니다. 이번에는 모달창 외부 클릭 시 On/Off를 만들어 볼 예정입니다. 문서 구조 App.js 전체 코드 import "./styles.css"; import React, {useState, useEffect,useRef } from 'react'; import Modal from "./modal.js" export default function App() { const [ModalState, setModalState] = useState('false'); //모달창의 상태를 보관해 둘 useState.. 2022. 11. 15. [리액트] 반응형 페이지 만들기(react-responsive) 반응형 웹 개발을 하다 보면, 모니터 전체 화면으로 볼 때 문제없던 화면이, 웹 브라우저 크기를 줄이거나 태블릿 혹은 스마트폰으로 봤을 때 화면 비율이 맞지 않는 현상을 쉽게 볼 수 있습니다. 이 문제를 해결하기 위해 웹페이지의 크기가 기기의 크기에 맞게 `재조정`되는 것을 `반응형`이라고 말합니다. 전통적인 방식으로 Media Query를 자주 사용하지만, 화면 비율별로 기능을 다르게 하고 싶다면 react-responsive를 사용을 추천드립니다. pm install react-responsive 설치가 필요합니다. import "./styles.css"; import { useMediaQuery } from 'react-responsive' export default function App() {.. 2022. 10. 7. [리액트] 부모 컴포넌트에서 자식 컴포넌트 함수 작동과 자식 컴포넌트에서 부모 컴포넌트 작동하는 법 리액트를 사용하다 보면 상위에 있는 컴포넌트 함수를 호출하거나 반대로 하위의 함수를 호출하고 싶을 때가 있습니다. 구조가 위와 같이 설계가 되었을 때 1) 부모 버튼을 눌렀을 때, 자식의 컴포넌트가 반응하고 싶거나 2) 자식 버튼을 눌렀을 때, 부모의 컴포넌트가 반응하고 싶을 경우 1) props를 이용합니다. App.js Child.js props.parentFunction(); 원하는 함수(parentFunction)를 태그에 넣어 준 후, 자식 컴포넌트에서 props.parentFunction()으로 작동시킵니다. 2) useRef를 이용합니다. App.js const childRef = useRef(); childRef.current.childFunction(); Child.js import Re.. 2022. 9. 22. 이전 1 2 3 4 5 6 다음
