React47 [React] 파일 업로드 버튼 만들기 오늘은 React를 사용하여 파일 업로드 버튼을 만들어보겠습니다. 파일 업로드 버튼을 클릭하면 파일 선택 대화 상자가 열리고 선택한 파일의 정보를 콘솔에 출력합니다. 먼저 React 앱을 구성합니다. 아래는 기본적인 앱 구성입니다. const App = (props) => { // 파일 입력 요소에 대한 ref 생성 const fileInput = React.useRef(null); // 파일 업로드 버튼 클릭 시 파일 입력 요소 클릭 이벤트 발생 const handleButtonClick = (e) => { fileInput.current.click(); }; // 파일 입력 요소의 값이 변경되면 호출되는 함수 const handleChange = (e) => { // 선택한 파일 정보를 콘솔에 출력 .. 2023. 11. 12. [React] 간단하게 To-Do 리스트 만들어보기 안녕하세요. 오늘은 지난 시간에 배운 useState와 map, 버튼 기능을 모두 활용해서 투두리스트를 만들어 볼게요. import React, { useState } from 'react'; const TodoApp = () => { const [todos, setTodos] = useState([]); const [input, setInput] = useState(''); const addTodo = () => { if (input.trim() !== '') { setTodos([...todos, input]); setInput(''); } }; const removeTodo = (index) => { const updatedTodos = todos.filter((_, i) => i !== index.. 2023. 11. 11. [React] CheckBox이용해서 아이템 선택하기 안녕하세요. 오늘은 지난 CheckBox 시간에 이어 오늘은 여러 체크박스를 이용해 아이템을 선택하는 기능을 만들어 볼게요. import './App.css'; import React, { useState } from 'react'; function App() { const [items, setItems] = useState(['a','b','c','d']); const [selectItems,setselectItems] = useState([]); const handleCheckboxChange = (event) => { const value = event.target.value; if (selectItems.includes(value)) { setselectItems(selectItems.filter.. 2023. 11. 1. [React] CheckBox 사용해보기 안녕하세요. 오늘은 체크박스를 이용해보는 시간을 가져볼건데 체크박스의 상태에 따라 버튼 활성도 한번 해볼게요. import './App.css'; import React, { useState } from 'react'; function App() { const [isChecked, setIsChecked] = useState(false); const handleCheckboxChange = () => { setIsChecked(!isChecked); } return ( {alert("Hello World")}} disabled={!isChecked}>출력하기 ); } export default App; 체크가 되어있다면 버튼은 활성화 되어있을것이고 반대의 경우 버튼이 안눌릴것입니다. 영상을 통해 확인해보.. 2023. 10. 21. [React] JSX안에서 조건문 사용하기 안녕하세요. 오늘은 리액트 JSX안에서 조건문을 사용해 원하는 화면을 만들어 보도록하겠습니다. 간단하게 App.js파일에 isTrue값이 참이라면 True를 출력하고 반대의 경우 False를 출력하게 해보겠습니다. import './App.css'; import React, { useState } from 'react'; function App() { const [isTrue, setIsTrue] = useState(true); return ( {isTrue ? 'True' : 'False'} {setIsTrue(!isTrue)}}>변경 ); } export default App; 이렇게 { 조건문 ? '참일때 출력할 값' : '참이 아닐 때 출력할 값'}을 입력해주면 조건문 완성입니다. 버튼을 통해 값.. 2023. 10. 10. [React] useState와 useEffect 사용하기 안녕하세요 오늘은 지난 시간에 이어 react의 useEffect 기능을 사용해보려고 합니다. 지난 시간 링크 : https://stickode.tistory.com/927 여기서 Home.js를 수정해 보겠습니다. 먼저 useState와 useEffect를 import 해주겠습니다. useState는 컴포넌트에서 상태관리하는 함수로 저희는 예시로 Num값을 계속 올려주면서 적용이 되는지 확인을 할 것입니다. import React, { useState, useEffect } from 'react'; const Home = () => { const [Num, setNum] = useState(0); useEffect(() => { const intervalId = setInterval(fetchData,.. 2023. 9. 20. [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. 이전 1 2 3 4 5 6 다음
