출처 - 리액트를 다루는 기술(김민준 지음)
4. JSX 문법
(1) element 감싸기
모든 element들은 최상단의 부모 element 하나로 감싸져야 한다
function App() {
return (
<div>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</div>
);
}
꼭 div 태그를 사용하고 싶지 않으면 Fragment 기능을 사용할 수도 있다.
import fragment가 필요하다.
import { fragment } from 'react';
function App() {
return (
<>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
(2) JavaScript 표현식
JSX 내부에서 JS 표현식을 사용하려면 { } 로 감싸면 된다
import React from 'react';
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;
(3) if문 대신 삼항 연산자를 사용한다
{ } 내부에서 if문을 사용할 수 없기 때문에 삼항 연산자를 사용한다
import React from 'react';
function App() {
const name = '리액트';
return (
<div>
{name === '리액트' ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</div>
);
}
export default App;
4. AND 연산자(&&)를 이용한 조건부 렌더링
&& 연산자를 이용하면 삼항 연산자보다 코드를 줄일 수 있다
// 삼항연산자 ver.
import React from 'react';
function App() {
const name = '뤼액트';
return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>
}
export default App;
위의 코드를 && 연산자로 나타내면 아래와 같다
// && 연산자 ver.
import React from 'react';
function App() {
const name = '뤼액트';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>
}
export default App;
이렇게 코드를 작성하고 name을 '리액트'로 변경하면 정상적으로 문구가 출력된다.
리액트에서 false는 null 처럼 화면에 아무것도 렌더링하지 않기 때문이다.
다만 falsy 값인 0은 예외적으로 화면에 나타난다.
(5) undefined를 렌더링 하지 않기
리액트 컴포넌트에서는 함수에서 undefined만 반환하면 에러를 발생시킨다.
만약 어떤 값이 undefined일 수도 있다면 OR 연산자(||)를 통해 해당값이 undefined 일 때 사용할 값을 지정할 수 있다
import React from 'react';
function App() {
const name = undefined;
return name || '값이 undefined입니다';
}
export default App;
단, { } 안에 반환하는 것은 가능하다
(6) 인라인 스타일링
DOM element에 스타일을 적용할 때는 문자열 대신 객체 형태로 넣어주어야 한다.
또한 CSS 프로퍼티 중에서 하이픈으로 표기된 프로퍼티는 카멜케이스로 대체한다.
(예. backgound-color => backgroundColor)
import React from 'react';
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 클래스를 사용할 때는 class="클래스이름" 처럼 사용했지만, JSX에서는 class 대신
className을 사용한다
(8) 닫는 태그를 반드시 사용한다
HTML과 달리 닫는 태그를 사용하지 않으면 에러가 발생한다.
self-closing 태그를 이용하면 선언과 동시에 닫을 수 있다
(예. <input />
(9) 주석
JSX 내부에서 주석을 작성할 때는 { /* ... */ } 형태로 작성한다
시작 태그를 여러줄에 작성할 때는 그 내부에서 // 로 주석을 작성할 수도 있다
import React from 'react';
function App() {
const name = '리액트';
return (
<>
{/* 주석은 이렇게 작성합니다. */}
<div
className="react" // 시작 태그를 여러줄로 작성하면 여기에 주석 작성 가능
>
{name}
</div>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 나타난다 */
<input />
</>
);
}
export default App;