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
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 웹 개발 시작하기" 강의를 보며 실습합니다.
'React' 카테고리의 다른 글
React : study(4) { React State } (0) | 2023.02.08 |
---|---|
React : study(3) { React Component, Props, Children } (0) | 2023.01.25 |
React : study(1) { React 프로젝트 생성 } (0) | 2023.01.19 |
React : prepare() { React를 위한 준비 사항 - node, npm, React Developer Tool 설치 } (0) | 2023.01.19 |
댓글