WebMaster

콜백 함수를 통한 ref 설정 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해준다. 이 콜백 함수는 ref 값을 파라미터로 전달받아 함수 내부에서 ref를 컴포넌트의 멤버 변수로 설정한다. {this.input=ref}} /> this.input은 input요소의 DOM을 가리키게 된다. createRef를 통한 ref 설정 리액트에 내장되어 있는 createRef라는 함수를 사용한다. 리액트 v16.3부터 도입되었다. import React, { Component } from "react"; class RefSample extends Component { input = React.createRef(); handleFocus = () => { this.input.focus(); }..

리액트에서는 DOM에 이름을 달기 위해 ref를 사용한다. ID를 사용하지 않는 이유? HTML에서는 ID가 유일하여야 하는데 컴포넌트는 여러 번 사용될 수 있기 때문에 적절하지 않다. ref 같은 경우에는 전역적으로 작동되지 않고 컴포넌트 내부에서만 작동되기 때문에 이런 문제가 발생하지 않는다. DOM을 직접적으로 건드려야 될 때 ref를 사용하게 된다. Validation 리액트로 변환 ValidationSample.css .success { background-color: green; } .failure { background-color: red; } ValidationSample.js import React, { Component } from "react"; import "./ValidationS..

함수형 컴포넌트로 이벤트 구현 import React, { Component } from "react"; import { useState } from "react/cjs/react.development"; const EventPracticeClass = () => { const [username, setUsername] = useState(""); const [message, setMessage] = useState(""); const onChangeUsername = (e) => setUsername(e.target.value); const onChangeMessage = (e) => setMessage(e.target.value); //onchange함수 두개를 따로 만들어 주었다. const onC..

Input 여러 개 다루기 input이 여러개일 경우 메서드를 여러 개 만들 수 있지만 비효율적이다. e.target.name 값을 활용한다. e.target.name은 해당 Input의 name을 가리킨다. 같은 이벤트를 동작시켜야 하는 Input 2개 name으로 구분할 것이다. e.target.name으로 구분 e.target.name에 해당 이벤트를 발생시킨 input 태그의 name값이 들어오기 때문에 구분 가능 객체 안에서 key를 [] 로 감싸게 되면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key로 사용된다. const name = 'variantKey'; const object = { [name] : 'value' //name에 실제로 variantKey값이 들어간다 } 예시 OnKe..

이벤트에 실행할 자바스크립트 코드를 전하는 것이 아니라 함수 형태의 값을 전달하는 것이다. 함수를 미리 만들어서 전달하는 방식이 존재한다. 기본 방식 생성자에서 이벤트를 바인딩한다 이벤트 함수 작성 이벤트 시 함수 호출 함수가 호출될 때 this는 호출부에 따라 결정되므로 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메소드와 this의 관계가 끊어지게되므로 바인딩 작업이 필요하다. Property Initializer Syntax를 사용한 메소드 작성 메서드 바인딩은 생성자에서 하는것이 정석이나 이를 불편하게 느낄수있음(새 메소드 추가 시, 생성자를 건드려야 한다) 바벨의 transform-class-properties문법을 사용하여 화살표 함수 형태로 메서드를 정의하는 방식으..

OnChange 이벤트 설정 EventPractice 컴포넌트에 input요소를 렌더링 하는 코드와 해당 요소에 onChange 이벤트를 설정 import React, { Component } from "react"; //클래스형 컴포넌트 생성 class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e); //해당 콘솔에 이벤트를 출력(e= SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 객체(네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML이벤트를 다룰떄와 똑같이 사용)) //SyntheticEvent는 네이티브 이벤트와 달리 이벤트가끝나고 나면 이벤트가 초기화 되어 정보를 참..

컴포넌트 생성 및 불러오기 EventPractice 만들기 import React,{Component} from 'react'; //클래스형 컴포넌트 생성 class EventPractice extends Component { render(){ return( 이벤트 연습 ); }; } export default EventPractice; App.js에서 EventPractice 렌더링 App.js에서 EventPraitice를 불러와 렌더링 하기 import React from "react"; import EventPractice from "./EventPractice"; const App = () => { return ; }; export default App;​

사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 이벤트라 한다. JSBin을 통해 코드 확인 가능(https://jsbin.com) 이벤트 사용 시 주의사항 이벤트 이름은 카멜 표기법으로 작성한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다. 화살표 함수 문법으로 함수를 만들어서 전달하거나, 렌더링 부분 외부에 미리 만들어서 전달해도 된다. DOM요소에만 이벤트를 설정할 수 있다. 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 예를 들어 MyComponent에 onClick을 설정하여도 그냥 이름이 onCkick인 props를 전달해줄 뿐이다. 단, 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정은 가능하다 ex) {/*... *..

State값을 변경할 때에는 반드시 setState혹은 useState을 셰터 함수를 사용해야 한다. 잘못된 예시 //클레스형 컴포넌트의 잘못된 예시 this.state.number = this.state.number+1; this.state.array = this.array.push(2); this.state.object.value = 5; //함수형 컴포넌트의 잘못된 예시 const [object,setObject] = useState({a:1,b:1}); object.b = 2; 배열이나 객체를 업데이트해야 될 경우에는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후 그 사본의 상태를 setState/ 셰터 함수를 통해 업데이트한다. //객체 다루기 const object = {a:1,b..

리액트 16.8 이후 버전부터는 함수형 컴포넌트에서 State를 사용할 수 있다. 16.8 버젼 이후부터는 useState를 사용해서 state를 사용할 수 있다. useState를 사용하기 위해서는 Hooks를 사용하게 되는데 Hooks중 한 가지가 useState다. 배열 비구조화 할당 Hooks를 알기 전에 알아야될 문법 배열 안 값을 쉽게 추출 해줄수 있는 문법 const array = [1,2]; const one = array[0]; const two = array[1]; // 배열 비구조화 할당 const array = [1,2]; const [one,two] = array; UseState 사용하기 useState함수의 인자에 상태의 초깃값을 넣어준다. useState에서는 반드시 객체 형..