JSX가 무엇인지, JSX의 규칙에 대해 알아봅니다.
JSX는 JavaScript의 구문 확장입니다. JavaScript 파일 내에 HTML과 같은 형식을 작성할 수 있습니다.
웹, Html, Css, JavaScript를 기반으로 합니다. 웹 개발자들은 페이지의 내용을 Html 파일로, 디자인을 Css 파일로, 로직을 JavaScript 파일로 별도로 작성했습니다.
<div>
<pre class="brush:php;toolbar:false">
//CSS
.wrapper {
display : flex;
}
function myFunction() {
document.getElementById("wrapper").innerHTML = "Hello world";
}
그러나 웹이 더욱 상호작용적으로 변하면서 논리가 더욱 중요해졌습니다. JavaScript가 Html을 관리하고 있었습니다. 따라서 React에서는 논리와 형식 지정이 구성 요소에 함께 존재합니다.
React 구성요소 예시 :
import React, { useState } from "react";
function App() {
const [formData, setFormData] = useState({
username: "",
password: "",
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData((prevState) => ({ ...prevState, [name]: value }));
};
return (
<form>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
각 편집 시 HTML 태그가 서로 동기화되도록 렌더링 마크업과 로직을 함께 유지하는 것이 중요합니다.
React 컴포넌트는 React가 브라우저에서 렌더링하는 마크업을 포함하는 JavaScript 함수입니다. React 구성 요소는 이 마크업에 JSX라는 구문 확장을 사용합니다. JSX는 HTML과 같습니다.
1. 단일 루트 요소 반환
구성 요소에서 요소를 반환하려면 단일 상위 태그로 요소를 래핑하세요. 또는 조각(<>)을 사용할 수 있습니다.
예: div
<div>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://picsum.photos/200/300"
alt="lorempicsum"
>
</div>
예를 들어 <>
<>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://picsum.photos/200/300"
alt="lorempicsum"
/>
</>
2. 모든 태그 닫기
JSX에서는 모든 태그가 닫혀되어야 합니다. 예를 들어 자동 닫는 태그(예: HTML의 img
)예 :
<img
src="https://picsum.photos/200/300"
alt="lorempicsum"
/>
3. 낙타케이스
React에서는 많은 HTML 속성이 camelCase로 작성됩니다.
예 :
<img
src="https://picsum.photos/200/300"
alt="lorempicsum"
className="photo"
/>
<button onClick={handleClick}>Click Me</button>
JSX에서 때때로 약간의 JavaScript 로직을 추가하거나 이 마크업 내부의 동적 기능을 참조하고 싶을 때가 있습니다. 이 경우 JSX
에서 대괄호를 사용할 수 있습니다.JSX에 문자열 속성을 전달하려면 작은따옴표나 큰따옴표로 묶어야 합니다
예 :
<div>
<pre class="brush:php;toolbar:false">
//CSS
.wrapper {
display : flex;
}
여기서는 src와 alt가 문자열로 전달됩니다. 그러나 src 또는 대체 텍스트를 동적으로 지정하려면 큰따옴표 대신 중괄호를 사용하여 javascript의 값을 사용할 수 있습니다
예 :
function myFunction() {
document.getElementById("wrapper").innerHTML = "Hello world";
}
중괄호 {}와 함께 JavaScript를 사용할 수 있습니다. 함수, 변수 등을 사용할 수 있습니다.
예 :
import React, { useState } from "react";
function App() {
const [formData, setFormData] = useState({
username: "",
password: "",
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData((prevState) => ({ ...prevState, [name]: value }));
};
return (
<form>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
React에서는 인라인 스타일을 사용할 필요가 없습니다(CSS 클래스는 대부분의 경우에 적합합니다). 그러나 인라인 스타일이 필요한 경우 스타일 속성에 개체를 전달할 수 있습니다. 이중 중괄호를 사용하세요.
예 :
기본 함수 TodoList() 내보내기 {
반품 (
JSX에서 {{ }}를 보면 JSX 컬리 내부의 객체라는 것을 알 수 있습니다.
인라인 스타일 속성은 camelCase로 작성해야 합니다.
여러 표현식을 하나의 객체로 이동하고 JSX에서 중괄호 안에 사용할 수 있습니다
상수 사람 = {
이름: '그레고리오 Y. 자라',
주제: {
배경색상: '빨간색',
색상: '노란색'
}
};
기본 함수 내보내기 TodoList() {
반품 (
<div>
<hr>
<h2>
결론
</h2>
<p>JSX는 웹 개발 프로세스를 더욱 효과적이고 실용적으로 만드는 중요한 도구입니다. JSX를 사용하면 렌더링 마크업과 로직을 함께 유지하여 모든 편집에서 HTML 데칼을 서로 동기화된 상태로 유지할 수 있습니다.</p>
<hr>
<p>제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)<br>
<img src="https://img.php.cn/upload/article/000/000/000/173199438683667.jpg" alt="Converting HTML to JSX : JSX and Rules of JSX"></p>
위 내용은 HTML을 JSX로 변환하기: JSX와 JSX의 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
