반응형 React51 React fetch 기능 React에서 fetch는 데이터를 가져오기 위해 사용되는 기본 JavaScript API입니다. 주로 REST API와 통신하거나 외부 데이터를 가져올 때 활용됩니다. fetch는 Promise 기반이므로 비동기 작업을 수행하는 데 적합하며 React의 상태 관리와 결합하여 유용하게 사용할 수 있습니다. 기본 사용법fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 데이터를 파싱 }) .then(data => { console.log.. 2025. 1. 19. React useEffect 기능 React의 useEffect는 함수형 컴포넌트에서 부수 효과(Side Effects)를 처리하기 위한 훅입니다. 컴포넌트가 렌더링될 때와 특정 상태나 props가 변경될 때, 또는 컴포넌트가 언마운트될 때 실행됩니다. 주요 사용 사례데이터 가져오기 (API 호출)DOM 조작구독 및 이벤트 리스너 설정타이머 설정리소스 정리 (예: 메모리 누수 방지) 기본 사용법import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // useEffect 사용 useEffect(() => { console.log(`현재 카운트는 ${count}입니다.`); }); .. 2025. 1. 17. React useState 기능 React의 useState는 함수형 컴포넌트에서 상태 관리를 가능하게 하는 훅(Hook)입니다. 컴포넌트가 재렌더링되더라도 상태를 유지하고 상태 변경 시 UI를 업데이트할 수 있도록 돕습니다. 기본 사용법 import React, { useState } from 'react';function Counter() { // state 변수와 setter 함수 선언 const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 setCount(count - 1)}>감소 );}export default Counter; 주요 특징 1. 초기값 설정: useStat.. 2025. 1. 15. React Select with multiple option #html / css(scss) / js(Babel)#React Select with multiple option#Author : CrocoDillon https://codepen.io/CrocoDillon/pen/MpMoZe React Select with multiple optionCopyright by my client on design and chevron icons, other icons are from iconic :)...codepen.io #react #selectbox #multipleoption #html #css #scss #js #babel 2024. 11. 15. React App with React Select #html / css / js#React App with React Select#Author : Irfan Hanfi https://codepen.io/irfanhanfi/pen/EGXdOQ React App with React Select...codepen.io #react #selectbox #select #box #html #css #js #app 2024. 11. 15. React Select Box #html / css(Sass) / js(Babel)#React Select Box#Author : Brandon#select box https://codepen.io/blehr/pen/pbjNGR React Select Box...codepen.io #React #selectbox #select #box #html #css #js #sass #babel 2024. 11. 15. React modal using hooks #html / css / js#React modal using hooks#Author : Maxime Preaux#모달 / Modal / React https://codepen.io/deammer/pen/LoMBvp React modal using hooks...codepen.io 2024. 7. 19. React Dialog Modal #html / css / js(Babel)#React Dialog Modal#Mehmet Can#모달 / Modal / React https://codepen.io/m3hm3tcan/pen/yLExMbe Modal window with react-modal...codepen.io 2024. 7. 19. Fancy Digital Clock #html / css / js(TypeScript) / React#Fancy Digital Clock#Author : Hyperplexed#디지털시계 / Digital Clock https://codepen.io/Hyperplexed/pen/XWeaWGL Fancy Digital Clock...codepen.io 2024. 7. 19. React Digital Clock #html / css / js(Babel)#React Digital Clock#Author : Jennifer Poeng#디지털시계 / Digital Clock https://codepen.io/jpoeng/pen/VwvNBQb React Digital Clock...codepen.io 2024. 7. 19. Digital Clock w/ React #html / css / js(Babel)#Digital Clock w/ React#Author : Shane Wilson#디지털시계 / Digital Clock https://codepen.io/srtw/pen/BaQaLvB Digital Clock w/ React...codepen.io 2024. 7. 19. Digital Clock - React #html / css / js(Babel)#Digital Clock - React#Author : Matthew Vincent#디지털 시계 / Digital Clock https://codepen.io/matthewvincent/pen/BKoYLm Digital Clock - ReactGlowing orb clock made with React...codepen.io 2024. 7. 19. 이전 1 2 3 4 5 다음
