[리액트 react] JSX / Fragment 프래그먼트 / JSX에서 자바스크립트 사용법

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

이번 포스팅에서는 리액트에서 사용되는 JSX, Fragment에 대해 알아보겠습니다.

 

  JSX

• 자바스크립트와 html을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법.
• html 태그와 속성의 사용법이 거의 같다.
• JSX에서 'class' 대신에 'className'를 사용해야 한다.
  : 자바스크립트에서는 객체지향의 개념으로 class를 선언하기 때문에 class를 사용할 수 없다.
• label 태그에서 사용하는 'for'는
  자바스크립트에서 for로 반복문을 쓰기 때문에, JSX에서는 'htmlFor'로 사용한다.
• 속성명 및 이벤트 핸들러의 이름은 JSX에서는 카멜 케이스로 작성해야 한다.
  <예시> A를 B로 변환
  A. <input id="name" type="text" onblur="" onfocus="" onmousedown=""/>
  B. <input id="name" type="text" onBlur="" onFoucs="" onMoiuseDown=""/>
• 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 기존의 HTML 문법 그대로 사용한다.
  <예시> data-status
• 자바스크립트 예약어와 같은 속성명은 사용할 수 없다.
• JSX 문법으로 html 태그를 작성할 때는 반드시 하나의 요소로 태그를 감싸야 한다. => Fragment

import ReactDOM from 'react-dom';

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

 

 

 

 

  Fragment 프래그먼트

• JSX 문법으로 html 태그를 작성할 때는 반드시 하나의 요소로 태그를 감싸야 한다.
• <Fragment> 태그를 사용하면 자동으로 리액트 패키지에서 Fragment를 import 해준다.
• 불필요한 div 태그를 줄일 수 있다.
• <> </> 이름없는 태그로 축약형 문법을 주로 사용한다.

import ReactDOM from 'react-dom';

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

 

 

 

 

  JSX에서 자바스크립트 사용법

• JSX코드는 실행될 때 자바스크립트 코드로 변환 되어서 실행된다. => 자바스크립트 코드도 함께 작성될 수 있음.
• 중괄호 안에 변수를 넣어 사용한다. ($ 없으니 주의)
• 중괄호 안에 자바스크립트 표현식은 다 사용할 수 있음.
• 중괄호 안에는 자바스크립트의 표현식만 사용할 수 있어서 if문, for문, 함수 선언 등은 사용할 수 없다.

import ReactDOM from 'react-dom';


const name = 'TookTak';


ReactDOM.render(
	<h1>My name is {name}</h1>
	document.getElementById('root')
);



// 결과
// My name is TookTak

 

 

• 위 코드의 변수 값을 모두 대문자로 보여주고 싶다면 👇🏻

import ReactDOM from 'react-dom';


const name = 'TookTak';


ReactDOM.render(
	<h1>My name is {name.toUpperCase}</h1>
	document.getElementById('root')
);



// 결과
// My name is TOOKTAK

 

 

• 속성 값에도 자바스크립트 코드 작성이 가능하다. 👇🏻

import ReactDOM from 'react-dom';


const name = 'TookTak';
const imageUrl = 'http://tooktakImg.jpg';


ReactDOM.render(
	<>
		<h1>My name is {name}</h1>
		<img src={imageUrl} alt="뚝딱 사진" />
	</>
    document.getElementById('root')
);



// 결과
// My name is TookTak
// (해당 이미지)

 

 

• 이벤트 핸들러러는
  - addEvenetListener 보다는 요소의 속성값으로 이벤트 핸들러를 등록하게 된다.
  - onClick에 따옴표가 아니라 중괄호로 이벤트 등록을 한다. 👇🏻

import ReactDOM from 'react-dom';


const name = 'TookTak';
CONST imageUrl = 'http://tooktakImg.jpg'

function handleClick() {
	alert('확인했습니다!');
}

ReactDOM.render(
	<>
		<h1>My name is {name}</h1>
		<img src={imageUrl} alt="뚝딱 사진" />
		<button onClick={handleClick}>확인</button>
	</>
    document.getElementById('root')
);



// 결과
// My name is TookTak
// (해당 이미지)
// '확인'버튼