Framework | Library/React.js

[React] 이벤트 핸들러에 인자 전달하기

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

[React] event handling 하는 법

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 표기인 { } 를 사용하고 있다. ..

[React] Virtual DOM(VDOM)과 Diffing 알고리즘

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()..

[React] React hooks - useReducer

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 : 컴포..

[React] props

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