react 2

class를 안쓰고 className을 쓰는 이유

개요React를 사용하여 개발을 했던 사람이라면 element 요소 내 className을 사용하는 것을 알 것이다.본인은 React에서는 class 대신에 className을 사용하는구나 정도로 이해했지만, 문득 "왜 그럴까?" 라는 의문이 생겨 찾아 공부하고 글을 남기려고 한다. JavaScript 예약어 충돌 회피'class'는 자바스크립트에서 예약어로 사용된다.클래스 정의에 사용되며, 이를 속성명으로 사용할 경우 혼란이 발생할 수 있다.따라서, JSX에서는 혼동을 피하기 위해 'class' 대신 'className'을 사용하여 CSS 클래스를 지정한다.React의 JSX 문법JSX는 자바스크립트 코드 안에서 XML을 사용하는 문법으로, XML과 자바스크립트가 혼합된 형태이다.JSX는 자바스크립트로..

코드/React 2024.06.20

Virtual Dom이란?

Virtual Dom(Virtual Document Object Model)Virtual Dom은 자바스크립트 객체로 메모리에 가상으로 존재하는 DOM 트리의 일종이다.실제 DOM의 경량화된 복사본이며, DOM 조작의 효율성을 높이기 위해 사용된다.이는 특히 React와 같은 현대적인 프런트엔드 라이브러리에서 널리 사용된다.실제 DOMDOM은 HTML 문서의 구조를 계층적(Tree)으로 표현한 모델이다.각 HTML 태그에는 DOM 트리의 노드로 표현되며, 웹 페이지의 내용을 변경하거나 조작하는 작업은 DOM을 통해 이루어진다.단점실제 DOM 조작은 비용이 많이 든다.DOM을 변경할 때마다 브라우저는 레이아웃, 페인트, 리플로우 등의 작업을 수행하며, 이는 성능에 큰 영향을 미칠 수 있다.Virtual D..

코드/React 2024.06.20