JSX

:D ยท2021๋…„ 11์›” 30์ผ
1

React ๐Ÿ“š

๋ชฉ๋ก ๋ณด๊ธฐ
1/8
post-thumbnail

๐Ÿ“Œ ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ์™€ ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

JSX๋ž€?

const element = <h1>Hello, world!</h1>;

JavaScript๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•, ์‰ฝ๊ฒŒ ๋งํ•ด HTML ๋ฌธ๋ฒ•์„ JavaScript ์ฝ”๋“œ ๋‚ด๋ถ€์— ์“ด ๊ฒƒ. JSX๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋“ค์€ ๋นŒ๋“œ๋  ๋•Œ, Babel์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜์‹œ์ผœ์ค€๋‹ค.

๋ฆฌ์•กํŠธ ๋ฌธ๋ฒ•

  • ๋ฆฌ์•กํŠธ๋Š” ํ•˜๋‚˜์˜ ์š”์†Œ๋กœ ๊ผญ ๊ฐ์‹ธ์ฃผ์–ด์•ผํ•œ๋‹ค. โ†’ Virtual DOM์—์„œ ์ปดํฌ๋„ŒํŠธ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•ด ๋‚ผ ๋•Œ ํšจ์œจ์ ์œผ๋กœ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋„๋ก ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€๋Š” ํ•˜๋‚˜์˜ DOM ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ์•ผ ํ•œ๋‹ค๋Š” ๊ทœ์น™
import React from 'react';

function App(){
	return (
		<div>
			<h1> React </h1>
			<h2> Study </h2>
		</div>
	);
}

export default App;

๊ผญ <div>๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค. <Fragment> or <> ์‚ฌ์šฉ ํ•ด๋„ ๋จ.

  • JSX์•ˆ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. {} ๊ฐ์‹ธ์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
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;
  • undefined๋ฅผ ๋ Œ๋”๋ง ํ•˜์ง€ ์•Š์„ ๋•Œ๋Š” OR (||) ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
import React from 'react';

function App(){

	const name = undefined;

	return (
		<div>
			{name || 'React'}
		</div>
	);
}

export default App;
  • ์Šคํƒ€์ผ ์š”์†Œ๋ฅผ ์ ์šฉํ•  ๋•Œ๋Š” ์นด๋ฉœํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ์ž‘์„ฑํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

ex) background-color โ‡’ backgroundColor

  • class ๋Œ€์‹  className์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์ฃผ์„์€ {/* */} ์„ ์‚ฌ์šฉํ•œ๋‹ค.
profile
๊ฐ•์ง€์˜์ž…๋‹ˆ...๐Ÿฟ๏ธ

0๊ฐœ์˜ ๋Œ“๊ธ€