개발 블로그

React를 공부하다보면 DOM에 대한 이야기가 계속해서 등장한다. 많은 React 사용자가 가상 DOM에 대해 알고 있다고 하지만, 자세히 설명해달라고 하면 명확하게 설명해주는 사람이 없었기에 브라우저를 기준으로 DOM과 가상DOM에 대해 정리해보려고한다. 브라우저의 Workflow DOM과 가상DOM에 대해 명확히 이해하려면 브라우저의 작동순서부터 알아볼 필요가 있다. DOM Tree 생성 브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM node로 이뤄진 트리를 만든다. 각 노드는 HTML엘리먼트들과 연관되어 있으며, 아래와 같이 만들어진다. Render Tree 생성 외부 CSS 파일과 각 HTML엘리먼트의 inline 스타일을 파싱해 만들어진 스타일 규칙을 사용하여..

React는 2013년에 발표되어 약 8년이 지났는데도 현재까지 인기가 매우 높다. React는 Angular, Vue와 함께 프론트 프레임 워크 3대장이라고 불릴 정도이다.(리액트는 라이브러리이지만, Redux나 MobX, react-router와 함께 프레임 워크처럼 사용된다.) 페이스북이 만들었기 때문에 당연히 페이스북, 인스타그램에서 쓰이고 있으며, 에어비앤비나, 테슬라, 야후등에서도 사용하고 있다고 알려져 있다. React는 페이스북이 만든, MVC 패턴 중 V를 담당하는 라이브러리이다. React는 컴포넌트 시스템으로 구현했기 때문에 재사용면에서 매우 효율적으로 코딩할 수 있다. (여기서 컴포넌트 시스템이란, 웹 사이트를 여러 조각으로 잘랐을 때 각 조각 하나 하나가 컴포넌트이며, 각자의 기능..