전체 글 (62) 썸네일형 리스트형 React에서 event handling 하는 법 정리 React element 이벤트 핸들링 기본 React에서 events 이름은 반드시 camelCase를 사용해야 한다. React에서 event handler는 JSX형태로 함수를 표기한다. // 기존 DOM element에서 사용하는 방법 Activate Lasers // React에서 사용하는 방법 Activate Lasers onClick와 같이 camelCase로 이벤트 이름을 설정하고, event handler의 연결은 JSX 표기인 { }을 사용하고 있다. anonymous 형태의 arrow function 사용하기 function LocalStorage() { const handleGetKeyWord = (e) => { debounce(() => { console.log(e.target.v.. 자바스크립트 ES6 모듈 내보내기/불러오기 require : NodeJS에서 사용되는 CommonJS 키워드 import: ES6(ES2015)에서 새로 도입된 키워드 불러오기 ES6의 Destructuring 문법 사용 필요한 객체만 선택적으로 전역에서 사용할 수 있으며 또는 모든 객체에 별명을 붙이고 그 별명을 통해서 접근 할 수 있다. import { canadianToUs } from "./currency-functions" import * as currency from "./currency-functions" 내보내기 CommonJS에서는 내보낼 단일 객체를 module.exports 변수에 할당하는 방식을 썼었는데, ES6에서는 그 대신 export default 키워드를 사용해서 명시적으로 선언해줍니다. 하나의 모듈에서 하나의 객체만.. import문 사용을 위한 준비 전통적인 가 아닌 es6의 import 문법을 사용하려고 합니다. chrome에서 import 문을 사용하기 위해서는 로컬에 웹서버를 띄워야하는데, 관련하여 아래와 같이 정리했습니다. node.js 설치 LTS 버전을 다운받아 설치합니다. http-server 모듈 설치 http-server는 간단하게 로컬에 웹서버를 띄울 수 있는 모듈입니다. node.js 설치 후, 터미널(windows의 경우는 커맨드 프롬프트)에서 아래의 커맨드를 입력해 http-server 모듈을 설치합니다. npm install -g http-server http-server 실행하기 터미널(혹은 커맨드 프롬프트)에서 본인이 작업하고 있는 폴더로 이동 후 아래의 커맨드를 입력합니다. http-server 아래와 같은 메시지가 나.. React에서 이벤트 적용하기 1.문제상황 상품 리스트를 조회 한 데이터를 map 함수로 렌더링했다. 이 때 개별 버튼에 onClick 이벤트를 추가했다. 2.에러 메시지 state 변경이 무한으로 발생했다. 3.해결 방법 onClick 이벤트 핸들러 함수가 컴포넌트 렌더링 때도 실행되기에 문제가 되었다. 이처럼 함수를 직접 실행하는 형태로 넣으면 리액트 문법상 렌더링되는 순간 함수가 실행된다. 함수가 실행되면 리렌더링이 진행되기 때문에 다시 함수가 실행된다. 따라서 화살표 함수의 형태로 이벤트 해들러를 연결하는 것이다. onClick={handleClick()}이 아닌 onClick={() => {handleClick()}} Event 처리 Todo의 완료 처리 및 삭제 구현과정에서 이벤트 캡쳐와 버블링에 대해 정확한 지식이 정리가 되어 있지 않다는 것을 깨닫고 아래와 같이 정리했습니다. 이벤트 등록 웹 애플리케이션에서 사용자의 입력을 받기위해 필요한 기능입니다. 참고로 addEvenetListener() 웹 API는 화면에서 동적인 기능을 추가하기 위해 사용된 기능입니다. 이벤트 캡쳐 - Event Capture 이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식입니다. 특정 이벤트가 발생 했을 때 최상위 요소인 태그에서 해당 태그를 찾아 내려갑니다. var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener(.. 자바스크립트 this란? this 키워드는 함수나 메소드가 호출될 때 어떤 Object에 초점을 맞출 것인지 결정할 수 있습니다. 아래와 같은 규칙으로 this 키워드가 무엇을 참조하는지 즉, 이 함수가 어디에서 호출되는지 확인해 볼 수 있습니다. Implicit Binding Explicit Binding new Binding 1.Implicit Binding 일반적인 규칙이다. .의 왼쪽에 있는 object를 찾으면 그게 this가 참조하고 있는 것이다. const user = { name: "Tyler", age: 27, greet() { alert(`Hello, my name is ${this.name}`) } } user.greet() // Hello, my name is Tyler 2.Explicit Binding 아.. 이전 1 ··· 5 6 7 8 다음
