1. JSX란?
JSX 보트는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
2. JSX의 장점
- 보기 쉽고 익숙하다.
html 코드와 비슷하다. - 더욱 높은 활용도
- 컴포넌트를 JSX 안에서 작성할 수 있다.
3. JSX 문법
1) 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
import React from 'react';
function App() {
return (
<h1>리액트 안녕!</h1> // 하나로 감싸져 있지 않은 상태 -> 작동 안 됨
<h2>잘 작동하니?</h2>
)
}
export default App; 잘 작동되지 않는다.
컴포넌트 내부 는 하나의 DOM 트리 구조로 이루어져야 한다.
import React from 'react';
function App() {
return (
<div> // div 태그로 묶어주었다.
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</div>
)
}
export default App;div태그를 이용한다.
import React, {Fragment} from 'react';
function App() {
return (
<Fragment> // Fragment 컴포넌트를 이용하였다.
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</Fragment>
)
}
export default App;Fragment태그를 이용한다.
import React from 'react';
function App() {
return (
<> // 축약 상태
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
)
}
export default App;대신 위와 같이 축약 가능하다.
2) 자바스크립트 표현
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.
import React from 'react';
function App() {
const name = 'lucy';
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;3) If 문 대신 조건부 연산자
JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다.
→ JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.
import React from 'react';
function App() {
const name = 'lucy';
return (
<>
{name === 'lucy' ? <h1>lucy입니다</h1> : <h1>lucy가 아닙니다.</h1>} // 삼항연산자 사용
</>
);
}
export default App;4) AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 할 경우.
import React from 'react';
function App() {
const name = 'luci';
return (
<>
{name === 'lucy' ? <h1>lucy입니다</h1> : null } // 아래에서 더 간단하게 표현해보자.
</>
);
}
export default App;조건에 의하여 null이 반환되어 아무것도 렌더링되지 않는다.
import React from 'react';
import './App.css';
function App() {
const name = 'luci';
return (
<>
{name === 'lucy' && <h1>lucy입니다</h1>}
</>
);
}
export default App;더 간단해졌다.
true를 렌더링하면 뒤의 것이 반환되고, false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
5) undefined를 렌더링하지 않기
undefined만 반환하여 렌더링하는 상황을 만들면 안된다.
import React from 'react';
function App() {
const name = undefined; // undefined'아님!!
return name; // undefined이 리턴된다.
}
export default App;에러 발생한다.
import React from 'react';
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App;
True이면 name값이 return되고 False이면 뒤의 것이 return된다. undefined은 False이므로 '값이 undefined입니다.'가 반환된다.
-> 이것을 이용해서 undefined일 때 반환하는 코드를 짤 수 있겠다.
import React from 'react';
function App() {
const name = undefined; // 'undefined'아님!!
return {name};
}
export default App;빈 화면만 나온다.
name 값이 undefined일 때 보여 주고 싶은 문구가 있다면 다음과 같이 코드를 작성한다.
import React from 'react';
function App() {
const name = undefined;
return (
<>
{name || 'lucy'};
</>
)
}
export default App;name이 False이므로 lucy를 반환한다.
6) 인라인 스타일링
<Fragment style = {style}>Q. <Fragment>는 style이 안 먹는 것인가.
import React from 'react';
function App() {
const name = 'lucy';
const style = {
backgroundColor : 'green',
color : 'white',
};
return (
<div style = {style}>
{name}
</div>
);
}
export default App;7) class 대신 className
/* App.css */
.lucy {
background-color: greenyellow;
color: white;
font-size: 48px;
font-weight: bold;
padding: 16px;
} //App.js
import React from 'react';
import './App.css';
function App() {
const name = 'lucy';
return (
<div className="lucy">
{name}
</div>
);
}
export default App;8) 꼭 닫아야 하는 태그
9) 주석
4. ESLint, Prettier 적용하기
