๐คJSX๋?
์ฝ๊ฒ ๋งํด HTML ๋ฌธ๋ฒ์ JavaScript ์ฝ๋ ๋ด๋ถ์ ์ด ๊ฒ์ด ๋ฐ๋ก JSX๋ค!
(JavaScript eXtension)
์ฆ, JavaScript์ ํ์ฅ ๋ฒ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ผ๊ณ ๋ณด๋ฉด๋๋ค.
"React์์ HTML์ ํํํ ๋, JSX๋ฅผ ์ฌ์ฉํ๋ค. ์ธ๊ด์ HTML๊ฐ์ ๋งํฌ์ ์ธ์ด๋ฅผ ๋ฆฌํฐ๋ด๋ก ์ ๋ ฅํ๋ ๊ฒ์ผ๋ก ๋ณด์ด๋๋ฐ, ๋น๋ ์ Babel์ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ HTML์ฒ๋ผ ํํํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฉ์ดํ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋ค."
[์ถ์ฒ]๋๋ฌด์ํค
์ฆ, JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์์ HTML ๋ฌธ๋ฒ์ ์ฌ์ฉํด์ view๋ฅผ ๊ตฌ์ฑํ ์ ์๊ฒ ๋์์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ด๋ฉฐ ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ์์ฒญ๋ ๋์์ ์ฃผ๊ณ ์๋ค.
React.js ๋ ์ผ๋ฐ JavaScript ๋ฌธ๋ฒ์ด ์๋ JSX ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ UI๋ฅผ ํ ํ๋ฆฟํ ํ๋ค.
JSX๋ฅผ ์ฌ์ฉํ๋๊ฒ์ด ํ์๋ ์๋์ง๋ง ์ด๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ฅ์ ์ด ์๋ค.
- JSX๋ ์ปดํ์ผ๋ง ๋๋ฉด์ ์ต์ ํ ๋๋ฏ๋ก, ๋น ๋ฅด๋ค
- Type-safe (์ด๋ ํ ์ฐ์ฐ๋ ์ ์๋์ง ์์ ๊ฒฐ๊ณผ๋ฅผ ๋ด๋์ง ์๋๊ฒ, ์ฆ ์์ธก ๋ถ๊ฐ๋ฅํ ๊ฒฐ๊ณผ๋ฅผ ๋ํ๋ด์ง ์๋ ๊ฒ [์ถ์ฒ: jerrypop ๋ธ๋ก๊ทธ]) ํ๋ฉฐ ์ปดํ์ผ๋ง ๊ณผ์ ์์ ์๋ฌ๋ฅผ ๊ฐ์ง ํ ์ ์๋ค.
- HTML์ ์ต์ํ๋ค๋ฉด, JSX๋ฅผ ์ฌ์ฉํ์ฌ ๋ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ํ ํ๋ฆฟ์ ์์ฑ ํ ์ ์๋ค.
ํ๋ฒ ์๋ ์ฝ๋๋ค์ ํตํด JSX์ ๋ํ์ฌ ์์๋ณด์ง
function App(){
return(
<div>
Hello<b>react</b>
</div>
);
}
ํด๋น ์ฝ๋๋ ์๋์ ๊ฐ์ด ๋ณํ๋๋ค.
function App(){
return React.createElement("div", null, "Hello", React.createElement("b", null,"react"));
- JSX๋ ํ๋์ ํ์ผ์ ์๋ฐ์คํฌ๋ฆฝํธ์ HTML์ ๋์์ ์์ฑํ์ฌ ํธ๋ฆฌํ๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ์์ HTML์ ์์ฑํ๋ฏ์ด ํ๊ธฐ ๋๋ฌธ์ ๊ฐ๋
์ฑ์ด ๋๊ณ ์์ฑํ๊ธฐ ์ฝ๋ค.
๐
Q . JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ธ๊ฐ์? A . JSX๋ ๋ฆฌ์กํธ๋ก ๊ฐ๋ฐํ ๋ ์ฌ์ฉ๋๋ ๊ฒ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ด ์๋๋ค. ๋ฐ๋ฒจ์์๋ ์ฌ๋ฌ ๋ฌธ๋ฒ์ ์ง์ํ ์ ์๋๋ก preset ๋ฐ plugin์ ์ค์ ํ๋ค. ๋ฐ๋ฒจ์ ํตํด ๊ฐ๋ฐ์๋ค์ด ์์๋ก ๋ง๋ ๋ฌธ๋ฒ, ํน์ ์ฐจ๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ๋ค์ ์ฌ์ฉํ ์ ์๋ค.
JSX ๋ฌธ๋ฒ ๊ท์น
1.๋ฐ๋์ ๋ถ๋ชจ ์์ ํ๋๊ฐ ๊ฐ์ธ๋ ํํ์ฌ์ผํ๋ค.
Virtual DOM์์ ์ปดํฌ๋ํธ ๋ณํ๋ฅผ ๊ฐ์งํ ๋, ์ปดํฌ๋ํธ ๋ด๋ถ์์๋ ํ๋์ DOM ํธ๋ฆฌ ๊ตฌ์กฐ๊ฐ ์ด๋ค์ ธ์ผํ๋ค.
์์
(<div></div>)
// div๋ฅผ ์ฌ์ฉ ํ์๋ค. ๋๋ฌธ์์คํ์ผ ์ ์ฉ์ ์์ฑํ ์ฝ๋๋ฅผ div๋ก ํ๋ฒ ๋ ๊ฐ์๋ค๋ ๋ถ๋ถ์ ๊ณ ๋ คํด์ผ ํ๋ค.
function App() {
return (
<div>
<div>Hello</div>
<div>GodDaeHee!</div>
</div>
);
}
(<Fragment></Fragment>)
// <Fragment>๋ฅผ ์ฌ์ฉ๊ฐ๋ฅ ํ์ง๋ง <div>ํ๊ทธ๋ณด๋ค ๋ฌด๊ฑฐ์ด ํธ์ด๋ค.
function App() {
return (
<Fragment>
<div>Hello</div>
<div>GodDaeHee!</div>
</Fragment>
);
}
(<></>)
function App() {
return (
<>
<div>Hello</div>
<div>GodDaeHee!</div>
</>
);
}
2. ์๋ฐ์คํฌ๋ฆฝํธ ํํ์
- JSX ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์ ์ฌ์ฉํ ์ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์ ์์ฑ์ JSX๋ด๋ถ์ ์ฝ๋๋ฅผ { }๋ก ๊ฐ์ธ์ฃผ๋ฉด ๋๋ค.
- ํด๋น ๋งํฌ์ ์๋ ๋ชจ๋ JavaScript ํํ์์ ๋ฃ์ ์ ์๋ค.
function App() {
const name = 'GodDaeHee';
return (
<div>
<div>Hello</div>
<div>{name}!</div>
</div>
);
}
3. if๋ฌธ(for๋ฌธ) ๋์ ์ผํญ ์ฐ์ฐ์(์กฐ๊ฑด๋ถ ์ฐ์ฐ์) ์ฌ์ฉ
- if ๊ตฌ๋ฌธ๊ณผ for ๋ฃจํ๋ JavaScript ํํ์์ด ์๋๊ธฐ ๋๋ฌธ์ JSX ๋ด๋ถ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์์๋ ์ฌ์ฉํ ์ ์๋ค.
- ์กฐ๊ฑด๋ถ์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ ๋๋ง ์ JSX ์ฃผ๋ณ ์ฝ๋์์ if๋ฌธ์ ์ฌ์ฉํ๊ฑฐ๋, {}์์์ ์ผํญ ์ฐ์ฐ์(์กฐ๊ฑด๋ถ ์ฐ์ฐ์)๋ฅผ ์ฌ์ฉ ํ๋ค.
4. React DOM์ HTML ์ดํธ๋ฆฌ๋ทฐํธ ์ด๋ฆ ๋์ CamelCase ํ๋กํผํฐ ๋ช ๋ช ๊ท์น์ ์ฌ์ฉ ํ๋ค.
์นด๋ฉ ์ผ์ด์ค (Camel Case)
- ํํ ์ ํ๋ ํ๊ธฐ๋ฒ. ๊ฐ์ฅ ์ฒ์์ ์ค๋ ๋ฌธ์๋ ์๋ฌธ์๋ก ํ๊ธฐํ๊ณ , ๊ฐ ๋จ์ด์ ์ฒซ๊ธ์๋ ๋๋ฌธ์๋ก ํ๊ธฐ
- deleteNumber, insertNumer, tabindex๋ tabIndex๊ฐ ๋๋ค.(๊ฐ ๋จ์ด์ ์ฒซ๊ธ์๊ฐ ๋๋ฌธ์๋ก ํ๊ธฐ๋จ์ ๋ณด์ฌ์ค)
5. JSX ๋ด์์ ์ฃผ์ ์ฌ์ฉ ๋ฐฉ๋ฒ
React ๋ด์์ ์ฃผ์ ์ฒ๋ฆฌ๋ฐฉ๋ฒ์ javascript์ ๋์ผํ๊ฒ ํ์ค ์ฃผ์์ //์ ์ด์ฉํ๊ณ ์ด๋ ค์ค์ /* */์ ์ด์ฉํฉ๋๋ค.
//console.log("sungmin");
/*
console.log("yoon");
console.log("coding");
*/
JSX๋ด์์๋ javascript์ ์ฌ๋ฌ์ค ์ฃผ์์ {}๋ก ๊ฐ์ธ์ค ํํ๋ก ์ฌ์ฉํฉ๋๋ค.
{/* <div className = "Yoon"> React JSX</div> */}
'Front-end > REACT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] React๋ ๋ฌด์์ธ๊ฐ? (0) | 2021.12.18 |
---|