리액트 공부하기 - JSX

---

🕊️JSX란 ?

JSX는 JavaScript에 HTML을 섞어서 쓸 수 있게 만들어주는 문법
그래서 "JavaScript XML"이라는 뜻으로 JSX라는 이름이 붙었고,

리액트에서 이걸 쓰면 HTML처럼 쓰면서도 자바스크립트 기능도 같이 쓸 수 있음 ! 

 

 

 

→ JSX는 JavaScript XML

→ JSX란, JavaScript를 확장한 문법입니다.

 

- JSX는 JavaScript와 XML/HTML을 합친 것이라고 볼 수 있습니다.

- React에서는 JSX를 이용하여 화면에 UI를 나타냅니다.

- JSX를 사용하면 하나의 파일에 HTML 구조와 JavaScript를 함께 사용할 수 있습니다.

- 기존에는 .html 파일과 .js 파일로 구분하여 작성해 왔습니다.

 

// JSX 문법
function App() {
	return (
		<h1>안녕하세요</h1>
	);
}

// JSX를 사용하지 않는 코드
function App() {
	return React.createElement("h1", null, "안녕하세요");
}

 

---

🕊️ JSX 문법 

1. 한 줄로만 작성할 때는, 부모 요소로 묶지 않아도 되지만, 여러 줄로 코드 작성 시, 부모 요소로 묶지 않으면 에러 발생.

<div></div>로 감싸줄 수 있고, 빈 태그로도 감싸줄 수 있음. <></>

// 정상적으로 동작하는 코드
function App() {
	return (
		<div> 안녕하세요 </div>
	);
}

// 정상적으로 동작하는 코드
function App() {
	return (
		<div>  {/* <div>태그로 감싸줌 */}
			<h1>안녕하세요</h1>
			<h2>오즈코딩스쿨입니다</h2>
		</div>
	);
}

// 꼭 div태그가 아니고 빈 태그(Fragment)여도 감싸주기만 한다면 가능합니다.
function App() {
	return (
		<>     {/* Fragment로 감싸줌  */}
			<h1>안녕하세요</h1>
			<h2>오즈코딩스쿨입니다</h2>
		</>
	);
}

// 에러가 발생하는 코드
function App() {
	return ( {/* 부모요소로 감싸주지 않은 형태 */}
			<h1>안녕하세요</h1>
			<h2>오즈코딩스쿨입니다</h2>
	);
}

 

2. 자바스크립트 표현식 사용 가능.

JSX 내부에서 중괄호{}로 감싸면, JavaScript 표현식을 사용할 수 있다.

function App() {
	const name = '오즈코딩'; // JavaScript 표현식
	return (
		<div>
			<p>Hello</p>
			<p>{name}</p>
		</div>
	);
}

 

3. JSX에서는 class를 className이라고 해야함.

<!-- 기존 HTML 문서 -->
<div class="main">안녕하세요</div>

// JSX
<div className="main">안녕하세요</div>

 

 

4. 모든 태그를 닫아야 한다.

JSX에서는 태그를 명시적으로 닫아야 한다. <img> 태그와 같이 자체적으로 닫는 태그도 반드시 <img /> 로 작성해야 함

<br>도 마찬가지. <br></br>

---

🕊️ 마크업이란 ?

브라우저에 랜더링 하려고 작성하는 (화면에 보여지는 HTML구조) JSX 부분.

function Hello() {
  return (
    <div>
      <h1>Hello, Jane!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

여기서 <div>, <h1>, <p> 이 부분이 바로 마크업

 

JSX를 작성하는 게 곧 마크업을 쓰는 거야.
리액트에서는 HTML처럼 보이는 JSX를 통해 화면에 그려질 구조를 짜니까, JSX = 마크업이라고 보면 됌

 

 

---

출처 : 오즈코딩스쿨 및 구글링