JSX (JavaScript XML)은 JavaScript 언어의 확장으로, 개발자들이 JavaScript 코드 내에서 HTML과 유사한 구문을 작성할 수 있도록 합니다. 이는 사용자 인터페이스를 구축하는 인기있는 JavaScript 라이브러리인 React에서 널리 사용됩니다. JSX를 사용하면 HTML처럼 보이지만 실제로는 JavaScript와 HTML의 혼합물인 코드를 작성할 수 있습니다.
- JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
- JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
- JSX는 기본적으로 자바스크립트 문법유사하므로 자바스크립트 예약어 사용을 피해야 한다.
코드 이해하기
import 구문
특정 파일을 불러오는 것을 의미 합니다.
import는 자바스크립트의 고유 기능은 아니고 Node.js에서 지원하는 기능이며 이러한 기능을 브라우저에서도 사용하기 위해 번들러를 사용하며, 주로 사용되는 번들러는 웹팩(webpack)이 있습니다.
Hello Word
가장 단순한 Hello , world 출력해보기
아래의 코드는 index.html 파일에
가 있음으로 가능 함import ReactDOM from 'react-dom/client';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world</h1>);JSX에 표현식 포함하기
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;function getGreeting(user) {
if(user) {
return <h1>환영합니다. {member.name}님</h1>
}
return <h1>환영 합니다. 방문자님...</h1>
}JSX의 장점
보기 쉽고 익숙하다.
HTML 코드를 작성하는 것과 비슷해서 익숙하고 작성하기 쉽습니다.
더욱 높은 활용도
JSX는 우리가 알고 있는 div나 span같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있습니다. src/index.js 파일을 열어 보면 App 컴포넌트를 마치 HTML 태그 쓰듯이 작성합니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);JSX 문법
jsx는 정말 편리한 문법이지만, 올바르게 사용하려면 몇 가지 규칙을 준수해야 합니다.
감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.
import './App.css';
function App() {
return (
<h1>리액트 안녕</h1>
<h2>잘 작동 하니??</h2>
);
}
export default App;function App() {
return (
<Fragment>
<h1>리액트 안녕</h1>
<h2>잘 작동 하니??</h2>
</Fragment>
);
}자바스크립트 표현
JSX는 DOM 요소를 렌더링하는 기능이외에 자바스크립트 표현식을 쓸 수 있습니다.
중괄호를 사용해서 원하는 위치에 데이터 바인딩을 할 수 있습니다. (엄청난 장점)
function App() {
const name = "리액트!!!"
return (
<Fragment>
<h1>{name} 안녕</h1>
<h2>잘 작동 하니??</h2>
</Fragment>
);
}if 문 대신에 조건부 연산자
JSX 내부의 자바스크립트에서 if 문을 사용할 수 없습니다. 하지만 조건에 따라 다른 렌더링을 해야 할 때 JSX 밖에서 if문을 사용해 사전에 값을 설정하거나, {}안에 조건부 연산자를 사용하면 됩니다.
function App() {
const name = "리액트"
return (
<div>
{name === "리액트" ? (<h1>리액트 입니다.</h1>) : (<h2>리액트가 아닙니다.</h2>)}
</div>
);
}AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있습니다.
function App() {
const name = "리액트"
return <div>{name === "리액트" && <h1>리액트 입니다.</h1>}</div>
}인라인 스타일링
리액트에서 DOM요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.
스타일 이름 중에서 background-color처럼 -(하이픈)이 포함되는 경우, 이런 이름은 backgroudColor(카멜 표기법)으로 작성해야 합니다.
import './App.css';
function App() {
const name = "리액트"
const style = {
backgroundColor: "#222",
color: "royalBlue",
fontSize: "2em",
};
return <div style={style}>{name === "리액트" ? <h1>리액트 입니다.</h1> : null}</div>
}
export default App;class 대신 className
HTML에서 CSS 클래스를 사용할 때는
로 작성하지만 JSX에서는 class가 아닌 className으로 설정해야 합니다. (최신 버전에서는 콘솔에 경고를 출력하고 자동 변경 해 줍니다.) 👉 JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 `camelCase`프로퍼티 명명 규칙을 사용합니다.import './App.css';
const member = {
name: "곰돌이사육사",
job: "Developer",
addr: "경기도 수원시",
gender: "남성"
};
function getGeeting(user) {
return (user) ? (<h1>환영 합니다.{member.name}</h1>) :
(<h1>환영 합니다. 방문자님.</h1>);
}
function App() {
return (
<div className="App">
<p className='title-name'>안녕하세요. 저는 {member.name} 입니다.</p>
<p className='title-name'>직업은 {member.job} 입니다.</p>
<p className='title-name'>주소는 {member.addr} 입니다.</p>
<p className='title-name'>성별은 {member.gender} 입니다.</p>
<div>{getGreeting(false)}</div>
</div>
);
}
export default App;.title-name {
color: royalblue;
font-size: 2em;
}꼭 닫아야 하는 태그
JSX에서는 반드시 태그를 받아야 합니다. />
리액트에서 ID 사용 하기
React에서 CSS ID를가진 요소의 ID를 가져오기 위해서는 getElementById와 같은 네이티브 DOM API를 사용하는 것이 아니라, ref를 사용해야 합니다.
import React, { useRef } from 'react';
function MyComponent() {
const divRef = useRef(null);
const handleClick = () => {
console.log(divRef.current.id);
};
return (
<div id="myDiv" ref={divRef} onClick={handleClick}>
Click me!
</div>
);
}