JSX문법
1. 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
부모 요소 하나로 감싸지 않을 경우 다음과 같은 오류가 나타날 것이다.
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸주어야하는가?
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는
하나의 DOM 트리구조로 이루어져야 한다는 규칙때문이다.
<div><h1>안녕</h1></div> or <Fragment><h1>안녕</h1><Fragment>
위와 같이 여러 요소를 하나의 부모 요소로 감싸줄 수 있다.
<Fragment></Fragment> 의 경우 리액트v16 이상부터 사용가능하며,
<></>와 같이 사용가능하다.
Fragment를 사용하기 위해서는 import React, {Fragment} from 'react';
구문을 작성하여 Fragment 라는 컴포넌트를 추가로 불러와야 사용이 가능하다.
2. 자바스크립트 표현
자바스크립트 표현식을 사용하기 위해서는 JSX내부에서 코드를 { }로 감싸면 된다.
src/App.js
import React from 'react';
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;3. If문 대신 조건부 연산자
JSX 내부의 자바스크립트 표현식에서는 if문 사용이 불가하다.
하지만 조건에 따라 다른 내용을 렌더링을 해야 할 때는
JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.
src/App.js
import React from 'react';
function App() {
const name = '리액트';
return (
<div>
{name === '리액트' ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</div>
);
}4. AND연산자(&&)를 사용한 조건부 렌더링
개발중에 특정조건을 만족할 때 내용을 보여주고, 그렇지 않을 땐 아무것도 렌더링하지 않는 상황일때
src/App.js
import React from 'react';
function App() {
const name = '뤼왝트';
return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}
export default App;or
import React from 'react';
function App() {
const name = '뤼왝트';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}
export default App;- 위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않는다.
&&연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때 null과 마찬가지로 아무것도 나타나지 않기 때문이다. 그러나 예외도 있다. false한 값이 0일때는 화면에 0이 나타난다.
5. undefined 렌더링 하지 않기
리액트 컴포넌트 함수에서는 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.
src/App.js
import React from 'react';
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.OR(||)연산자
OR(||)연산자를 사용하면, undefined일 때 사용할 값을 지정할 수 있어 오류방지가 가능하다.
import React from 'react';
import './App.css';
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App;- 아래 코드와 같이 JSX내부에서 undefined를 렌더링하는 것은 가능하다.
function App() {
const name = undefined;
return <div>{name || '리액트'}</div>;
}6. 인라인 스타일링
DOM요소에 스타일을 적용할 땐 문자열이 아닌 객체 형태로 -를 없애고 카멜 표기법(camelCase)으로 작성.
ex) background-color => backgroundColor
스타일 적용 방법
- style객체를 미리 선언하고 div의 style값으로 지정하는 방법
import React from 'react';
function App() {
const name = '리액트';
const style = {
// background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
backgroundColor: 'black',
color: 'aqua',
fontSize: '48px', // font-size -> fontSize
fontWeight: 'bold', // font-weight -> fontWeight
padding: 16 // 단위를 생략하면 px로 지정됩니다.
};
return <div style={style}>{name} </div>;
}
export default App;- style객체를 미리 선언하지 않고 바로 style값을 지정하는 방법
import React from 'react';
function App() {
const name = '리액트';
return (
<div
style={{
// background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
backgroundColor: 'black',
color: 'aqua',
fontSize: '48px', // font-size -> fontSize
fontWeight: 'bold', // font-weight -> fontWeight
padding: 16 // 단위를 생략하면 px로 지정됩니다.
}}
>
{name}
</div>
);
}
export default App;7. class대신 className
JSX에서는 class가 아닌 className으로 설정해 주어야한다.
src/App.js
import React from 'react';
import './App.css';
function App() {
const name = '리액트';
return <div className="react">{name}</div>;
}
export default App;class로 설정할 경우 스타일은 적용이 되나 console탭에서 오류가 발생한다.
Warning: Invalid DOM property `class`. Did you mean `className`?
in div (at App.js:6)
in App (at src/index.js:7)8. 꼭 닫아야 하는 태그
JSX에서는 태그를 닫지 않을시 오류가 발생한다.
태그와 태그사이에 내용이 없을 경우 self-closing태그 선언을 하면 오류를 막을 수 있다.
ex) <input />
9. 주석
JSX 내부에서 주석을 작성할 때는 {/ … /}와 같은 형식으로 작성합니다. 이렇게 여러 줄로 작성할 수도 있습니다. 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // …과 같은 형태의 주석도 작성할 수 있습니다.
src/App.js
import React from 'react';
import './App.css';
function App() {
const name = '리액트';
return (
<>
{/* 주석은 이렇게 작성합니다. */}
<div
className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
>
{name}
</div>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
<input />
</>
);
}
export default App;