[React] 리액트(React)

1. JSX 

 JSX는 Javascript + XML/HTML 이다.

const element = <h1>Hello, World!</h1>

 

  - JSX의 간단한 예로 위 코드가 있다. 왼쪽은 Javascript이지만, 오른쪽은 HTML이다.

  - JSX는 하나의 객체를 나타낸다. React는 이 객체를 읽어서 DOM을 만드는데 사용하며, 항상 최신 상태를 유지한다.

 

2. React 장점

  - 코드가 짧고, 가독성이 좋음.

  - 버그를 발견하기 쉬우므로, 개발 시간이 줄어듬.

  - React DOM은 렌더링 하기 전 JSX내에 포함된 모든 값들을 문자열로 처리하므로 명시적으로 선언되지 않은 값들은 삽입할 수 없기 때문에 XSS(cross-site-scripting) 공격을 막을 수 있다.

 

rendering은 Data를 Html로 변환 후 renderer에게 전달하는 일관 작업을 의미한다.

 

3. 예제

const name = "HongGilDong"
const element = <h1>"Hello, {name}</h1>

ReactDOM.render( // root라는 id를 가진 element에 렌더링을 한다.
	  element,
	  document.getElementById('root'));

  - 기본적으로 JSX는 'XML/HTML { Javascript } XML/HTML'의 형식으로 되어있다. (※ 중괄호({}) 안에는 무조건 Javascript 코드를 넣는다고 생각하자.)

 

4. Children 정의

const element = (
	<div>
		<h1>first</h1>
		<h1>second</H1>
	</div>
);

  - element는 무조건 하나의 태그로 전체를 감싸줘야 한다. 

 

5. Elements란?

const element = <h1>Hello, World</h1> // 화면에서 'Hello, World'를 볼 수 있다.

  - React 앱을 구성하는 가장 작은 블록으로, 화면에 보이는 것들을 기술한다.

  - element는 immutable(불변성)이다. 즉, Element 생성 후 children이나 attributes를 바꿀 수 없다.