React - jsx문법

jsx란

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);

위 코드의 마지막줄을 보면 파라미터로 문자열이 아닌 html태그같이 생긴 값을 넘기고 있다.

이렇게 html태그를 사용하는 것은 jsx문법이라고 부른다.

jsx문법은 자바스크립트와 html을 섞어쓸 수 있는 자바스크립트의 확장된 문법이다.

---

자바스크립트와 일치하는 문법

• id 속성

root.render(<h1 id="header">안녕 리액트!</h1>);

위 코드와 같이 jsx문법 안에 id값을 넣을 수 있다.

---

자바스크립트와 다른 문법

class

root.render(<h1 className="title">안녕 리액트!</h1>);

class는 사용불가능하다.

자바스크립트에서의 class는 이미 다른 용도로 사용되고 있기 때문이다.

따라서 class를 주고싶다면 위와같이 "className"을 줘야한다.

 

for

root.render(
        <form>
            <label htmlFor="name>이름</label>
            <input id="name" type="text"/>
        </form>
    );

 

input태그에서 사용하는 for도 사용할 수 없다.

for는 자바스크립트에서 반복문에 사용되고있기 때문이다.

for를 사용하려면 위와 같이 "htmlFor"를 사용해야한다.

 

eventHandler

root.render(
    <form>
        <label htmlFor="name>이름</label>
        <input id="name" type="text" onClick="~~" />
    </form>
);

eventHandler의 이름도 조금씩 다르다.

html에서는 전부 소문자로 입력했던 이벤트핸들러들을

onblur=""

onfocus=""

onmousedown=""

 

아래와같이 카멜케이스로 작성해야한다.

onBlur=""

onFocus=""

onMouseDown=""

 

카멜케이스 사용 예외

root.render(
    <form>
        <label htmlFor="name>이름</label>
        <input id="name" type="text" data-status="blanked" />
    </form>
);

위와같이 비표준속성을 다루는데 사용되는 data-* 속성은 카멜케이스가 아니라 기존의 HTML문법 그대로 작성해야한다.

( 비표준속성은 [dom을 담은 변수].dataset.status 와 같이 접근 가능하다. )

---

Fragment

root.render(<h1>안녕 리액트!</h1>);

위와같이 jsx문법을 사용할 때에는, 반드시 하나의 태그만을 넘겨야한다.

 

root.render(<div>
		<h1>안녕 리액트!</h1>
		<h2>안녕안녕</h2>
	</div>);

위와 같이는 가능. div태그 1개만 넘기고있기때문이다.

 

root.render(
		<h1>안녕 리액트!</h1>
		<h2>안녕안녕</h2>
);

위와 같이는 불가능. h1, h2 두개의 태그를 넘기고 있기 때문이다.

 

여러개를 보내야하지만, 필요없는 div를 굳이 쓰고싶지 않을 때에는 fragment를 사용하면 된다.

fragment는 임포트가 필요하다.

import ReactDOM from 'react-dom/client';
import {Fragment} from "react";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Fragment>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕</h2>
</Fragment>);

 

Fragment는 자주 쓰이기때문에 축약형이 있다.

축약형은 fragment를 임포트하지않고, 이름없는 태그로 감쌀 수 있다.

import ReactDOM from 'react-dom/client';

root.render(<>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕</h2>
</>);

코드도 더 깔끔! 이렇게 사용하는 것이 좋겠다.

---

jsx와 javaScript 같이쓰기

root.render(
	<h1>안녕 리액트!</h1>
	document.getElementById('root')
);

jsx는 자바스크립트로 변환되어 실행되기때문에 위와같이  javaScript문법도 사용가능하긴하지만 이 외의 사용방법을 알아보자.

 

1. 변수 사용방법

아래와 같이 jsx문법에 javascript 변수를 함께 사용할 수 있다.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

const lang = "javaScript";
root.render(<>
    <h1>안녕 {lang}!</h1>
    <h2>안녕안녕</h2>
</>);

• 중괄호 안에 변수명을 넣어 사용할 수 있다.
• 템플릿 문자열과 비슷해 보이지만, 앞에 $기호가 없다.

2. 자바스크립트 함수 사용 방법

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

const lang = "javaScript";
root.render(<>
    <h1>안녕 {lang.toUpperCase()}!</h1>
    <h2>안녕안녕</h2>
</>);

• 위 코드처럼 중괄호 안에서 자바스크립트의 함수도 사용할 수 있다.
• 연산자도 사용할 수 있지만(예를들면 <h1>안녕 {lang + 'language'}</h1>), jsx에서 읽기 편하게 작성하는 것이 좋다.

3. html태그의 속성에 사용

const lang = "javaScript";
const imageUrl = '~~~~~~';

root.render(<>
    <h1>안녕 {lang}!</h1>
    <img src={imageUrl} alt='제품사진' />
</>);

• img태그의 src태그에 변수를 넣은 것 처럼 속성을 넣을 수 있다.

4. 이벤트 핸들러에 사용

function handleClick(){
	alert("곧 도착합니다.");
}

root.render(<>
    <h1>안녕 {lang}!</h1>
    <button onClick={handleClick}>확인</button>
</>);

• 위와같이 함수명을 적을 때에도 중괄호 안에 넣는다.
• 중괄호안에는 자바스크립트의 표현식만 사용할 수 있다. 자바스크립트의 문장은 사용할 수 없다.
• if문, for문, 변수선언 등은 사용할 수 없다.
• 따라서 만약 jsx문법 사용중에 조건문이 꼭 필요하다면, 조건 연산자를 사용하고, 반복문이 꼭 필요하다면 배열의 반복문을 활용할 수 있다.