JSX 문법 9가지 규칙

JSX 문법

몇 가지 규칙을 준수해야한다.

 

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다. 예를 들어 아래와 같은 코드는 오류가 나타난다.

function App() {
	return (
		<h1>리액트 안녕!</h1>
		<h2>잘 작동하니?</h2>
	)
}

export default App;

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생한 것이다. 이 오류는 <div> 와 같이 부모 요소 하나로 감싼다면 해결 가능하다.

function App() {
	return (
		<div>
			<h1>리액트 안녕!</h1>
			<h2>잘 작동하니?</h2>
		</div>
	);
}

export default App;

리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸줘야할까?

그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

import { Fragment } from 'react';

function App() {
	return (
		<> OR <Fragment>
			<h1>리액트 안녕!</h1>
			<h2>잘 작동하니?</h2>
		</> OR <Fragment> 
	);
}

export default App;

 

2. 자바스크립트 표현

JSX 안에서는 자바스크립트 표현식을 쓸 수 있다. 이를 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.

function App() {
	const name = '리액트';
	return (
		<>
			<h1>{name} 안녕!</h1>
			<h2>잘 작동하니?</h2>
	  </>
	);
}

export default App;

 

3. if 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다. 하지만 조건에 따라 다른 내용을 렌더링해얄 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다. 이때 삼항 연산자를 사용한다.

function App() {
	const name = '리액트';
	return (
		<div>
			{name === '리액트' ? (
			<h1>리액트 입니다.</h1>
		) : (
			<h2>리액트가 아닙니다.</h2>
		)}
	  </div>
	);
}

export default App;

 

4. AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있다. 이때도 조건부 연산자를 통해 구현할 수 있다.

function App() {
	const name = '뤼액트';
	return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}

export default App; 

위 코드와 같이 null을 렌더링하면 아무것도 보여주지 않는다.

하지만 이것보다 더 짧은 코드로 똑같은 작업을 할 수 있다. 다음과 같이 && 연산자를 사용해서 조건부 렌더링을 할 수 있다.

function App() {
	const name = '뤼액트';
	return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}

export default App; 

이렇게 코드를 작성하고 나면 브라우저에 아무것도 나타나지 않는다. 다시 name 값을 ‘리액트로 설정하면 ‘리액트입니다.’라는 문구가 나타날 것이다.

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 false를 렌더링할 때는 null 값과 마찬가지로 아무것도 나타나지 않기 때문이다. 여기서 한 가지 주의해야할 점은, falsy한 값인 0은 예외적으로 화면에 나타난다는 것이다.

function App() {
	const number = 0;
	return number && <div>내용</div>;
}

export default App; 

이런 코드는 화면에 숫자 0을 보여준다.

** JSX는 언제 괄호로 감싸야 할까?

JSX를 작성할 때 (<div>Hello</div>)와 같이 괄호로 감쌀 때도 있고, 감싸지 않을 때도 있다. 주로 JSX를 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 감싸지 않는다. JSX를 괄호로 감싸는 것은 필수 사항이 아니다. 감싸도 되고 안해도 된다.

(그래서 vsc 에서 한 줄짜리 jsx 코드를 프리티어가 자동으로 괄호를 없앴던 듯 싶다.)

 

5.undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다. 예를 들어 다음과 같은 코드는 오류를 발생시킨다.

import './App.css';

function App() {
	const name = undefined;
	return name;
}

export default App;

코드를 저장한 후 브라우저를 확인해보면 다음과 같은 오류를 볼 수 있다.

App(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

어떤 값이 undefined일 수 있다면, OR(||)연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import './App.css';

function App() {
	const name = undefined;
	return name || '값이 undefined입니다';
}

export default App;

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import './App.css';

function App() {
	const name = undefined;
	return <div>{name}</div>; // jsx 내부에서의 undefined는 괜찮다.
}

export default App;

name 값이 undefined일 때 보여주고 싶은 문구가 있다면 다음과 같이 코드를 작성하자.

import './App.css';

function App() {
	const name = undefined;
	return <div>{name || '리액트'}</div>; // undefined일 때 보여주고 싶은 문구 표현
}

export default App;

 

6. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다. 스타일 이름 중에서 background-color처럼 -문자가 포함되는 이름들은, -문자를 없애고 카멜 표기법으로 작성해야한다. 따라서 backgroundColor로 작성한다.

import './App.css';

function App() {
	const name = '리액트';
	const style = {
		backgroundColor: 'black',
		color: 'aqua',
		fontSize: '48px',
		fontWeight: 'bold;,
		padding: 16 // 단위를 생략하면 px로 지정된다.
	};
	return <div style={style}>{name} </div>;
}

export default App;

지금은 style 객체를 미리 선언하고 div의 style 값으로 지정해주었다. 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 아래와 같이 작성하면된다.

import './App.css';

function App() {
	const name = '리액트';
	return (
		<div 
		style={{
			backgroundColor: 'black',
			color: 'aqua',
			fontSize: '48px',
			fontWeight: 'bold;,
			padding: 16 // 단위를 생략하면 px로 지정된다.
		}};
	>
		{name}
	</div>
	);
}

export default App;

 

7. class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class=”myclass”></div>와 같이 class라는 속성을 설정했다. 하지만 JSX에서는 class가 아닌 className으로 설정해주어야 한다.

.react {
			backgroundColor: 'black',
			color: 'aqua',
			fontSize: '48px',
			fontWeight: 'bold;,
			padding: 16 // 
}

import './App.css';

function App() {
	const name = '리액트';
	return <div className="react">{name}</div>;
}

export default App;

 

8. 꼭 닫아야 하는 태그

HTML 코드를 작성할때, <input> <br> 등의 태그는 닫지 않는다. JSX에서는 닫지 않으면 올가 발생한다. </input> </br>처럼 닫아주거나 태그 사이에 별도의 내용이 들어가지 않는 경우에는 self-closing 태그를 해줄 수 있다. (선언과 동시에 닫는 태그)

 

9. 주석

JSX 에서는 {* … *}와 같은 형식으로 작성해야한다.