REACT 공식 문서 정리 1~3

1. React를 배우는 이유

웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다.

기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다.

지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 

2. React를 배우기 전 기본 조건

HTML 및 CSS 에 대한 기본 지식.

Javascript 및 프로그램에 대한 기본 지식

DOM 에 대한 기본적인 이해.

ES6 구문 및 기능

Node.js 및 npm 설치

 

3. JSX 표현식

 

JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장한다.

JavaScript의 모든 기능이 포함되어 있다. 

JSX는 HTML문법을 사용해서 View를 구성할 수 있게 도와주는 자바스크립트 문법이다.

중괄호 안에 JavaScript 표현식을 넣을 수 있다.

JavaScript에 가깝기 때문에 HTML 속성과는 조금 다르다.

ex) HTML 속성 class JSX에서 className으로 사용된다.

카멜 표기법을 사용해서 나타낸다

JSX 삽입된 내용은 문자열로 변환 해주기 때문에 XSS 공격 방지가 가능하다.

카멜 표기법

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

const e= <div idx="0"></div>;

중괄호를 사용하여 속성에 JavaScript 표현식을 삽입 할 수 있다.

const e = <img src={user.url}></img>;

React.CreateElement()함수로 JSX 객체를 생성 할 수 있다.

아래 두 코드는 같은 객체이다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
 
 
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);