라벨이 event인 게시물 표시

[React] 자식 컴포넌트 state 값 부모 컴포넌트로 전달하기 및 불변성 유지

자식 컴포넌트 state 값 부모컴포넌트로 전달하기 방법을 간단히 보면 부모 컴포넌트에 함수를 정의하고 해당 함수를 자식 컴포넌트의 props로 전달한다. props로 전달된 함수를 호출해서 자식컴포넌트의 값을 부모 컴포넌트로 전달하도록 한다. App.js (부모 컴포넌트) import React , { Component , Fragment } from "react" ; import Child from "./components/Child" ; class App extends Component { handleData = ( data ) => { console . log ( data ); }; render () { return ( < > < Child sendProps = {this . handleData } /> </ > ); } } export default App ; Child.js (자식 컴포넌트) import React , { Component } from "react" ; export default class Child extends Component { state = { name : "" , age : "" , }; handleChange = ( e ) => { this . setState ({ [ e . target . name ]: e . target . value , }); }; handleSubmit = ( e ) => { e . preventDefault (); { this . props . sendProps ( this . state ); } }; render () { retu...

[JavaScript] event.keyCode 코드값

event.keyCode 코드값 Javascript는 사용자의 키입력을 감지하여 함수를 처리할 수 있다. 이러한 키입력을 감지하는 이벤트가 keydown 이벤트이다. keydown 이벤트를 사용할경우 단순히 아무키를 입력할때마다 이벤트가 발생하는데  이때 원하는 키를 입력할때 예를들어 엔터를 입력할때 이벤트가 발생하도록할수있게해주는것이 event.keycode 값이다. enter의 키코드값은 13이다. event.keyCode 는 ASCII 코드에 기반한다.   다음의 링크는 사용자가 입력한 키의 keyCode 값을 알려준다. https://laelbe.s3.amazonaws.com/blog/81/Javascript-eventkeyCode-Value_ex01.html keyCode 표 0 10 20 Caps Lock 30 40 Arrow Down 1 11 21 31 41 2 12 22 32 42 3 13 Enter 23 33 Page Up 43 4 14 24 34 Page Down 44 5 15 25 35 End 45 Insert 6 16 Shift 26 36 Home 46 Delete 7 17 Ctrl 27 Esc 37 Arrow Left 47 8 Backspace 18 Alt 28 38 Arrow Up 48 0 9 Tab 19 Pause/Break 29 39 Arrow Right 49 1 50 2 60 70 f 80 p 90 z 51 3 61 =+ 71 g 81 q 91 Windows 52 4 62 72 h 82 r 92 53 5 63 73 i 83 s 93 Right Click 54 6 64 74 j 84 t 94 55 7 65 a 75 k 85 u 95 56 8 66 b 76 l 86 v 96 0 (Num Lock) 57 9 67 c 77 m 87 w 97 1 (Num Lock) 58 68 d 78 n 88 x 98 2 (Num Lock) 59 ;: 69 e 79 o 89 y 99 3 (Num Lock) 100 4 (...