DEV/react
-
React Javascript 키 입력 이벤트 "onKeyPress is deprecated..." onKeyDown, onKeyUp을 쓰자.DEV/react 2024. 2. 16. 10:51
Javascript나 React에서 현 시점에서 onKeyPress를 쓰면 onKeyPress 와 같이 표출되면서 "onKeyPress is deprecated" 경고문이 발생한다. "나중에 지원 안할꺼니까 쓰지 마셈" 경고문이다. (사실 아직은 좀 많이 남았지만...) 아무튼 당장 사용에 문제는 없지만 onKeyDown이나 onKeyUp와 같은 이벤트를 사용하여 작성하자. // ...생략 const enterKeyEvent = (e) => { if(e.key === 'Enter') { // ... 이벤트 동작 } } // (React input)...생략 onKeyDown={enterKeyEvent}
-
React Hooks 간단 정리DEV/react 2024. 1. 24. 15:13
useState - 현재 상태를 나타내는 state와 state를 변경하는 setState를 한 쌍으로 제공 - state의 초기값 설정 가능, 첫 렌더링 때 한번 사용 useEffect - useEffect(function, deps) 형태로 사용 - function은 실행시킬 함수, deps는 의존성 배열 - 의존성 배열에 따라 각 특성을 지님 - 1. 의존성 배열이 없는 경우 : 페이지가 렌더링 될 때마다 함수 실행 - 2. 의존성 배열에 빈 배열을 넣는 경우 : 첫 렌더링때 함수 실행 (1회) - 3. 의존성 배열에 state 값이나 props로 상속받은 데이터 등을 넣는 경우 : 해당 값이 변할때 마다 함수 실행 - 4. 언마운트시 cleanup 함수 적용 가능 - side..
-
React 시작하기 9. Array 항목 추가DEV/react 2024. 1. 5. 10:52
App.js import React, { useRef, useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser' function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }; const [users, setUsers] = useState([ { id: 1,..
-
React 시작하기 8. Array RenderingDEV/react 2024. 1. 3. 17:35
App.js import React from 'react'; import UserList from './UserList'; function App() { return ( ); } export default App; UserList.js import React from "react"; // * 한개의 파일 내에서 여러 Component를 선언해도 문제 X // User 정보 출력 function User({ user }) { return ( {user.username} ({user.email}) ) } // User 리스트를 모두 출력 function UserList() { // 유저 정보 const users = [ { id: 1, username: 'UserA', email: 'usera@gmail.c..
-
React 시작하기 7. 특정 DOM 선택하기 (useRef)DEV/react 2024. 1. 3. 17:06
App.js import React from 'react'; import InputSample from '../src/InputSample'; function App() { return ( ); } export default App; InputSample.js import React, { useState, useRef } from "react"; function InputSample() { const [inputs, SetInputs] = useState({ name: '', nickname: '' }); // 특정 돔을 선택하기 위한 Hook 함수로 Ref 객체 생성 const nameInput = useRef(); const { name, nickname } = inputs; const onChang..