React11 ValidationSample.js ( ref 함수 사용 + 유효성 검사 예제 ) ValidationSample.css 1 2 3 4 5 6 7 8 .success { background-color: lightgreen; } .failure { background-color: lightcoral; } Colored by Color Scripter cs ValidationSample.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 import React, { Component } from "react"; import "./ValidationSample.css"; class Vali.. 2021. 4. 20. EventPractice2 ( input 여러 개를 핸들링 ) 여러개의 input을 핸들링할때 유용한 예제 각 함수에서 자신을 호출하는 input의 정보(input 의 name, input 의 value)를 받아와서 setState() 를 통해 state 값을 변경할수 있음. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 import React, { Component } from "react"; class EventPractice2 extends Component { state = { username: "", message: "",.. 2021. 4. 20. EventPractice.js (onChange 이벤트) input 박스에 변하는 state값 담기 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import React, { Component } from "react"; class EventPractice extends Component { state = { message: "", }; render() { return ( 이벤트 연습 { this.setState({ message: e.target.value, }); }} /> {/* message input에 입력 시 test input value 변경 */} ); } } export default EventPractice;.. 2021. 4. 19. Component / Props / State Component 란? - JSX를 포함하고있는 함수, Class Props 란? - Component 에 표현되는 데이터 - 부모 Component 만 설정할수 있으며, 자식 Component 는 읽기 전용으로만 사용 가능 State 란? - Component 에 표현되는 데이터 - Component 내부에서 읽고, 업데이트 가능 더 쉽고, 직관적인 설명법을 아시는 분은 댓글 부탁드립니다. 2021. 4. 19. JSX 란 ? HTML 과 비슷하지만 완전히 똑같지는 않다. React 에서만 사용가능하다. var a = ( 오우우썸 React! ) 이런 것. 더 쉽고, 직관적인 설명법을 아시는 분은 댓글 부탁드립니다. 2021. 4. 19. 이전 1 2 다음
