1.Hello World
2. JSX 소개
_React에서는 이벤트의 처리, 시간에 따른 state의 변화 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
-자바스크립트와 HTML에서 각각의 파일에 로직과 마크업을 넣어 기술을 인위적으로 분리했다면 react는 컴포넌트라는 유닛을 통해서 관심사를 분리했습니다.
-JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다.
-컴파일이 끝나면, JSX표현식이 정규 JS 함수 호출이 되고, Javascript 객체로 인식된다.
그래서 JSX를 if구문, for loop 안에서 사용하고, 변수에 할당하고, 인자로 받아들이고, 함수로부터 반환할 수 있다.
-JSX 속성 정의
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
왜 JSX 에서는 Camel Case를 쓸까?
경고
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.
3. 엘리먼트 렌더링
엘리먼트는 React의 가장 작은 단위이다.
브라우저 DOM 엘리먼트와 달리, React 엘리먼트는 일반객체 (plain object) 이며, 쉽게 생성할 수 있다.
React Dom은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.
<div id="root"></div>이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "root" DOM node 라고 부른다.
React엘리먼트를 루트 DOM 노드에 렌더링 하려면
reactDOM.render()로 전달하면 된다.
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
React 엘리먼트는 불변객체이다.
엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 reactDOM.render()로 전달하는 것이다.
