๐ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ์ฐธ๊ณ ํ์ฌ ์์ฑํ ๊ธ์ ๋๋ค.
const element = <h1>Hello, world!</h1>;
JavaScript๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ, ์ฝ๊ฒ ๋งํด HTML ๋ฌธ๋ฒ์ JavaScript ์ฝ๋ ๋ด๋ถ์ ์ด ๊ฒ. JSX๋ก ์์ฑ๋ ์ฝ๋๋ค์ ๋น๋๋ ๋, Babel์ด ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ก ๋ณํ์์ผ์ค๋ค.
import React from 'react';
function App(){
return (
<div>
<h1> React </h1>
<h2> Study </h2>
</div>
);
}
export default App;
๊ผญ <div>
๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๋๋ค. <Fragment>
or <>
์ฌ์ฉ ํด๋ ๋จ.
import React from 'react';
function App(){
const name = "๋ฆฌ์กํธ";
return (
<div>
<h1> {name} </h1>
<h2> Study </h2>
</div>
);
}
export default App;
if๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค. ์ผํญ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด์ผํ๋ค.
ํน์ ์กฐ๊ฑด์๋ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๊ณ , ๋ง์กฑํ์ง ์์ ๋๋ ๋ณด์ฌ์ฃผ์ง ์์ ๋ ์กฐ๊ฑด๋ถ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด๋๋์ง๋ง AND ์ฐ์ฐ์ (&&)๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
import React from 'react';
function App(){
const name = "๋ฆฌ์กํธ";
return (
<div>
/*{name === '๋ฆฌ์กํธ' ? <h1> React </h1> : <h1> null </h1>*/
{name === '๋ฆฌ์กํธ' && <h1> React </h1>}
</div>
);
}
export default App;
import React from 'react';
function App(){
const name = undefined;
return (
<div>
{name || 'React'}
</div>
);
}
export default App;
ex) background-color โ backgroundColor
{/* */}
์ ์ฌ์ฉํ๋ค.