GuruSa

리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 만들기 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리다. 또한, ReactDOM이 UI를 렌더링하기 위해 사용할 HTML 엘리먼트가 필요하다. HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차 HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시한다. 전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어졌다. 사용자가 페이지 사이를 내비게이션하면 브라우저는 매번 다른 HTML 문서를 요청해서 로딩한다. AJAX가 생기면서 단일 페이지..

Element const element = Hello, world; 브라우저 DOM Element와 달리 React Element는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React Element와 일치하도록 DOM을 업데이트합니다. HTML 파일 어딘가에 위와 같은 가 있다면, 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 root DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. React Element를 렌더링 하기 위해서는 우선 DOM Element를 R..

JSX에 대해 알아보겠습니다. const element = Hello, world!; 위의 문법은 JSX로 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React Element를 생성합니다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결됩니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 Component라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. React는 JSX 사용이 필수가 아니지만, JavaSc..