목록IT/REACT (3)
개발로그필름
onKeyDown키보드를 눌렀을 때 발생하는 이벤트특정 키가 눌렸을 때 그 키에 대한 작업 수행할 수 있도록 돕는 이벤트 핸들러Enter, Esc 키 등 특정 키에 반응ex) e.key === "Enter"Enter 키 눌렀을 때 폼 제출, 입력된 내용을 다른 컴포넌트에 전달 예제 코드import React, { useState } from "react";function App() { const [inputValue, setInputValue] = useState(""); const handleInputChange = (e) => { setInputValue(e.target.value); }; const handleButtonClick = () => { alert(`You entered..
onChange입력 필드 값이 변경될 때마다 호출되는 이벤트 핸들러입력 필드에 텍스트 입력, 수정할 때마다 onChange 이벤트 발생 -> 입력 필드 상태 업데이트 가능 예제코드import React, { useState } from "react";function App() { const [inputValue, setInputValue] = useState(""); const handleInputChange = (e) => { setInputValue(e.target.value); // 입력 필드의 값을 상태로 업데이트 }; return ( 현재 입력 값: {inputValue} {/* 상태에 따라 UI 업데이트 */} );}export default A..
React에서 사용하는 프래그먼트 Fragment React 컴포넌트에서 여러 개 태그를 렌더링할 때 사용하는 도구 JSX에서는 컴포넌트 당 하나의 요소만 반환할 수 있다 하지만 react 프래그먼트를 사용하면 여러 요소를 반환할 수 있다 import React, { Fragment } from 'react'; function func() { return ( 1 2 3 ); } 하지만 꼭 태그를 사용하지 않고 와 같은 빈 태그도 사용할 수 있다