prefer2 Log

JSX란? JavaScript를 확장한 문법이며 XML과 매우 유사하게 생겼다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. (공식적인 자바스크립트 문법은 아니다) function App(){ return ( Hello react ); } 위 코드는 아래의 코드로 랜더링된다 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 컴포넌트를 랜더링 할 때마다 React.createElement를 하는 것은 매우 번거로울 것이다. JSX를 사용하면 보다 편하게 UI를 랜더링 할 수 있다. Reac..

DOM virtual DOM에 대해 알아보기 전에 DOM은 어떻게 작동하는지를 알아보자. DOM(Document Object Model)은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 HTML 문서를 파싱하여 "문서의 구성요소들을 객체로 구조화하여 나타낸 것"이다. DOM의 동작 과정 HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만든다. 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리"라는 것을 만든다. 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 한다. 요즘 흔히 접하는 큰 규모의 웹 애플리케이션, 예를 들어 트위터나 페이스북은 수많은 데이터가 로딩된다. 그리고 각 데이터를 표현하는 요소(element) 개수..