0️⃣ JSX란 무엇인가요?
JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 좀더 쉽고 직관적으로 구성하기 위해 사용됩니다.
JSX는 JavaScript 코드 안에서 HTML과 비슷한 구문을 사용할 수 있게 해주어 UI를 선언적으로 표현할 수 있도록 도와줍니다. JSX는 리액트 요소(React Element)를 생성하기 위한 문법입니다.
💡 JSX의 특징
JavaScript 표현식 포함: JSX 안에서는 JavaScript 표현식을 중괄호 {}로 감싸서 사용할 수 있습니다.
HTML과 유사한 문법: HTML과 비슷한 문법을 사용하여 UI를 표현할 수 있습니다.
가독성: HTML과 JavaScript를 섞어 사용할 수 있어 가독성이 좋습니다.
1️⃣ JSX가 브라우저에 보여지는 과정
🐸 : 아래는 JSX로 작성한 react 프로젝트가 눈에는 보이지 않지만 브라우저로 보이는 과정을
간단하게 설명했어요.
1. 함수형 컴포넌트 작성
먼저, 함수형 컴포넌트를 JSX코드로 작성합니다. 함수형 컴포넌트는 JavaScript 함수로 작성되며,
아래 코드는 함수내부에서 선언된 name 변수를 html 화면에 표시하여 반환합니다.
//pages/mainPage/index.jsx
// 함수형 컴포넌트 작성
const MainPage = () => {
const name = "Main Page";
return (
<div>
<h1>Welcome to the {name}!</h1>
<p>This is the main content of the page.</p>
</div>
);
};위의 코드가 JSX문법으로 쓰여진 코드파일이며 babel이라는 JavaScript transcompiler 를통해
일반 자바스크립트 형태의 코드로 변환되어 브라우저에서 실행됩니다.
브라우저에서
Elements콘솔을 보면 위에서 우리가 짠 코드와는 다른 순수한html과js코드로 변환되어 보이는며 우리가 짠 JSX코드를 볼 수 없습니다
그 이유는😲😲 브라우저는 결국 JSX코드를 지원하기 않기 때문입니다 그렇기에 react의 jsx구문으로 만들어진 코드는 컴파일이 필수 입니다.
2. Babel을 사용한 컴파일
JSX 코드는 브라우저가 이해할 수 있는 JavaScript 코드로 변환되어야 합니다.
이 변환 작업은 주로 Babel과 같은 도구를 사용하여 수행됩니다.
아래는 Babel을 통해 JSX를 JavaScript로 변환하는 컴파일 과정을 거친 결과 입니다.
//pages/mainPage/index.jsx
export default const MainPage = () => {
const name = "Main Page";
return React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome to the ', name, '!'),
React.createElement('p', null, 'This is the main content of the page.')
);
};☝🏻 위와 같이 자바스크립트로 작업하면 지루하고 오래걸릴 명령형 접근 방식을 벗어나
리액트로 작업하면, JSX를 통해 우리는 단지 태그와 단락들이 있는 최종상태를 정의하기만 하면
리액트는 이런 것들을 화면에 불러오기 위한 지시사항들을 뒷단에서 알아서 생성해준다.😏
3. 가상 DOM에 렌더링
React 엘리먼트는 React의 가상 DOM에 렌더링됩니다.
이때 ReactDOM.render() 함수를 사용하여 렌더링합니다.
🚩 React의 가상 DOM에 대해서는 따로 정리 해볼게요
import mainPage from "./pages/mainPage"
ReactDOM.render(
React.createElement(MainPage, null),
document.getElementById('root')
);2️⃣ JSX 문법
1. 반드시 부모 요소 하나가 감싸는 형태여야 한다
function App() {
return (
<>
<div>Hello</div>
<div>World!!</div>
</>
);
}
// [ERROR] 틀린 예시 두개의 div 태그에 해당하는 부모 태그가 존재하지 않는다
function App() {
return
(
<div>Hello</div>
<div>World!!</div>
);
}html 요소가 두개이상일때 위와같이
<div>나<>(<Fragment>의 생략형 ) 으로 꼭 감싸주어야한다.
📣꼭 부모가 감싸야 하는 구조적 이유는
React.createElement 함수의 구조를 보면 알 수 있는데
return React.createElement('div', {}, (내용))
React.createElement( <첫번째 인자> , <두번째 인자> , <세번째 인자> )<첫번째 인자>는 생성해야 하는 요소인데요
예를 들면, div 같은 것과 같은 HTML요소 입니다. (div, h1, p, button..)return React.createElement('div', <두번째 인자>, <세번째 인자>)```
-
<두번째 인자>는 이런 요소를 설정하는 객체입니다
특히, 이 요소의 모든 속성을 설정하는 객체를 말합니다.
( 객체의 속성({style:{size:10px}} 또는 이벤트 핸들러, classNames 등)return React.createElement('div', { className : cardwrap }, <세번째 인자>)``` -
<세번째 인자>세 번째 인자는 첫번째 인자에있는 HTML 부모 태그의 여닫는 태그 사이에 있는 컨텐츠입니다, 아래 코드처럼 "Hello World"와같이 단일 문자열이나, React.createElement문을 다시 열 수 있습니다.
사실 이것은 단지 세 번째 인자가 아니라 여닫는 태그 사이에 있는 다양한 컨텐츠 조각들인
무한대의 긴 목록의 인자를 가질 수도 있습니다.
return React.createElement('div', { className : cardwrap }, "Hello Word!!" || , <>, ......))```
이상으로 JSX에 대한 간단한 소개를 마치겠습니다. 추가적인 질문이나 궁금한 점이 있으시다면 언제든지 댓글로 남겨주세요!
끝🙋🏻
💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.! talk!talk!
