728x90
๋ฐ˜์‘ํ˜•

CSS 1

React] Component & JSX

Component ํ™”๋ฉด ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•  ๋•Œ, ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ํ•œ ๋ฒˆ์— ๊ทธ๋ฆฌ๊ฒŒ ๋˜๋ฉด, ํ•˜๋‚˜์˜ ์†Œ์ŠคํŒŒ์ผ์— ๋งŽ์€ ์–‘์˜ ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด UI๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์†Œ์Šค๋ฅผ ์—ฌ๋Ÿฌ ์กฐ๊ฐ์œผ๋กœ ๋‚˜๋ˆ ์„œ ์ž‘์„ฑํ•˜์—ฌ ๊ฐ€์ ธ๋‹ค ์“ฐ๊ฒŒ ๋˜๋Š”๋ฐ ์ด๋ฅผ Component(์ปดํฌ๋„ŒํŠธ)๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. Component๋ฅผ ๋‚˜๋ˆ„๋Š” ๋ฒ”์œ„๋Š” ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๋ฉฐ, ๋ฒ„ํŠผํ•˜๋‚˜๊นŒ์ง€๋„ ๋‚˜๋ˆ ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž์˜ ๋Šฅ๋ ฅ์ด๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋‚˜๋ˆˆ ์—ฌ๋Ÿฌ ๊ฐœ์˜ Component๋ฅผ ๋ชจ์•„ ํ•œ ๊ฐœ์˜ ํŽ˜์ด์ง€๋กœ ๋งŒ๋“ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. React์—์„œ ์ œ๊ณตํ•˜๋Š” Component ๋ฐฉ์‹์ดClass Component์™€ Function Component 2๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ์ง€๋งŒ, ์ฃผ๋กœ Function Component๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, Class Compon..

Front-End/React 2023.06.04
728x90
๋ฐ˜์‘ํ˜•