Dream๐Ÿฐng
article thumbnail

๐Ÿ’ [230323 TIL]

React 1๏ธโƒฃ

What is React?

๋ฆฌ์•กํŠธ๋Š” ์„ ์–ธํ˜•, ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ UI๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.

JSX๋ผ๋Š” ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด SPA๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ณ , CSR๋กœ ์ž‘๋™ํ•œ๋‹ค.

 

Declarative vs Imperative

๋ฆฌ์•กํŠธ๋Š” ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค. ๊ทธ๋ž˜์„œ ์„ ์–ธํ˜•์ด ๋ญ”๋ฐ..?! ๐Ÿค”

 

์„ ์–ธํ˜•์€ ๋ฌด์—‡์„ ํ•  ๊ฒƒ์ธ์ง€์— ํฌ์ปค์Šค๋ฅผ ๋‘” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ๋ฒ•์ด๋‹ค.

๋ฐ˜๋ฉด์— ์„ ์–ธํ˜•์˜ ๋ฐ˜๋Œ€์ธ ๋ช…๋ นํ˜•์€ ์–ด๋–ป๊ฒŒ ํ•  ๊ฒƒ์ธ์ง€์— ์ค‘์ ์„ ๋‘๊ณ  ์žˆ๋‹ค.

 

์„ ์–ธํ˜•์˜ ๋ฌด์—‡์„๊ณผ ๋ช…๋ นํ˜•์˜ ์–ด๋–ป๊ฒŒ๋ฅผ ์‹ค์ƒํ™œ์—์„œ ๋น—๋Œ€์–ด ์ด์•ผ๊ธฐ ํ•ด๋ณด์ž๋ฉด,

๋ง›์žˆ๋Š” ๋ผ๋ฉด ๐Ÿœ์„ ๋จน๋Š”๋‹ค๊ณ  ๊ฐ€์ •ํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์€ ์ฐจ์ด๋ฅผ ๋ณด์ธ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค..

 

์„ ์–ธํ˜• (๋ฌด์—‡์„ ๐Ÿค”) ์ปต๋ผ๋ฉด์„ ๋จน์„๋ž˜!
๋ช…๋ นํ˜• (์–ด๋–ป๊ฒŒ ๐Ÿ™„) ๋šœ๊ป‘ ํ˜•ํƒœ์˜ ์šฉ๊ธฐ๋ฅผ ๊ฐ€์ง„ ๋ผ๋ฉด์˜ ๋šœ๊ป‘์„ ์ œ๊ฑฐํ•œ ๋’ค,
๋“์ธ ๋ฌผ์„ ๋ถ“๊ณ ,
4๋ถ„๊ฐ„ ๊ธฐ๋‹ค๋ฆฐ ๋’ค ๋จน์„๋ž˜!

 

์„ ์–ธํ˜•๋„ ์ปต๋ผ๋ฉด์„ ๋จน๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ช…๋ นํ˜•์˜ ๊ณผ์ •์„ ๊ฑฐ์ณ์•ผ ํ•˜์ง€๋งŒ, ์–ด๋–ป๊ฒŒ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•œ ์ผ๋ จ์˜ ๊ณผ์ •์„ ์ถ”์ƒํ™”ํ•˜๋ฉด ๋œ๋‹ค.

์–ด๋–ค ์ปต๋ผ๋ฉด์ด๋“  ๋šœ๊ป‘ ์—ด๊ณ , ๋“์ธ ๋ฌผ ๋ถ“๊ณ , 4๋ถ„ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ๋จน๋Š” ๊ณผ์ •์€ ๋‹ค ๋˜‘๊ฐ™์œผ๋‹ˆ๊นŒ ๋ง์ด๋‹ค..ใ…Žใ…Ž

 

์ถ”์ƒํ™”๋Š” ๋„ˆ๊ตด๋งจ์ด ์ฒ˜๋ฆฌํ–ˆ์œผ๋‹ˆ ์•ˆ์‹ฌํ•˜๋ผ๊ตฌ~

 

์ด๊ฑธ ์ฝ”๋“œ๋กœ ์˜ฎ๊ฒจ๋ณด์ž.

๋‚˜๋Š” ์Šˆํ”ผ์น˜๋ผ๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง„ h1 ํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๊ณ  ์‹ถ๋‹ค.

 

์„ ์–ธํ˜• (๋ฌด์—‡์„ ๐Ÿค”)

const shoupeach = () => {
    return (
        <h1>์Šˆํ”ผ์น˜</h1>
    )
}

JSX ๋ฌธ๋ฒ•์œผ๋กœ ์Šˆํ”ผ์น˜๋ผ๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง„ h1 ํƒœ๊ทธ๋ฅผ ํ‘œํ˜„ํ•ด๋ณด์•˜๋‹ค.

<h1>์Šˆํ”ผ์น˜</h1>๋ฅผ ํ†ตํ•ด ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค!

 

๋ช…๋ นํ˜• (์–ด๋–ป๊ฒŒ ๐Ÿ™„)

const h1 = document.createElement('h1');
const text = document.createTextNode('์Šˆํ”ผ์น˜');
h1.appendChild(text);

JavaScript ๋ฌธ๋ฒ•์œผ๋กœ ์Šˆํ”ผ์น˜๋ผ๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง„ h1 ํƒœ๊ทธ๋ฅผ ํ‘œํ˜„ํ•ด๋ณด์•˜๋‹ค.

h1์ธ ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ์Šˆํ”ผ์น˜๋ผ๋Š” ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•œ ๋’ค, h1์— ์Šˆํ”ผ์น˜๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์ ˆ์ฐจ๋ฅผ ๋”ฐ๋ฅด๋Š” ๊ฒƒ์„ ํ†ตํ•ด ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค!

 

ํ™•์‹คํžˆ ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๋ณด๋‹ค ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๋” ์ง๊ด€์ ์ด๊ณ  ๊ฐ„๊ฒฐํ•จ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ๐Ÿ˜‰

 

Component

๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค.

์ปดํฌ๋„ŒํŠธ๋ž€, ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ๊ฐ๊ฐ์˜ ๋…๋ฆฝ๋œ ๋ชจ๋“ˆ์„ ๋œปํ•œ๋‹ค.

์ค‘์š”ํ•œ ๊ฒƒ์€ ์žฌ์‚ฌ์šฉ์„ ํ•  ๋•Œ ๊ฐ’์„ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค!

 

ํ˜„์žฌ ๋‚ด ๋ธ”๋กœ๊ทธ์˜ ์Šคํ‚จ์„ ๊ธฐ์ค€์œผ๋กœ ์ƒ๊ฐํ•œ๋‹ค๋ฉด,

๋ธ”๋กœ๊ทธ์˜ ๋ฉ”์ธ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ชฉ๋ก์ด ์ถœ๋ ฅ๋œ๋‹ค.

 

๊ฐ ํฌ์ŠคํŠธ์˜ ๋ชฉ๋ก๋“ค์€ ๋˜‘๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • ํฌ์ŠคํŠธ ๋ชฉ๋ก ์ž์ฒด
  • ๋Œ€ํ‘œ ์ด๋ฏธ์ง€
  • ์ œ๋ชฉ
  • ๋ถ€๊ฐ€์ ์ธ ์ •๋ณด๋“ค
  • ๋ณธ๋ฌธ

 

์ด๋ ‡๊ฒŒ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ๋‹จ์œ„๋กœ ๋ฌถ์–ด๋‘” ๊ฒƒ์„ ์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ํ•œ๋‹ค.

์œ„์˜ ์˜ˆ์‹œ์—์„œ ๋ถ€๊ฐ€์ •๋ณด์—๋„ ์นดํ…Œ๊ณ ๋ฆฌ, ์ž‘์„ฑ์ผ์ž, ๋Œ“๊ธ€์ˆ˜๋„ ๋™์ผํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ปดํฌ๋„ŒํŠธํ™” ์‹œํ‚ฌ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ๐Ÿ˜‰

 

์ •๋ฆฌ
1. ๋ฆฌ์•กํŠธ๋Š” JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค.
2. ๋ฆฌ์•กํŠธ๋Š” ๋ฌด์—‡์„ ํ‘œํ˜„ํ•  ๊ฒƒ์ธ์ง€ ์ž‘์„ฑํ•˜๋Š” ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค.
3. ๋ฆฌ์•กํŠธ๋Š” ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ๋‹จ์œ„ ๊ตฌ์กฐ๋กœ ๋ฌถ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์ด๋‹ค.
profile

Dream๐Ÿฐng

@shoupeach

๐Ÿฐ Happy new rabbit! ๐Ÿฐ

profile on loading

Loading...