Fine in JSX:
<br />
NOT FINE AT ALL in JSX:
<br>
<h1>(2 + 3)</h1> โบ (2 + 3) : h1 tag ์์ ์์ฑ๋ string์ผ๋ก ์ธ์
<h1>{2 + 3}</h1> โบ 5 : h1 tag ์์ ์์ฑ๋ Javascript ์ฝ๋๋ก ์ธ์
- ์ธ๋ถ ์ ์ธ ๋ณ์ ์ฌ์ฉ
const sideLength = "200px";
const panda = (
<img
src="images/panda.jpg"
alt="panda"
height={sideLength}
width={sideLength} />
);
- ๋ณ์ attribute ์ฒ๋ผ ์ฌ์ฉํ๊ธฐ
const pics = {
panda: "http://bit.ly/1Tqltv5",
owl: "http://bit.ly/1XGtkM3",
owlCat: "http://bit.ly/1Upbczi"
};
const panda = (
<img
src={pics.panda}
alt="Lazy Panda" />
);
function myFunc() {
alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}
<img onClick={myFunc} />
condition ? exprIfTrue : exprIfFalse
const tasty = (
<ul>
<li>Applesauce</li>
{ !baby && <li>Pizza</li> }
{ age > 15 && <li>Brussels Sprouts</li> }
{ age > 20 && <li>Oysters</li> }
{ age > 25 && <li>Grappa</li> }
</ul>
);
const strings = ['Home', 'Shop', 'About Me'];
const listItems = strings.map(string => <li>{string}</li>);
<ul>{listItems}</ul>
// This is fine in JSX, not in an explicit array
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
// This is also fine!
const liArray = [
<li>item 1</li>,
<li>item 2<li>,
<li>item 3</li>
];
<ul>{liArray}</ul>
1. list item์ด ๋ค์์ render ๋๋ DOM์ memory ํํ๋ก ์กด์ฌํด์ผ ํ ๋
(ex: to do list)
2. ํญ๋ชฉ์ ์์๊ฐ ๋ฐ๋๋ฉด ์๋๋ ๊ฒฝ์ฐ
โํญ๋ชฉ์ ์์๊ฐ ๋ฐ๋๋ ๊ฒฝ์ฐ์๋ key ๊ฐ์ผ๋ก index๋ฅผ ์ฌ์ฉํ๋ฉด ์๋๋ค.
React code๋ฅผ JSX ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ง ์๊ณ ์์ฑํ๋ ๋ฐฉ๋ฒ์ด๋ค. JSX element๊ฐ item์ ์์ฑํ๋ code๊ฐ compile ๋ ๋ ๋ฐ๋๋ ํํ๋ฒ์ด ๋ฐ๋ก createElement ์ด๋ค.
//JSX Expression
const h1 = <h1>Hello world</h1>;
//non JSX Expression
const h1 = React.createElement(
"h1",
null,
"Hello, world"
);