JSX란?

mangjell·2022년 3월 17일

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법!

JSX의 장점은, 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.

유의해야할 점은,
1. 반드시 부모 요소 하나가 감싸는 형태여야한다.
ex) 예시

function prac() {
	return(
    	<>
        	<div>안녕하세요</div>
        <>
    );
}

여기서, <>는 Fragments 라는, React에서 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있는 태그이다!

  1. JSX 안에서도 자바스크립트 표현식을 사용할 수 있다.
    ex) 예시
function prac() {

	const username = "짱구"
	return(
		<>
        	<div>{username}님</div>
            <div>안녕하세요!</div>
		<>
    )
}
profile
프론트엔드 개발자

0개의 댓글