1. Hello World !!

페이지에 Hello World 를 출력하는 가장 간단한 예시입니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

2. JSX

JSX는 JavaScript를 확장한 문법입니다.

const element = <h1>Hello, world!</h1>;

JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

📌JSX의 중괄호 안에 javascript 표현식을 넣을 수 있습니다.

const element = <h1>Hello, {JS표현식}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

📌JSX도 표현식입니다

즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

📌JSX 속성 정의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고, 중괄호를 이용하여 javascript표현식을 삽입할 수도 있습니다.
• React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다. (class는 className, tabindex는 tabIndex)

3. 엘리먼트 렌더링

• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.
• React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.
• UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것입니다
• React DOM은 엘리먼트를 이전 엘리먼트와 비교하여 변경된 부분만 DOM을 업데이트합니다.