이벤트 핸들러에 인자 전달하기 루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적이다. 예를 들어, id가 행의 ID일 경우 다음 코드가 모두 작동한다. this.deleteRow(id, e)}>Delete Row Delete Row 위 두 줄은 동등하며 각각 화살표 함수와 Function.prototype.bind를 사용한다. 두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달된다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달된다.

React elements에 대한 event handling은 DOM element에 대한 event handling과 매우 유사하다. 하지만 몇 가지 차이점이 있다. React element 이벤트 핸들링 기본 React 에서 events 이름은 반드시 camelCase(카멜케이스, 낙타표기)를 사용해야 한다. React 에서 event handler(이벤트 핸들러)는 JSX 형태로 함수를 표기한다. // 기존 DOM element 에서 사용하는 방법 Activate Lasers // React에서 사용하는 방법 Activate Lasers 위 예제를 살펴보면, onClick과 같이 camelCase로 이벤트 이름을 설정하고, event handler의 연결은 JSX 표기인 { } 를 사용하고 있다. ..

DOM DOM은 The Document Object Model의 약어로 직역하자면 문서 객체 모델이다. 즉, DOM은 HTML을 객체로 표현한 것이며 외부(JavaScript)와 접속할 인터페이스이다. html로 작성된 코드는 HTML 파서에 의해서 DOM이라는 객체가 모인 트리로 변환된다.(DOM 트리) Virtual DOM React 공식 홈페이지에서 Virtual DOM은 다음과 같이 표현하고 있다. UI로 표현될 객체를 가상 메모리에 저장하고 라이브러리에 의해 실제 DOM으로 동기화 하는 개념 여기서 UI로 표현될 객체는 DOM을 말하며 라이브러리는 VDOM을 랜더링해주는 ReactDOM같은 것을 말한다. Virtual DOM의 이점 React에서 state나 props가 갱신되면 render()..

useReducer 훅이란? useState를 대체할 수 있는 함수이다. React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. (콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있다.) useReducer를 사용하기 위한 구성요소들은 다음과 같다. useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init); state : 컴포..

프로퍼티(props) 프로퍼티, props(properties의 줄임말) 라고 한다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름을 갖는다.) 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터다.) 사용방법 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({})를 사용한다. 1개의 프로퍼티 넘기기 App 컴포넌트에서 Main컴포넌트에 "name"이라는 이름, "아라짱" 값을 갖고 있는 프로퍼티를 넘기는 예제 ex) App.js (문자열은 큰따옴표(" ")를 사용하여 값을 전달한다.) import React, { Component } from 'react'; import Header from './comp..

늦게 일어나서 지각인건가... 안돼...하며 후다닥 준비를 하고 나왔다. 날씨에는 비표시가 없었는데 지하철에서 내리고보니 비가 우두두두둑 떨어졌다. 짧은 거리인데도 빗방울이 굵어서 우박을 맞는 기분이였다. 그렇게 학원에 도착을 하고 시간을 보니 지각은 면했다. 기분이 좋았다. 그 와중에 배가 너무 고파서 샌드위치랑 커피를 사오고 맛있게 먹었다. 이때까지는 몰랐는데 신발끈이 끊어져 있었다...... 나의 고무끈... 잘가 고무끈...... 태어나서 지금까지 신발끈이 끊어지는 경험은 처음이다. 혹시 모르니 오늘 하루 조심해야겠다...