🕊️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 = 마크업이라고 보면 됌
출처 : 오즈코딩스쿨 및 구글링
'Studying > React' 카테고리의 다른 글
<수정 중 : 필터 부분 채우기>리액트 공부하기 - map(), filter() 을 활용한 반복 렌더링 (0) | 2025.04.06 |
---|---|
리액트 공부하기 - 컴포넌트 만들기, 함수형 컴포넌트와 class 컴포넌트 (0) | 2025.04.05 |
리액트 공부하기 - vite 설치 하기. 깃은 언제? 그리고 그 후에, 어느 파일에 코드를 쳐야할까 ? (0) | 2025.04.05 |
리액트 공부하기 - 시작에 앞서서 (0) | 2025.04.03 |
리액트 공부하기 - node.js / NPM / NPX (6) | 2025.04.02 |