#02. [REACT] JSX와 Data Binding 5분컷

 

 React를 사용하기 위해서는 JSX를 알아야합니다. 또한 React를 사용하는 가장 큰 이유는 데이터바인딩(DataBinding)이죠.

 

 React라는 라이브러리를 사용하기 위해 공부해야되는 것이 많다고 느껴지겠지만, 사실 이 두가지는 별 것 없습니다. JSX에 대해 먼저 알아봅시다.

 

JSX

---

JSX : A syntax extension to JavaScript. 자바스크립트 확장 문법. 

 

 JSX는 JS의 확장문법으로, XML/HTML + JS라고 생각하면 됩니다. 

 다음은 저번 시간에 만든 App.js입니다. index.js가 App.js에 있는 함수 리턴값을 public에 있는 index.html로 옮겨줍니다.

 

 분명 App.js이라고 되어있는 걸로 보아 JS파일이고 분명 JS에서 사용하는 함수선언인데 너무나 HTML스러운 부분이 있죠. 바로 이 함수 속 HTML 노란박스 부분(함수 리턴값)이 JSX로 쓰였습니다. html의 태그 <div>, <img>, <p> 등을 사용해 겉보기는 비슷해보이지만 다음과 같은 속성을 가지고 있습니다.

(많은 속성이 있지만 공부하는 데 필요한 부분만 적었습니다.)

 

→ JSX의 속성

• JSX로 작성된 코드는 전부 JS 코드로 변환된다.
• 리액트는 JSX 코드를 모두 createElement() 함수 코드로 변환한다.
• Dom 요소에 class를 넣기 위해서는 className을 쓴다. (프로퍼티 명명법 사용)
• { 중괄호 }를 사용하면 무조건 자바스크립트 코드가 들어간다.

 JSX를 사용하며 우리가 얻을 수 있는 이득은 코드의 간결함과 가독성 향상입니다. JSX를 사용하는 법은 천천히 함께 공부해보며 알아봅시다.

 

 

데이터 바인딩(Data Binding)

---

데이터 바인딩 : HTML에 원하는 DATA를 나타내는(일치화하는) 것.

 

 리액트를 사용하는 큰 이유로 데이터바인딩이 쉽다는 것이 있죠. 데이터 바인딩이란 개발자가JS 코드로 선언하고 반환한 데이터를 HTML에서도 동일하게 보이게 만드는 것을 의미합니다.

//Vanilla JavaScript
document.getElementByID().innerHTML = "data";

△ 쌩 자바스크립트에서 데이터바인딩을 하기 위해서는 이렇게 긴 코드가 필요했습니다.

React.createElement('h3',null,'data')

 △ React를 쓰더라도 이렇게 써야 했습니다.

 

let data = 'data';

...

	<h3> { data } </h3>

△ 데이터 바인딩을 하면 이렇게 쓸 수 있습니다.

 

 △ React에서 데이터바인딩해서 나타낼 때는 { 변수명 } 를 사용하면 됩니다.

 

function 함수(){
  함수작동!
}

return(
  <h1> { 함수() } </h1>
);

 △ 함수 작동하고싶을때도 { } 사용. (function App() 내에서 작성)

 

import logo from './logo.svg';

function App(){

  return(
    <img src={ logo } />
  );
}

 △ 이미지 넣고 싶을 때도 { } 사용.

 

 이렇게 리액트를 사용하면 { 중괄호 }만 잘 사용하더라도 내가 원하는 데이터바인딩은 쉽게 끝낼 수 있습니다.

다음 시간에는 리액트 데이터바인딩의 꽃 state에 대해 알아보겠습니다.