[React.js] JSX(Syntax extension for JS)

🤷 React.js 사용하는 이유

• [빠름, Virtual DOM] React is fast. Apps made in React can handle complex updates and still feel quick and responsive.

• [간결함] React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.

• [대용량에 유리] React is scalable. Large programs that display a lot of changing data are where React performs best.

• [유연함] React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential. There’s room to explore.

• [범용성] React is popular. While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.

---

📒 JSX : syntax extension for javascript

• JSX는 자바스크립트 expression 취급. 변수에 저장되어, 배열 / 객체 / 함수 응용가능.
• JSX 안에 HTML처럼 작성가능. id/class 지정하거나, inline CSS 통해서 속성을 부여하는 기능 등.   
• 하나의 변수에 다중태그를 wrap하는 JSX도 가능. (단, 괄호로 묶어야 함. 2개 이상의 태그는 안되며 1개의 부모태그로 wrap 해야함.)

 

- ReactDOM.render(): JSX 렌더링을 위한 라이브러리 및 메소드

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'))

* 사용법: render('표현하려는 내용', ... , '내용을 포함할 컨테이너'). 표현하려는 내용은 JSX 뿐만 아니라 변수도 사용가능.

const myList = (
  <ul>
    <li>macdonald</li>
    <li>burgerking</li>
  </ul>
);

ReactDOM.render(myList, document.getElementById('app'))

 

render()의 강점은, 바뀐 DOM 부분만 수정을 한다. Virtual DOM, 가상DOM을 수정한 뒤 이전DOM과 비교하여 변경된 부분만 수정.

관련 article: www.codecademy.com/articles/react-virtual-dom

 

 

- JSX 심화문법

1) className: JS에서는 class 기능을 제공하므로, class는 className=""로 명명해야 한다.

//wrong JSX
const wrongClass = <div class="hi">hi</div>;

//right JSX
const rightClass = <div className="hi">hi</div>;

 

2) self-closing tag: <img />, <br />과 같이 태그쌍을 쓰지 않는 경우, HTML은 상관없었으나 JSX는 닫기(/) 반드시 해야한다.

//wrong JSX
const wrongBr = hi<br>hello

//right JSX
const rightBr = hi<br />hello

 

3) Javascript형 작성({중괄호}): JSX구문 내에서 Javascript처럼 작성하고자 할 때 사용하는 방법.

const wrongPlus = ReactDOM.render(<h1>2+3</h1>, document.getElementById('app'));
// 2+3

const rightPlus = ReactDOM.render(<h1>{2+3}</h1>, document.getElementById('app'));
// 5

 

• {중괄호} 코드는 Javascript도 JSX도 아님. 비유하자면 //인용문 처럼 그 구간만 JS로 취급하는 JSX 내용인 것. 
• {중괄호}는 JS 구간으로 기존에 선언한 변수를 가져올 수 있다. (Array[index], Object.key 역시 가능)

const ment = 'What would happen?';

ReactDOM.render(<h1>{ment}</h1>, document.getElementById('app'));
// What would happen?

• 선언한 함수도 HTML Event Listner 등으로 활용할 수 있다.

function myFunc() {
  alert('JSX was clicked!')
};

const image = <img src="~.jpg" onClick="{myFunc}" />;

ReactDOM.render(image, document.getElementById('image'));
// when image is clicked, alert message will be displayed.

 

4) if-else 조건문: JSX 내에서 if-else문 사용이 불가하다. 밖에 if문을 쓰거나, 안에서 삼항연산자 쓰는 등 아래 주요방법을 숙지하자!

 

• if문에 JSX 작성

function coinToss() {
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
  doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};
// 1. 변수 선언
let img;

// 2. if문에 따른 변수 JSX property 지정
if (coinToss() === 'heads') {
  img = <img src={pics.kitty} />;
}
else {
  img = <img src={pics.doggy} />;
}

// 3. 변수로 렌더링
ReactDOM.render(img, document.getElementById('app'));

 

• 삼항연산자(The Ternary Operator) - x ? y : z

const img = <img src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']} />;
// combine variables + if statements

ReactDOM.render(img, document.getElementById('app'));

 

• && 검증법 - true일때만 렌더링을 원하는 경우 사용.

const tasty = (
  <ul>
    <li>Applesauce</li>
    { age > 15 && <li>Brussels Sprouts</li> }	// if age <= 15, nothing is rendered.. 
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

 

5) .map() 메소드를 활용한 렌더링

import React from 'react';
import ReactDOM from 'react-dom';

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map(person => <li>{person}</li>);

ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'))

// Rowe
// Prevost
// Gare

 

6) key(for list) - id와 유사. React에서 추적이 필요한 <li>에 지정한다. (필요조건 참고)

• The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember” whether it was checked off. The items shouldn’t get amnesia when they render.

• A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
</ul>

 

7) createElement()

import React from 'react';

const beforeJSX = <div>i am div</div>;
const afterJSX = React.createElement('div', null, 'i am div');

.createElement(type, [props], [...children]) 문법을 참고하자.

---

🤔 총평

createElement()는 React.js에서 사용하는 Component의 일종이라고 한다. (메소드와 유사하다고 추정)

다음 게시글에는 Component 공부내용을 정리하도록 하겠다.