React23 [React] 인증번호 타이머 만들기 안녕하세요. 이번 시간에는 React로 인증번호 타이머를 만들어보겠습니다. React 함수 컴포넌트로 만들었습니다. 1. 소스 코드 import React, { useState, useEffect } from 'react'; function AuthNumTimer() { // 초기 타이머 시간 (초)을 정의함. 180초, 3분. const initialTime = 180; // 남은 시간을 상태로 관리함. const [remainingTime, setRemainingTime] = useState(initialTime); useEffect(() => { // useEffect를 사용하여 컴포넌트가 마운트될 때 타이머 시작. const timer = setInterval(() => { // 남은 시간이 0보.. 2023. 12. 22. [React] 리액트 아이콘 사용하여 아이콘 적용하기 리액트로 개발을 진행하다 보면 간단한 아이콘을 사용해서 웹 구성요소를 만들어 주고 싶을때가 있습니다. 이때 react-icons 라이브러리를 이용해서 간편하게 상용되는 아이콘들을 사용할 수 있습니다. 먼저 프로젝트에 react-icons 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 npm 또는 yarn을 통해 설치할 수 있습니다. npm install react-icons --save // npm 사용하는 경우 yarn add react-icons// yarn 사용하는 경우 설치가 완료되면, 원하는 아이콘을 컴포넌트에 추가할 수 있습니다. 예를 들어, AiFillHeart 아이콘을 사용하는 방법은 다음과 같습니다. 1.필요한 아이콘을 가져옵니다. 아이콘은 아래 링크에서 확인할 수 있습니다. ht.. 2023. 12. 12. [React] 드래그앤 드롭으로 파일 업로드 하기 오늘은 React를 사용하여 파일 업로드 기능을 갖춘 컴포넌트를 만들어보겠습니다. 이 컴포넌트는 파일 선택, 드래그 앤 드롭, 그리고 서버로 파일을 업로드할 수 있는 기능을 제공합니다. 파일 업로드 컴포넌트 생성 먼저, React 프로젝트에서 `UploadBox` 컴포넌트를 생성합니다. 이 컴포넌트는 파일을 선택하거나 드래그하여 업로드하고, 선택한 파일의 정보를 표시합니다. import React, { useState } from 'react'; const UploadBox = ({ socket }) => { // 상태 변수 초기화 const [isActive, setActive] = useState(false); const [uploadedInfo, setUploadedInfo] = useState(n.. 2023. 11. 22. [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. 이전 1 2 3 다음
