import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;리액트를 이제 사용하기 시작하는 분들이라면 이런 코드가 낯설 수 있습니다.
이런 코드는 JSX라고 하며 자바스크립트 (이하 JS)의 확장 문법으로 XML과 매우 비슷한 모양을 하고 있습니다.
이 JSX는 끝까지 이 형태가 유지되는 것이 아니라 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환됩니다. (바벨은 코드를 변환하여 크로스 브라우징을 가능하게 해주는 트랜스 파일러)
자, 그러면 JSX 코드가 어떻게 변환되는지 살펴보겠습니다.
function App(props) {
return (
<div>
Hello <b>React</b>
</div>
);
}
function App() {
return React.createElement("div", null, "Hello", React.createElement("b", null, "react"))
}위의 App 함수는 결국 아래의 코드처럼 변환되어 실행되는 것입니다.
JSX는 리액트로 프로젝트를 개발 시 사용되며 공식적인 JS 문법은 아닙니다. 하지만 우리는 바벨을 통해 브라우저에 호환되는 JS 코드로 변환하여 사용하므로 사용 시 지장은 없습니다.
JSX의 장점
- 보기 쉽고 익숙하다
- 높은 활용도
JSX는 사실 HTML를 다뤄본 적이 있는 분이라면 굉장히 친숙할 정도로 비슷합니다. 결국 리액트도 컴포넌트 단위로 브라우저에 렌더링 할 부분을 JSX로 HTML처럼 구성하는 것이기 때문에 사용법도 거의 비슷합니다.
JSX에서는 우리가 알고 있는 div나 span 같은 태그를 사용할 수 있고 컴포넌트도 import 하여 사용할 수 있기 때문에 코드 중복을 막고 재사용을 쉽게 할 수 있습니다.
JSX의 문법
1. 반드시 하나의 요소로 감싸 져야 합니다.
function App() {
return (
<div>
Hello <b>React</b>
</div>
);
}
function App() {
return (
<div>hello</div>
<div>world</div>
)
}아래의 App 함수에서는 에러가 발생합니다. Virtual DOM에서 컴포넌트의 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
만약, 꼭 div 같은 특정 태그로 감싸고 싶기 않다면, Fragment라는 기능을 사용하면 됩니다.
function App() {
return (
<>
<div>hello</div>
<div>world</div>
</>
)
}이렇게 아무 태그 없는 형태의 꺾쇠괄호로 열고 닫아주면 됩니다.
2. JS 표현식 작성 시 {}로 감싸야합니다.
function App() {
const name = "jimmy";
return (
<>
<div>hello</div>
<div>world</div>
<div>{name}</div>
</>
)
}3. if문 대신 삼항 연산자를 사용해야 합니다.
function App() {
const name = "jimmy";
return (
<>
<div>hello</div>
<div>world</div>
{
name === "jimmy" ? (
<div>{name}</div>
) : null
}
</>
)
}null을 렌더링 하면 아무것도 보여 주지 않습니다.
4. && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.
function App() {
const name = "jimmy";
return (
<>
<div>hello</div>
<div>world</div>
{
name === "jimmy" && <div>{name}</div>
}
</>
)
}이러면 name === "jimmy"가 true인 경우 즉, name이 jimmy였을 때만 뒤의 JSX가 렌더링 됩니다.
5. undefined를 렌더링 하지 않아야 합니다.
만약 어떤 컴포넌트가 undefined만 리턴하여 렌더링 하려고 하면 오류가 발생합니다.
하지만 JSX 내부에서 undefined를 렌더링 하는 것은 괜찮습니다. null과 마찬가지로 아무것도 나타나지 않을 것입니다.
어떤 값이 undefined일 때 보여주고 싶은 것이 있다면
function App() {
const name = "jimmy";
return (
<>
<div>hello</div>
<div>world</div>
<div>{name || "John Doe"}</div>
</>
)
}이렇게 || 연산자와 함께 사용하여 그 뒤에 기본값을 적어주면 됩니다.
6. 인라인 스타일링
리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어주어야 합니다.
스타일 요소 중 border-radius처럼 '-' 문자가 포함되는 경우에는 카멜 표기법으로 표기하여 borderRadius로 작성해야 합니다.
function App() {
const name = "jimmy";
return (
<>
<div>hello</div>
<div>world</div>
<div
style={{
borderRadius: "10px",
backgroundColor: "aliceblue",
padding: 20
}}
>{name || "John Doe"}</div>
</>
)
}만약 단위를 생략하면 px단위가 기본적으로 적용됩니다.
7. class 대신 className
<div class="myClass">나의 클래스</div>html에서는 보통 위와 같이 class를 선언하여 스타일을 입히거나 여러 요소들을 같이 핸들링합니다.
JSX에서는 class 대신 className을 사용합니다. 뒤에 Name만 추가되었지 class가 하는 모든 역할을 className도 수행할 수 있습니다.
<div className="myClass">나의 클래스</div>만약 class를 사용하면 오류가 발생합니다.
8. 꼭 닫아야 하는 태그
html 코드를 작성하다 보면 가끔 태그를 닫지 않은 채로 코드를 작성하기도 됩니다. input이나 br 같은 태그가 대표적인 예입니다. 닫지 않아도 아무런 문제 없이 작동합니다.
하지만 JSX에서는 태그를 닫지 않으면 오류가 발생합니다.
9. 주석
JSX 안에서 주석을 작성하는 방법은 일반 JS에서 주석을 작성할 때와는 조금 다릅니다.
function App() {
const name = '리액트';
return (
<>
{/* 주석은 이렇게 작성합니다. */}
<div
className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성 할 수 있습니다.
>
{name}
</div>
// 하지만 이런 주석이나 /* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
<input />
</>
);
}일반 JS에서는 아무 데나 //나 /* /를 사용할 수 있었지만 JSX에서는 보통 {} 안에 / */로 작성하고 //를 사용할 수 있는 경우도 제한됩니다.
