JSX

const hi = <p>Hi</p>

• JSX는 syntax extension for JavaScript라고 하는 자바스크립트 확장버전이다.
• HTML과 비슷하게 생겼고, JavaScript 파일 내에서 작성할 수 있다.
• React.js를 사용하기 위해 JSX 문법이 포함되어 있다면, 해당 파일을 정규 자바스크립트 문법으로 변환시키는 컴파일 과정이 필요하다.
• JSX는 HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하며, 마크업과 자바스크립트 로직 구현을 동시에 할 수 있다. 또한, 자바스크립트 문법으로 HTML 생성이 가능하다는 장점이 있다.

JSX element

• JSX 요소들은 JavaScript의 표현식으로 쓸 수 있다. 즉, JSX를 변수에 저장하고, 함수 인자를 만들고, 객체나 배열에 저장할 수 있다는 뜻이다.

const navBar = <nav>I am a nav bar</nav>;
const myTeam = {
	center: <li>Benzo Walli</li>,
	powerForward: <li>Rasha Loa</li>,
	smallForward: <li>Tayshaun Dasmoto</li>,
	shootingGuard: <li>Colmar Cumberbatch</li>,
	pointGuard: <li>Femi Billon</li>
};

JSX attribute

• 태그에 속성을 주고 싶을 때는 항상 ""(쌍따옴표)로 감싸준다.
• 실제 HTML에서 쓰는 속성명과 다를 수 있다. (HTML: class, JSX: className)
• self-Closing Tag : JSX에서는 어떤 태그라도 self closing tag가 가능하다. (<input />, <div />)

Nested JSX

• HTML과 같이 다른 JSX attribute 안에 또 다른 JSX 요소를 넣을 수 있다.
  규칙 1. JSX 표현식이 한 줄 이상을 차지하면, 반드시 소괄호()로 감싸주어야 한다.

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)

규칙 2. JSX 표현식은 반드시 하나의 가장 바깥쪽 element가 필요하다. 만약, outer element가 많다면 <div> 태그로 감싸준다.

// 1. 틀린 방법
const wrong = ( 
	<p>list1</p>
	<p>list2</p>
);

// 2. 옳은 방법
const right = (
  <div>
  	<p>list1</p>
	<p>list2</p>
 </div>
  

(정리) JSX 특징

• 자바스크립트 표현: {}를 쓴다 {...javascript...}
• class vs className: className을 쓴다.
• Inline Styling: <div style={{color: "red"}}> Hello React </div>
• Self Closing tag: <div></div> => <div />
• 모든 요소를 감싸는 최상위 요소: React Fragments* <>...</>

• Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화할 수 있는 기능. div 의 남용을 막을 수 있다.

Rendering

• html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 작동되는 것을 렌더링(rendering)이라고 한다.
• React 요소가 DOM node에 추가되어 화면에 렌더링되려면 -ReactDOM.render() 함수를 사용한다.
  첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.

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

react vs react-DOM

• React: 유저 인터페이스를 위해 고안된 자바스크립트 라이브러리
• React-DOM: React가 브라우저 DOM에 안착하게 만들어주기 위한 필수 라이브러리

• ReactDom.render() 함수는 JSX를 렌더링하기 위해 쓰는 가장 일반적인 함수이다. JSX의 표현식을 전달하고, DOM 트리에 호환/추가시켜주는 역할을 한다.

The Virtual DOM (가상 DOM)

• ReactDom.render()의 특별한 점은 'DOM elements 중 변경이 있는 부분만 업데이트 해준다'는 것이다.
• 즉, 만약 우리가 완전히 같은 걸 두 번 쓴다면, 두번째 렌더링은 일어나지 않는다는 뜻이다.😮
  => 필요한 부분만 업데이트 해준다는 부분은 React의 큰 장점! 그리고 이것은 'Virtual DOM'을 쓰기 때문에 가능하다!
• virtual DOM은 무엇이냐? => 간단히 DOM 조작을 자동으로 효율적으로 작업해주는 고마운 것.. 설명 더보기

const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:
ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:
ReactDOM.render(hello, document.getElementById('app'));