- 자바스크립트의 확장 문법 - XML과 비슷하게 생김 - 코드가 브라우저에서 실행되기 전에 번들링(묶이는) 과정에서 바벨(최신 자바스크립트 문법 -> ES5)을 이용해 일반 자바스크립트 형태의 코드로 변환되어 사용됨
JSX 예시
# JSX 코드
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}
# 같은 동작을 하는 코드 - 가독성이 좋지 않음
function App() {
return React.createElement("div", null, "Hello ", React.creatElement("b", null, "react"));
}
JSX 예시2 - src/App.js 中 기본 코드 설명
import logo from './logo.svg';
import './App.css';
// 함수 컴포넌트: function 키워드를 사용하여 만들어진 컴포넌트
function App() { // App이라는 함수 컴포넌트 생성
return ( // 이 아래의 코드는 JSX 코드임(html, 문자열 템플릿이 아님)
<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 예시3 -src/index.js 中 JSX를 html 을 작성하듯 쓰는 예시
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// ReactDOM.render: 컴포넌트를 페이지에 렌더링하는 역할
// react-dom 모듈을 불러와 사용할 수 있음
const root = ReactDOM.createRoot(document.getElementById('root')); // id가 root인 요소 안에 렌더링 하도록 설정, 'root'는 public/index.html 파일
// 페이지에 렌더링할 내용을 JSX 형태로 작성
root.render(
// React.StrictMode: 리액트 프로젝트에서 리액트의 레거시 기능을 사용하지 못하게 하는 기능
// 문자열 ref, componentWillMount 등 나중에 완전히 사라질 옛날 기능을 사용했을 때 경고 출력
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
JSX 예시3 실행 결과
JSX 예시4 - src/App.js 中 자바스크립트 값을 JSX안에서 렌더링하는 예시
// import logo from './logo.svg';
// import './App.css';
// import { Fragment } from 'react';
// 함수 컴포넌트: function 키워드를 사용하여 만들어진 컴포넌트
function App() { // App이라는 함수 컴포넌트 생성
const name = '리액트';
return ( // 이 아래의 코드는 JSX 코드임(html, 문자열 템플릿이 아님)
// div를 적지 않으면 에러 발생 -> Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포너느 내부는 하나의 DOM 트리 구조로 이루어져야 함
// div를 적고 싶지 않으면 Fragment 기능을 사용하면 됨 (= <> </>)
// <div> 또는 <Fragment>
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
// </div> 또는 </Fragment>
);
}
export default App;
리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다.
- 예외 falsy한 값인 0은 화면에 나타납니다.
EXAMPLE
function App() {
const number =0;
return number && <div>내용</div>
}
falsy한 값인 0은 화면에 나타나게 됨
AND 연산자(&&) 예시 -src/App.js 中 일부
function App() { // App이라는 함수 컴포넌트 생성
// AND 연산자(&&)
const name = '뤼왝트';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>
// // 아래의 코드와 같음
// return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div> // null 렌더링 시 아무것도 보여주지 않음
}
export default App;
AND 연산자 실행 결과 - null이라 브라우저에 아무것도 뜨지 않음
2-3. OR 연산자(||)
OR 연산자 예시 -src/App.js 中 일부
function App() {
const name = undefined;
// return name; // 불가능 - undefined를 호출하는 것은 오류 발생
// return name || '값이 undefined입니다.'; // 가능
// return <div>{name}</div> // 가능 - JSX 내부에서 undefined를 렌더링
return <div>{name || '리액트'}</div>; // 가능 - name값이 undefined일 때 보여주고 싶은 문구가 있는 경우
}
export default App;
/* src/App.js */
import './App.css';
function App() {
const name = '리액트';
return <div className="react">{name}</div>; // class=""로 작성해도 되지만, 경고 문구가 발생함. JSX에서는 className으로 사용
}
export default App;
css 파일 사용 예시 실행 결과
4. 주석
기존의 javascript 처럼 아무렇게나 작성하면 안됩니다. JSX에서는 조금 특별한 형태로 주석을 작성합니다.
{/* JSX 주석 작성법 */}
그럼 javascript 처럼 아무데나 작성하면 어떻게 될까요? 예시로 알아봅시다.
주석 예시 - src/App.js 中 일부
import './App.css'; // css는 위의 App.css 내용 확인
function App() {
const name = '리액트';
return (
<>
{/* 주석은 이렇게 작성합니다. */}
<div
className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
>
{name}
</div>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
<input />
</>
)
}
export default App;
