WebMaster

import react from "react"; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 가 반복된다 -> 컴포넌트의 반복의 어떻게 해결할까? 자바스크립트 배열 객체의 내장함수인 map 함수를 통해 반복되는 컴포넌트를 렌더링이 가능하다. map함수는 파라미터로 전달된 함수를 사용해 배열 내 요소를 원하는 규칙에 따라 변환후 새로운 배열을 리턴 arr.map(callback,[thisArg]) callback = 새로운 배열의 요소를 생성하는 함수, 매개변수는 3가지 currentValue = 현재 처리하고 있는 요소 index = 현재 처리하고 있는 요소 index값 array = 현..

컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓴다. {this.myComponent=ref}} />​ MyComponent 내부의 메서드, 멤버 변수에도 접근이 가능하다. import React, { Component } from "react"; class ScrollBox extends Component { //스크롤바를 가장 밑으로 내리는 메소드 scrollToBottom = () => { const { scrollHeight, clientHeight } = this.box; //const scrollHeight = this.box.scrollHeight; //const clientHeight = this.box.clientHeight; //와 같은 의미 this.box.scrollTo..

콜백 함수를 통한 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) {/*... *..