본 포스팅은 Udemy의 Modern React and Redux라는 강의를 보면서 React의 개념과 실습들을 정리한 것입니다.
JSX 란?
JSX 는 React에서 생김새를 정의할 때, 사용하는 문법으로 HTML처럼 보이지만 HTML은 아닌 사실 Javascript 이다. babel 을 통해서 JS로 변경되곤 하는데 babel 이 필요한 이유는 웹 브라우저는 새로운 ES 문법마다 생김새가 다른대 모든 ES 문법에 적용이 필요하기 때문에 하나의 통일된 javascript 결과물을 출력해 줄 무엇인가가 필요하기 때문.
( babel 에 대한 상세 내용은 추후 포스터에서 정리할 예정 )
- HTML으로 보이지만 HTML은 아니고 JS와 비슷한 문법
- 브라우저는 JSX 코드를 이해하지 못한다 -> JSX을 normal JS로 변환이 필요함(babel 활용)
- HTML과 비슷하지만 다른 점이 존재
사용하는 이유?
-> 훨씬 단순하기 떄문
마크업 코드에 익숙해져 있으면 HTML, JS를 작성하는 것보다 JSX를 통해서 훨씬 빠르고 쉽게 컴포넌트를 구성하고 쉽게 적응할 수 있기 때문에 사용
JSX VS HTML
1. Inline styling 하는 문법 syntax가 다름
2. class 이름을 붙이는데 있어서 keyword 명이 다름
3. JSX는 JS 문법과 variables를 reference 할 수 있음
1. Inline styling 하는 방법 다름
- JSX에서는 문법 안에 "" 을 표현하지 않고 {{ }} 를 이용하여 JS를 사용
- CSS 문법 중에서 keyword 명이 - 로 연결되어 있는 부분은 모두 - 를 제거하고 연결된 부분의 후자의 첫번째 알파벳을 대문자로 변경
- 여러 값에 대한 부분(ex: red)의 경우 따옴표로 설정( HTML 에는 따옴표 설정 X )
// HTML
<div style="background-color: red; color: white;"></div>
// JSX
<div style={{ backgroundColor: 'red', color: 'white' }}></div>
// red, white 부분을 ""으로 해도 상관없음 규칙은 아님
2. class 이름 붙이는거 상이
- HTML에서 class 라는 키워드를 사용했으면 JSX에서는 className을 써야 된다
- 이유: class라는 JS keyword가 이미 존재하여 헷갈리지 않게 하기 위한 방법
- JS가 이해하기는 하지만 생길 수 있는 문제 원천 차단
-> 과거 JS에서는 문제가 있었지만 현재 JS는 충분히 이해함
// HTML
<div>
<label class="label" for="name">
Enter name:
</label>
</div>
// JSX
<div>
<label className="label" for="name">
Enter name:
</label>
</div>
3. JSX는 JS 문법과 variables를 reference 할 수 있음
- JS 값을 저장한 것을 JSX 안에 넣을 수 있다
- 함수, 변수도 가능
- 다만 object 는 React JSX에서 사용할 수 없다
// 함수 정의
function getButtonText() {
return 'Click a Me!';
}
// JSX안에 JS 함수 넣기
<div>
<label className="label" htmlFor="name">Enter Name: </label>
<input id="name" type="text"/>
<button style={style}> {getButtonText()}</button>
</div>
JSX 실습
JSX 실습을 위해 간단하게 이름을 입력하는 텍스트필드 + 버튼을 만드는 것을 진행해봤다. 앞서 언급한 내용들을 모두 담고 있는 간단한 예제로 아래에는 index.js의 파일이다.
import React from 'react';
import ReactDOM from 'react-dom';
function getButtonText() {
return 'Click a Me!';
}
// Create a react Component
const App = () => {
const style = {backgroundColor: 'black', color: 'white'};
return (
<div>
<label className="label" htmlFor="name">Enter Name: </label>
<input id="name" type="text"/>
<button style={style}> {getButtonText()}</button>
</div>
);
};
// Take the react component and show it on the screen
ReactDOM.render(
<App />, document.querySelector('#root')
);
Summary
- JSX는 쉽게 컴포넌트를 생성할 수 있도록 도와주는 JS 문법이다(HTML과 다름)
- babel을 통해 웹 브라우저에서 JS 문법으로 변경된다
- Inline Styling 방법이 HTML과 다르고 JS를 JSX 안에 reference 할 수 있다