JSXとvar vs let
20737 ワード
JSX
JavaScriptの拡張構文。XMLとあまり差がない
// jsx 코드
function App() {
return (
<div>
Hello <b>react</b>
</div>
)
}// js 코드
function App() {
return React.createElement(“div“, null, “Hello “, React.createElement(“b“, null, “react“));
}1.JSXのメリット
分かりやすい
より高い利用率:htmlタグのほか、htmlタグを使用するようにJSXで作成されたコンポーネントも使用できます.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);2.JSX文法
2-1. ラップの要素
構成部品に複数の要素がある場合は、親要素で包む必要があります.
仮想DOMで素子変化を検出する際の効率的な比較を行うためには,素子内部にDOMツリー構造が必要である.
// 컴파일 실패
function App() {
return (
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
)
}
// 정상작동
function App() {
return (
<div>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</div>
);
}2-2. Fragment
主にラップの要素として分割を使用
分割によりDOMマークアップが減少し、パフォーマンスが向上します.CSSメッシュまたはFlexboxを使用した場合の
<div>と異なり、問題ありません.function App() {
return (
<>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;2-3. JavaScript表現
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}2-4. 条件演算子
JSX内部のJavaScript式でif文は使用できません
JSX以外でif文を使用するか、{}内で条件演算子(3つの演算子)を使用する必要があります.
function App() {
const name = "리액트";
return (
<>
{name === "리액트" ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</>
);
}function App() {
const name = "뤼왝트";
return <>{name === "리액트" && <h1>리액트입니다.</h1>}</>;
}2-5. インラインスタイル
リアクター内のDOM要素にスタイルを適用する場合は、文字列ではなくオブジェクト形式で挿入します.
スタイルはキャラメル記号で書きます
function App() {
const name = ‘리액트‘;
const style = {
// background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
backgroundColor: ‘black‘,
color: ‘aqua‘,
fontSize: ‘48px‘, // font-size -> fontSize
fontWeight: ‘bold‘, // font-weight -> fontWeight
padding: 16 // 단위를 생략하면 px로 지정됩니다.
};
return <div style={style}>{name} </div>;
}2-6. className
import './App.css';
function App() {
const name = '리액트';
return <div className="react">{name}</div>;
}2-7. タグを閉じる
htmlでは、
<input>のようなラベルの一部は閉じて使用されません.ただしJSXでは、すべてのタグをオフにする必要があります.
ラベルの間に内容がない場合は、
<input />のようにself-clostingラベルで代用できます.2-8. コメント
//の代わりに{/* */}を使用//を使用するには、ラベル内で使用する必要があります.JavaScript varvs let
varの領域は関数単位,letの領域はブロック単位である
// 동일 함수 내에서 var 변경 시 그대로 적용
function myFunction() {
var a = "hello";
if(true) {
var a = "bye";
console.log(a); // bye
}
console.log(a); // bye
}
// let은 블록 단위로 다른 블록에서 선언 시 다른 변수로 취급
// 단 let은 동일 블록 내에서 중복 선언 불가
function myFunction1() {
let a = 1;
if(true) {
let a = 2;
console.log(a); // 2
}
console.log(a); // 1
}
// 동일 함수 내에서 var 변경 시 그대로 적용
function myFunction() {
var a = "hello";
if(true) {
var a = "bye";
console.log(a); // bye
}
console.log(a); // bye
}
// let은 블록 단위로 다른 블록에서 선언 시 다른 변수로 취급
// 단 let은 동일 블록 내에서 중복 선언 불가
function myFunction1() {
let a = 1;
if(true) {
let a = 2;
console.log(a); // 2
}
console.log(a); // 1
}Reference
この問題について(JSXとvar vs let), 我々は、より多くの情報をここで見つけました https://velog.io/@sangmin7648/JSX와-var-vs-letテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol