React, Front-end Library(1)

https://reactjs.org/docs/hello-world.html에서 react에 대해 공부하고 정리해본다.

React에서 사용하는 태그 문법은 문자열이나 HTML이라고 부르기엔 좀 애매하다. React에서는 이벤트가 처리되는 방식과 시간에 따라 상태(state)가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등의 rendering 로직이 다른 사용자 인터페이스와 연결이 되게 해준다.

const name = ‘ martin Han ’;
const element = <h1>Hello, {name} </h1>;

ReactDOM.render(
 element,
 document.getElementById(‘root’)
);

위와 같이 쓰여진 선언은 JSX라고 하며 JavaScript를 확장한 문법이다.
JSX는 React의 “element”를 생성한다. JSX의 중괄호 안에는 표현 가능한 모든 JavaScript 표현식을 넣을 수 있다. 
( 2+2, user.firstName, formatName(user) …etc.)

JSX를 통해 쓰여진 표현식은 컴파일링을 통해서 JSX 표현식에서 JavaScript 함수로 호출이 되어 JavaScript 객체로 인식이 되게 된다. (JSX 구문안의 값들이 if 문, for loop 안에 들어가 변수로 할당되서 함수로부터 반환할 수 있다.)

JSX에 따옴표를 이용해 문자열을 정의 할 수도 있고, 중괄호를 사용해 attribute에 JavaScript 표현식을 삽입할 수도 있다. JSX는 따옴표, 중괄호를 동시에 사용하면 안되고, 동일한 attribute에도 두가지를 동시에 사용하면 안된다. (JSX에서 class는 className, tabindex는 tabIndex로 명명해 사용 가능하다.)
 const element = <div tabIndex = “0”></div>
 const element = <img src = {user.avatarUrl}></img>;

JSX에서 태그가 비어있다면 XML처럼 />를 이용해 닫아줘야하고 JSX안에 자식을 포함할 수가 있다.
const element = <img src = {user.avatarUrl} />;
const element = ( 
<div>
 <h1>Hello!</h1>
 <h2>Good to see you here.</h2>
</div>
);

JSX는 Injection Attack을 방지한다. JSX에 사용자 입력을 삽입할 수 있다. React DOM은 JSX에 삽입되는 모든 값을 rendering하기 전에 명시적으로 작성되지 않은 값은 빠져나가지고, rendering 되는 값들은 모두 문자열화되기 때문에 XSS 공격을 방지할 수가 있다.

const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;

JSX는 객체를 표현한다. Babel은 JSX를 React.createElement() 호출로 컴파일한다. 아래 두가지는 동일한 값을 나타낸다.

const element = (
<h1 className = “greeting”>
 Hello, world!
</h1>
);

const element = React.createElement(
 ‘h1’,
 {className: ‘greeting’},
 ‘Hello, world!’
);

React.createElement()는 코드로 작성시 버그가 발생하지 않도록 몇가지 검사를 수행하는데 이를 통해 다음과 같은 객체를 생성한다. 아래와 같은 객체를 React element라고 하고, React는 아래와 같은 React element들을 읽어 DOM을 구성한다.
const element = {
 type: ‘h1’,
 props: {
 className: ‘greeting’,
 children: ‘Hello, world!’
 }
};