React23 [React] react-router-dom의 라우터와 Link 기능 활용하기 안녕하세요. 오늘은 리액트의 라우터와 Link 기능을 활용해 페이지 전환을 해보도록 하겠습니다. 먼저 리액트가 설치됐다는 가정하에 npm install react-router-dom 을 입력해 react-router-dom을 설치해줍니다. 이제는 src폴더 안에 있는 index.js 파일을 열어주고 BrowserRouter를 사용해 봅시다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-route.. 2023. 9. 9. [React]컴포넌트 생성 및 재사용하기 안녕하세요. 이번에는 리액트를 사용해 컴포넌트를 생성해보고 생선된 컴포넌트를 어떻게 재사용하는 법에 대해 알아보도록 하겠습니다. 먼저, App.js 파일에서 화면에 어떤 모습으로 보이길 원하는지 어떤 동직을 작동하길 원하는지에 대한 부분을 함수화합니다. 예시로 이미지를 함수에 담아보겠습니다. function Profile() { return ( ); } export 코드를 이용해 해당 이미지 컴포넌트를 재사용해보겠습니다. export default function App() { return ( 인물사진 ); } App.js 전체코드입니다. function Profile() { return ( ); } export default function App() { return ( 인물사진 ); } 실행 화면 결.. 2023. 7. 20. [React] video 태그(동영상) 관련 함수 활용 웹 개발 하면서 비디오 태그의 상태에 따라 작동해야 하는 기능을 만들때, 항상 고민 했습니다. 이번 글은 1. 동영상이 멈췄을 때 2. 동영상이 재생 되었을 때 3. 동영상 재생 중 을 감지하는 기능입니다. 전채 코드 import "./styles.css"; import React, {useState, useEffect,useRef,} from 'react'; export default function App() { let videoTag = document.getElementById("videoTag1"); let VideoState = useRef(true); let onLoadFile = (e) => { let file = e.target.files; videoTag = document.getEle.. 2023. 3. 5. [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. 이전 1 2 3 다음
