8월 20일 (목)_React (ES6 & JSX)

1. React 란?

1) React는 UI(User-Interface)를 만들기 위한 자바스크립트 Library입니다. React가 DOM에 접근을 하는 도구들을 제공해준다는 점은 기본 JavaScript 또는 jQuery와 같지만, 언어의 구조가 사람의 생각 구조에 가깝게 직관적이라는 점(Declarative)에서 큰 장점이 있습니다. (참고로 Facebook이 만들었습니다) - by 공식문서

 

2) React는 Component 기반 라이브러리이다. (Component : 하나의 의미를 가진 독립적인 단위모듈)

요즘 Web page는 단순히 Data만을 보여주지 않는다. User와의 수많은 interaction(상호작용)이 일어난다. 이렇게 되면 관리해야 하는 DOM이 많아지면서 상태관리가 어려워진다. 이를 해결하여 기능개발에만 집중할 수 있게 도와주는 라이브러리가 React이다.

 

아래는 React의 Component적인 특성을 보여주는 예시이다.

 

HTML tag

<div class="tweet">
  <span class="userid> @walli </span>
  <div class="contants> hello, My name is walli :) </div>
  <div class="time"> 43 seconds ago <div>
</div>

 

Component

<Tweet userid="walli" time="43">
  hello, my name is walli:)
</Tweet>

 

Tweet 이란 Tag는 존재하지 않는다. 하지만 이런 하나의 의미를 가진 Tag를 만듬으로써 코드가 직관적이고 재사용성이 높아진다. 이것이 바로 Component(독립적인 단위모듈) 이고 React에서는 이런 Component 단위로 개발이 진행되게 된다.

2. React 문법 특성 - ES6 & JSX

1) ES6 (ECMAScript6)

자바스크립트 표준 단체인 ECMA가 제정하는 자바스크립트 표준이다.

React는 기본적으로 ES6 문법을 사용한다. 그 중 중요한 7가지 개념은 알아두도록 하자!

 

Destructuring(구조 분해 할당)

let a, b;
[a, b] = [10, 20];

 

spread operator(전개 구문)

const arr = [1, 2, 3, 4, 5];

console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(...arr); // 1, 2, 3, 4, 5

 

rest parameters(Rest 파라미터)

function func(...param) {
  console.log(param);
}

func(1, 2, 3); // [ 1, 2, 3 ]

 

default parameters(기본값 매개변수)

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2)); // expected output: 10
console.log(multiply(5)); // expected output: 5

 

template literals(템플릿 문자열)

var a = 5;
var b = 10;

console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

 

arrow function(화살표 함수)

const materials = [
  'Hydrogen',
  'Helium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6]

 

for - of loop(반복 명령문)

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

2) JSX(JavaScript XML)

const element = <h1>Hello, world!</h1>;

 

위에 희한한 태그 문법은 문자열도, HTML도 아닙니다.

JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿(Template:형틀) 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React “엘리먼트(element)” 를 생성합니다.

 

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

- by 공식문서

 

React에서 JSX를 활용한 코드 예시)

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

// Hello, Josh Perez

 

예시에서는 name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였습니다. JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.

 

좀 더 자세한 내용은 공식문서 참조 : https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

이 밖에도 오늘 React에 대하여 많이 배웠지만 내일마저 정리하도록 하겠습니다. 너무 내용이 방대하다....

오늘 학습을 진행하면서 공식 문서의 도움을 많이 받았다. 생각보다 문서가 잘 구성되어 있어 학습에 도움이 많이 되었고 앞으로도 공식문서를 볼 일이 많을텐데 공식문서를 보고 사용하는 능력을 키울 수 있도록 노력해야겠다. 파이팅~!