JSX

Yun·2024년 5월 1일

개인공부

목록 보기

1/28

JSX?

JSX(Javascript Syntax eXtension)는 JavaScript를 확장한 문법이다.

공식적인 자바스크립트 문법은 아니며, React로 개발할 때 사용되는 문법이다.
하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다.
React를 사용할 때 반드시 JSX를 사용할 필요는 없다. 하지만 JSX를 사용하면 알아보기 쉬운 코드를 작성할 수 있고, React가 여러 도움되는 에러 메시지를 표기해줄 수도 있다.
브라우저에서 실행하기 전에 Babel을 사용하여 일반적인 자바스크립트 코드로 변환된다.
- Babel은 최신 자바스크립트 문법과 JSX 문법을 기존의 자바스크립트 문법으로 변환해주는 역할을 한다.

문법

JSX를 사용할 땐 다음을 지켜야 한다.

부모 요소가 감싸는 형태

	// X
	return (
		<p>Hello</p>
		<p>World</p>
	);

	// O
	return (
		<div>
			<p>Hello</p>
		</div>
	);

Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록, 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

감싸주는 역할을 하는 태그로는 <div>, <React.Fragment>, <> 세 가지 방법이 있다.

<div> : 가장 기본적이지만, 감싸주기 위한 용도로 자주 사용한다면 시맨틱한 작성을 해친다.
<React.Fragment> : 별도의 노드를 추가하지 않고 여러 개의 자식을 감싸줄 수 있다.
<> : React.Fragment의 단축 문법이다. 간편하지만 props를 설정할 수 없다.

여러 줄의 코드를 return 할 때는 소괄호를 사용하는 것이 좋다. 가독성을 향상시킬 수 있다.

닫힌 태그

열린 태그 없이 모든 태그를 닫아줘야 한다. <br> 같이 닫는 태그가 없는 self-closing tag의 경우에도 마찬가지이다.

<imput />
<br />
<img />

자바스크립트 표현식 사용

JSX에서는 { }을 사용하여 유효한 모든 자바스크립트 표현식을 사용할 수 있다.

function App() {
	const name = 'World';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

삼항 연산자 사용

if와 for은 자바스크립트 표현식이 아니기 때문에 사용할 수 없다. 따라서 JSX 코드 외부에 사용하거나, 내부에 필요할 땐 삼항 연산자를 사용해야 한다.

const login = true;

//case1
return (
	<div>
		{login === true ? (
			<p>로그인 성공</p>
		) : (
			<p>로그인 실패</p>
		)}
	</div>
);

//case 2
return (
	<div>
		{loginYn === true && <p>로그인 성공</p>}
	</div>
	);

카멜 케이스

JSX에서 모든 프로퍼티 이름은 카멜 케이스(CamelCase)로 작성한다. 자바스크립트 문법을 사용하기 위해 { }을 사용하기 때문에, 이를 준수하지 않으면 에러가 발생할 수 있다.

className

class는 자바스크립트에서 예약어로 사용되기 때문에, JSX에서는 className으로 사용해야 한다.

const element = <div class="box"></div> //X
const element = <div className="box"></div> //O

주석

return(
  <div>
    <p>Hello World</p>
    {/* 주석은 이렇게 사용한다. */}
  </div>
)

return(
  <div>
    <p
      //이렇게 사용하는 것도 가능하다.
    >Hello World</p>
  </div>
)

참고

Yun

다음 포스트

JSX