React : study(2) { React JSX, Fragment }

 

JSX

하단 코드처럼 js 파일 안에 HTML을 섞어서 쓸 수 있는 리액트의 확장 문법

root.render(<h1>실행 테스트</h1>);

HTML 태그를 선언할 뿐만 아니라 id, className 등의 속성도 추가할 수 있다

※ className : js 내 객체를 뜻하는 class와의 구분을 위해 HTML의 class 속성을 className이라 칭한다.

    마찬가지로 for 역시 htmlFor로 사용한다.

root.render(<p id="test-prop"> 실행 테스트</p>);

 

Fragment

jsx 문법에서는 상단 예시처럼 1개의 태그에 한해서만 속성을 추가할 수 있다.

하지만 두 개 이상의 태그에 대해 속성을 추가한다면? 그럴때 fragment를 사용한다

import { Fragment } from 'react';		// import 필요 (하단에 태그를 작성하면 자동 import) 
import ReactDOM from 'react-dom/client';

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

root.render(
  <Fragment>
    <h1>실행 테스트</h1>
    <h3>두 줄 이상의 테스트 코드</h3>
  </Fragment>
);

 

Fragment는 생각보다 많이 쓰이기 때문에 이름없는 축약형 <> </>으로 많이 사용된다

contraction.render(
  <>
    <h1>contraction - 실행 테스트</h1>
    <h3>contraction - 두 줄 이상의 테스트 코드</h3>
  </>
);

 

 

실행 화면

<Fragment> 태그와 <> 축약형 태그 두 개를 사용한 실행화면은 다음과 같다

 

※ Fragment 적용 [ Git 으로 확인 ]

https://github.com/KOO-YS/cramming-react/commit/79f2a59fa444f4eaa5fa73b991036fe4f451c58d

apply fragment tag · KOO-YS/cramming-react@79f2a59

 

 

JSX 내에서 HTML 과 javascript 를 함께 사용하는 방법

JSX 코드는 실제로 실행될 때, javascript 코드로 실행되기 때문에 javascript와 혼합해서 사용 가능하다

 

js  변수 값을 중괄호{ }를 이용해 JSX에 넣을 수 있으며, js 함수도 적용할 수 있다. 

const product = 'candy';

root.render(
  <Fragment>
    <h1>판매 : {product}</h1>
  </Fragment>
);

 

여러 변수를 중괄호 안에서 조합할 수 있다.

const product = 'candy';
const flavour = 'strawberry';

root.render(
  <Fragment>
    <h1>판매 : {product.toUpperCase() + ' ' + flavour} </h1>
  </Fragment>
);

하지만 괄호 안에서 조합하는 대신 조합용 변수를 따로 빼는 것을 추천한다

const productLabel = product + ' ' + flavour;

 

js 변수 값에 이미지 url를 담아 활용할 수도 있다. 

<img src={productImg} alt='productImg'/>

 

함수 이벤트 역시 괄호 안에서 활용 가능

function handleClick() {
  alert('구매 성공');
} 

root.render(
  <Fragment>
	...
	<button onClick={handleClick}>구매하기</button>
  </Fragment>
);

 

JSX의 중괄호를 사용하면 js의 표현식을 사용할 수 있다.

단 js의 문법이 혼용되는 것은 아니니 주의할 것
(for, if 등의 문법을 사용할 수 없다)

 

 

 

 

출처 : Code it "React 웹 개발 시작하기" 강의를 보며 실습합니다.