pgg-dev

Virtual DOM 이란? 실제 DOM의 가벼운 사본과 비슷하다. Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하지 않고, DOM을 추상화 한 자바스크립트 객체를 구성하여 사용한다. Virtual DOM 사용 이유 HTML 마크업을 시각적인 형태로 변환하는 것은 웹브라우저가 하는 주 역할이기 때문에 이를 처리할 때 컴퓨터 자원을 사용하는 것은 어쩔 수 없다. DOM은 트리 구조로써, 업데이트 후에 변경된 요소와 하위 요소를 다시 렌더링 하여 웹브라우저 UI를 업데이트해야 한다. 따라서 UI 구성 요소가 많을수록 DOM 트리를 다시 렌더링 해야 되므로 성능이 저하된다. 이런 문제를 해결하려면 DOM을 최소한으로 조작하여 작업해야 된다. 리액트는 Virtual DOM 방식을 사용하여 DOM ..

컴포넌트가 브라우저 상에 나타날 때, 업데이트될 때, 제거될 때 호출되는 메서드(API) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 import React, { Component } from "react"; class LifeCycleSample extends Component { state = { number: 0, color: nu..

리액트에서 특정 DOM 을 선택하기 위해 ref 라는 것을 사용한다. ◇ 함수형 컴포넌트 → useRef 라는 Hook 함수를 사용 ◇ 클래스형 컴포넌트 → 콜백 함수 또는 React.createRef 라는 함수 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 import React, { useState } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: "", nickname: "" }); const { name..