React.js - JSX, Component, 예제 Hello World!

<코드스테이츠 React Part 1 내용 정리>

 

Component 를 사용하면 직관적, 재사용성이 높아진다.

React 는 기본적으로 es6를 사용한다.

따라서 아래 내용은 반드시 알고 시작해야 한다.

 

• destructuring
• spread operator
• rest parameters
• default parameters
• template literals
• arrow function
• for-of loop

 

 

---

React Component는 JSX를 리턴한다.

리액트 컴포넌트에서는 반드시 JSX를 리턴해주어야 하는데 JSX는 javascript의 확장 문법이다.

ReactDOM.render( // 3.렌더링한다.
  <h1> Hello, world </h1>, // 2.해당 JSX 코드를
  document.getElementById('root'); // 1.root 라는 id를 가진 element에   
);

위 코드와 같이 JSX문법으로 작성하면 Babel이 이 JSX를 React.createElement() 호출로 컴파일한다.

코드에서 보는 것처럼 JSX 문법을 활용하면 가독성이 높아지고 덜 복잡한 코드를 작성할 수 있다.

 

아래 두 예시는 동일하다.

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

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

 

 

---

JSX 코드는 자바스크립트 코드로 변환되어야 하기 때문에 jsx를 사용할 때 몇 가지 규칙을 따라야 한다.

•   반드시 하나의 엘리먼트로 구성해야한다.
•   jsx 내부에 자바스크립트 코드를 작성할 때는 {} 안에서 작성해야 한다.
•   jsx 내부에서는 if문을 사용할 수 없다.
•   따라서 조건부 연산자를 사용하기 위해서는 삼항 연산자를 사용해야 한다.
•   엘리먼트에 class name을 적용할 때 className이라고 해야 한다. (es6에 class가 있으니까)