React memoization에 대한 정리. 관련된 내용을 review 하다보니 개념 정리가 필요할 것 같다. Memoization memoization이란 연산의 결과 값을 저장해 놓고 재사용을 함으로써 연산의 결과를 O(1) time에 얻어낼 수 있도록 하는 프로그래밍 기법이다. performance를 좋게할 수 있지만 저장된 값을 들고 있어야하기 때문에 memory 사용량이 증가하며 중복 연산이 필요하지 않는 경우(예를 들어 분할정복)에는 효과를 얻을 수 없다. React.memo Memo는 react에서 component의 re-rendering을 최적화하기 위해 사용된다. 기본적으로 react는 상위 component가 rendering되면 하위 component 역시 rendering된다. ..
React Work Phase
React dev tools의 Profiler를 사용하다가 발견한 commit이라는 용어를 알아보다가 phase를 정리하게 되었다. React는 component의 life cycle을 크게 두 가지, Render phase와 Commit phase로 나눈다. 두 phase는 synchronouse하게 동작하며 각 phase에서 다루는 대상이 VDOM이냐 DOM이냐로 구분할 수 있다. Render phase State나 props의 변경 등으로 component가 update 되어야할 때, React는 reconciliation(재조정)이라는 작업을 하게된다. 먼저 component의 render funcion을 재귀적으로 호출(tree 아래 방향으로)하면서 JS object tree인 VDOM을 생성한..
jsx, jsx tranform import React from 'react'; function App() { return Hello World; } jsx 는 react에서 사용되는 HTML처럼 생긴 syntax이다. 위의 return value로 쓰인 코드는 javascript가 아니기 때문에 browser는 해석할 수 없다. 하지만 import React를 명시함으로써 react의 dependency를 갖는 babel의 plugin이 이런 jsx문법의 코드를 순수 javascript 코드로 transform해준다. import React from 'react'; function Greet() { return React.createElement('h1', null, 'Hello, world!'); }..
react에서 keyboard shorcut 만들기 event hook을 이용해서 해당 component가 mount 됐을 때 event listener를 생성하고 unmount 됐을 때 제거한다. onClickArrow = (e) => { const keyCode = e.keyCode; if (keyCode === 39) { // right arrow const nextBtn = this.nextButtonRef.current; if (nextBtn && !nextBtn.props.disabled) { nextBtn.onClick(); } } else if (keyCode == 37) { // left arrow const prevBtn = this.prevButtonRef.current; if (pr..
DOM: Document Object Model DOM의 Document는 HTML 문서를 가르킨다. 브라우저가 공장, HTML은 제품의 주문서 정도라고 비유할 수 있다. 브라우저는 div, ul, span 등 단순한 텍스트로 구성됐을 뿐인 HTML 문서를 받은 뒤 이를 조작 가능한 실체화된 형태(DOM)로 구현한다. 전체 문서의 구조에 맞춰 각각의 요소를 적절히 배치(tree형태로 구성됨)하고 각 요소는 브라우저에 의해 속성, 이벤트, 배치 등을 조작할 수 있는 형태(Node: 일종의 object)가 된다. 이렇게 형성된 DOM은 javascript를 사용해 조작할 수 있다. 하지만 DOM 자체가 javascript의 객체는 아니다. DOM은 어떠한 언어에도 종속되지 않기때문에 어떤 언어로든 (DOM을..