React 공식 문서 읽기 - 1회: 주요 개념(1)

회고를 좀 해보자면,
react를 참 뜨문뜨문 공부를 했던 것 같다.
(다른 것도 마찬가지지만)

항상 필요할 때 가서 공부를 하는 스타일이다보니,
기초지식이 부족한게 사실이다.
대부분의 시간을 공부가 아닌 구현에 쓰다보니 그렇다.

그래서 앞으로 한동안 내 밥줄인 react를
깊게 공부해보려고 한다.

공식 문서를 구간을 나누는건 아니고,
그냥 기록이 필요해 보이는걸 기준으로 적당히 끊어서
시리즈로 작성할 생각이다.

---

JSX 소개 – React

---

JSX란?

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

Javascript와 HTML의 문법을 섞어서 사용한 것이다.

이 JSX는 React 엘리먼트를 생성한다.
이하에서 JSX라고 하면 위의 예시 (<h1>Helo, world!</h1>)와 같은
React 엘리먼트 객체나 문법이라고 생각하면 된다.

---

JSX 표현식

JSX에서는 중괄호 안에 모든 자바스크립트 표현식을 표현할 수 있다.

#1
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

#2
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

---

속성 정의

어트리뷰트에 큰 따옴표를 이용해 문자열을 넣을 수 있다.
중괄호를 이용하면 자바스크립트 표현식을 삽입할 수 있다.

# 문자열 리터럴
<Text name="abc"></Text>

# 다양한 자료형 전달
<button onClick={(e) => console.log(e.target.value)}></button>

---

JSX의 주입 공격 방지

우선 처음 모르는게 나왔는데,
'이스케이프'한다고 한다.
이건 따로 글로 적어봤다.

문자 이스케이프란? - HTML

한마디로 그냥
'JSX에 넣는 모든 문자열은 보이는 그대로 출력된다'
라고 이해하면 될 것 같다.

그렇기 때문에 XSS (cross-site-scripting) 공격을 방지할 수 있다.
XSS가 뭐냐고?
나도 몰라서 또 정리해봤다.

XSS (cross-site-script)이란? - Javascript

---

JSX = 객체다

어쨌든 이렇게 JSX 문법이나 React.createElement로
객체를 생성하면, 다음과 같은 객체가 된다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위와 같은 DOM을 구성하기 위해 설정된 객체를
React 엘리먼트라고 한다.

---

DOM에 엘리먼트 렌더링하기

"루트" DOM 노드에 대해 일단 알아야 한다.
이 "루트"는 React DOM이 관리하는 엘리먼트를 출력하는 곳이다.

꼭 한 페이지에 하나의 루트만 있어야 하는 것은 아니고,
원하는 만큼 있을 수 있다.

# html
<div id="root"></div>

# javascript
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

이런 식으로 렌더링한다.

---

React DOM 렌더링의 특징

이 렌더링의 특징은,
실제로 출력되는 부분이 달라질 때만
다시 그리는(re-render) 것이다.

전체 UI를 다시 그리도록 지시해도,
실제로 변한 노드만 re-render한다.

---

마무리

일단 내가 모르는 부분이 몇몇 있었는데,
참으로 부끄러워지는 부분이고 내일도 마저 해봐야겠다.