Skip to content

Latest commit

ย 

History

History
132 lines (86 loc) ยท 5.67 KB

File metadata and controls

132 lines (86 loc) ยท 5.67 KB

๋ฒˆ์—ญ์„ ์œ„ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€

#27

์Œ์ ์€ ๊ฑฐ์˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

ํ•œ๊ตญ์–ด ๋งž์ถค๋ฒ•์—์„œ๋Š” ์Œ์ (colon, ์ฝœ๋ก )์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ๊ทœ์ •ํ•˜๊ณ  ์žˆ๋Š”๋ฐ ํ•ญ๋ชฉ์˜ ์—ด๊ฑฐ๋‚˜ ํฌ๊ณก ๋Œ€์‚ฌ ๋“ฑ์—์„œ๋งŒ ์ œํ•œ์ ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค(์ฐธ๊ณ ). ํŠนํžˆ ์˜์–ด์ฒ˜๋Ÿผ ๋ฌธ์žฅ ๋์— ์Œ์ ์„ ๋ถ™์ด๋Š” ๊ฒฝ์šฐ๋Š” ์—†์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•˜์„ธ์š”.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ๋ณด์„ธ์š”.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ๋ณด์„ธ์š”:

'์‹œ'๋Š” ์ œํ•œ์ ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค

์กด์นญ์„ ํ‘œํ˜„ํ•˜๋Š” '-์‹œ-'๋Š” ๋ฌธ์žฅ์˜ ๊ฐ„๊ฒฐํ•จ์„ ํ•ด์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ~ํ•˜์„ธ์š”์ฒ˜๋Ÿผ ์ œํ•œ์ ์ธ ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ ์™ธ์—๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ํŽธ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ์ž‘์—…์ž๋“ค๋ผ๋ฆฌ ๋Œ€ํ™”ํ•  ๋•Œ๋Š” ์กด์ค‘์˜ ์˜๋ฏธ์—์„œ ์‚ฌ์šฉํ•ด๋„ ์ƒ๊ด€์—†์Šต๋‹ˆ๋‹ค.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
์‚ดํŽด๋ณด๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
์‚ดํŽด๋ณด์„ธ์š”.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
์‚ดํŽด๋ณด์‹œ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

์‰ผํ‘œ๋ฅผ ๋ชจ๋‘ ์˜ฎ๊ธธ ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค

์˜์–ด์™€ ์šฐ๋ฆฌ๋ง์—์„œ ์‰ผํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋ก€๊ฐ€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋ง์—์„œ ์‰ผํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ฒฝ์šฐ๋Š” ๋งž์ถค๋ฒ•์— ๊ทœ์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ผญ ํ•„์š”ํ•  ๋•Œ๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ ์™ธ์—๋Š” ์ œํ•œํ•˜๋Š” ํŽธ์ด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๐Ÿ‡ฌ๐Ÿ‡ง For example, if `id` is the row ID, either of the following would work

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
์˜ˆ๋ฅผ ๋“ค์–ด `id`๊ฐ€ ํ–‰์˜ ID์ผ ๊ฒฝ์šฐ ๋‹ค์Œ ์ฝ”๋“œ๊ฐ€ ๋ชจ๋‘ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
์˜ˆ๋ฅผ ๋“ค์–ด, `id`๊ฐ€ ํ–‰์˜ ID์ผ ๊ฒฝ์šฐ ๋‹ค์Œ ์ฝ”๋“œ๊ฐ€ ๋ชจ๋‘ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

render = ๋ Œ๋”๋งํ•˜๋‹ค

render๋‚˜ bind์ฒ˜๋Ÿผ ์šฐ๋ฆฌ๋ง ๋ฒˆ์—ญ์ด ์—†๊ณ  ์›๋ฌธ์˜ ์Œ๋งŒ ๋”ฐ์„œ ์“ฐ๋Š” ๋™์‚ฌ๋Š” ๋ช…์‚ฌํ˜• + ~ํ•˜๋‹ค๋กœ ๋ฒˆ์—ญํ•˜๋Š” ๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค.

๐Ÿ‡ฌ๐Ÿ‡ง React renders DOM elements.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
React๋Š” DOM ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
React๋Š” DOM ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ Œ๋”ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
ํ•จ์ˆ˜๋ฅผ ๋ฐ”์ธ๋”ฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

'๋‹น์‹ '๊ณผ '์—ฌ๋Ÿฌ๋ถ„'์€ ์—†์–ด๋„ ๋ฉ๋‹ˆ๋‹ค

์•„์ฃผ ๊ฐ€๋” ๊ผญ ํ•„์š”ํ•  ๋•Œ๊ฐ€ ์žˆ๊ธฐ๋Š” ํ•˜์ง€๋งŒ ์˜์–ด ํ‘œํ˜„์— ๋งŽ์€ ๋‹น์‹ ์ด๋‚˜ ์—ฌ๋Ÿฌ๋ถ„, ์šฐ๋ฆฌ๊ฐ™์€ ํ‘œํ˜„์€ ์•ˆ ์“ฐ๋Š” ๊ฒŒ ํ›จ์”ฌ ์ž์—ฐ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

๐Ÿ‡ฌ๐Ÿ‡ง Let's say you want to output "Hello, world" in a DOM element.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
DOM ์—˜๋ฆฌ๋จผํŠธ์— "Hello, World"๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ด…์‹œ๋‹ค.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
๋‹น์‹ ์ด DOM ์—˜๋ฆฌ๋จผํŠธ์— "Hello, World"๋ฅผ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ด…์‹œ๋‹ค.

ํ”ผ๋™ํ˜• ๋ฌธ์žฅ์— ์ฃผ์˜ํ•˜์„ธ์š”

์‚ฌ์‹ค ์›์น™๋Œ€๋กœ๋ผ๋ฉด ~๋˜๋‹ค๊ฐ™์€ ์ˆ˜๋™ํƒœ๋„ ๊ฐ€๋Šฅํ•˜๋ฉด ์–ต์ œํ•˜๋Š” ํŽธ์ด ์ข‹์ง€๋งŒ ์‹ค์ œ๋กœ ์ž‘์—…์„ ํ•˜๋‹ค ๋ณด๋ฉด ์จ์•ผ ๋ฌธ์žฅ์ด ์ž์—ฐ์Šค๋Ÿฌ์šธ ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๋ณด์—ฌ์ง€๋‹ค, ์ƒ๊ฐ๋˜๋‹ค์™€ ๊ฐ™์€ ๋ถˆํ•„์š”ํ•œ ํ”ผ๋™ํ˜• ๋ฌธ์žฅ์€ ์ž์ œํ•˜๋Š” ํŽธ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๐Ÿ‡ฌ๐Ÿ‡ง Elements appeared on the screen.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
ํ™”๋ฉด์— ๋ณด์ด๋Š” ์—˜๋ฆฌ๋จผํŠธ.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ์—˜๋ฆฌ๋จผํŠธ.

๋˜‘๊ฐ™์€ ํ‘œํ˜„์€ ๋น„์Šทํ•œ ํ‘œํ˜„์œผ๋กœ ๋Œ€์ฒดํ•˜๋ฉด ๋ฌธ์žฅ์ด ๋” ์œ ๋ คํ•ด์ง‘๋‹ˆ๋‹ค

๋ฒˆ์—ญ๋ฌธ์—์„œ ํ”ํžˆ ๋‚˜ํƒ€๋‚˜๋Š” ๋ฌธ์ œ๊ฐ€ ์˜์–ด ๋‹จ์–ด๋ฅผ 1:1๋กœ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ํ‘œํ˜„์ด ๋‹จ์กฐ๋กœ์›Œ์ง„๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด common์€ ์ผ๋ฐ˜์ ์œผ๋กœ๋ผ๊ณ ๋งŒ ๋ฒˆ์—ญํ•œ๋‹ค๊ฑฐ๋‚˜ call์€ ํ˜ธ์ถœํ•œ๋‹ค๋ผ๊ณ ๋งŒ ๋ฒˆ์—ญํ•˜๋Š” ์‚ฌ๋ก€๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๊ฐ€๊นŒ์šด ์œ„์น˜์—์„œ ๋˜‘๊ฐ™์€ ํ‘œํ˜„์ด ์—ฌ๋Ÿฌ ์ฐจ๋ก€ ๋“ฑ์žฅํ•  ๋•Œ ์กฐ๊ธˆ์”ฉ ํ‘œํ˜„์„ ๋ฐ”๊พธ์–ด์ฃผ๋ฉด ๋ฌธ์žฅ์ด ๋” ์ฝ๊ธฐ ์ข‹์•„์ง‘๋‹ˆ๋‹ค. common์ด๋‚˜ commonly๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ, ๋„๋ฆฌ, ํ”ํžˆ ๋“ฑ์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๊ณ  call, invoke ๋“ฑ์€ ํ˜ธ์ถœํ•˜๋‹ค, ์‹คํ–‰ํ•˜๋‹ค ๋“ฑ์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
์ด๋•Œ ํ”ํžˆ ์‚ฌ์šฉ๋˜๋Š” ํŒจํ„ด์€ ์ผ๋ฐ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
์ด๋•Œ ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ํŒจํ„ด์€ ์ผ๋ฐ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์–ด์ƒ‰ํ•˜์ง€ ์•Š๋‹ค๋ฉด ๋‹จ์ˆ˜ํ˜•์„ ์‚ฌ์šฉํ•ฉ์‹œ๋‹ค

์›๋ž˜ ์šฐ๋ฆฌ๋ง์—์„œ๋Š” ~๋“ค์ด๋ผ๋Š” ๋ณต์ˆ˜ํ˜• ํ‘œํ˜„์„ ๊ทธ๋ฆฌ ๋„๋ฆฌ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋ฌธ์žฅ์˜ ์˜๋ฏธ์— ๋”ฐ๋ผ ๋ฐ˜๋“œ์‹œ ๋ณต์ˆ˜์˜ ๊ฐ์ฒด์ž„์„ ๋ช…์‹œํ•ด์•ผ ํ•  ๋•Œ๊ฐ€ ์žˆ๊ธด ํ•˜์ง€๋งŒ, ๊ทธ ์™ธ์˜ ๊ฒฝ์šฐ๋ผ๋ฉด ๋‹จ์ˆ˜ํ˜•์œผ๋กœ ํ‘œํ˜„ํ•˜๋Š” ํŽธ์ด ๋Œ€์ฒด๋กœ ์ž์—ฐ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

๐Ÿ‡ฌ๐Ÿ‡ง The examples below demonstrate the differences.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
์•„๋ž˜ ์˜ˆ์‹œ๋Š” ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ์ฐจ์ด์ ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€ - ๋ณต์ˆ˜ํ˜• ํ‘œํ˜„์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ
์•„๋ž˜ ์˜ˆ์‹œ๋Š” ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ์—ฌ๋Ÿฌ ์ฐจ์ด์ ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
์•„๋ž˜ ์˜ˆ์‹œ๋“ค์€ ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ์ฐจ์ด์ ๋“ค์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

If๋Š” ์ƒ๋žตํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค

If๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ฌธ์žฅ์˜ ๋ฒˆ์—ญ์ด ํ•ญ์ƒ ๋งŒ์•ฝ์œผ๋กœ ์‹œ์ž‘ํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. ํ‹€๋ฆฐ ๋ฒˆ์—ญ์€ ์•„๋‹ˆ์ง€๋งŒ ํ•œ๊ตญ์–ด์—์„œ๋Š” ~ํ•œ๋‹ค๋ฉด์ด๋ผ๋Š” ์–ด๋ฏธ๊ฐ€ ์ด๋ฏธ ์กฐ๊ฑด ๋˜๋Š” ์ƒํ™ฉ์˜ ๊ฐ€์ •์„ ์˜๋ฏธํ•˜๋ฏ€๋กœ ๋•Œ๋กœ๋Š” ๋งŒ์•ฝ์ด ์—†์–ด๋„ ์ถฉ๋ถ„ํžˆ ๋ง์ด ๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ๋Š” ์ธ์ ‘ํ•œ ๋‘ ๋ฌธ์žฅ์ด ๋ชจ๋‘ ๋งŒ์•ฝ์œผ๋กœ ์‹œ์ž‘ํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ ๋ฌธ์žฅ ๋งŒ์ด๋ผ๋„ ๋งŒ์•ฝ์„ ์ƒ๋žตํ•˜๋ฉด ์กฐ๊ธˆ ๋” ์ฝ๊ธฐ ์ˆ˜์›”ํ•ด์ง‘๋‹ˆ๋‹ค.

๐Ÿ‡ฌ๐Ÿ‡งIf you load React from a `<script>` tag, .... If you use ES6 with npm, ...

๐Ÿ‘๋ชจ๋ฒ” ์‚ฌ๋ก€
React๋ฅผ <script> ํƒœ๊ทธ๋กœ ๋ถˆ๋Ÿฌ์˜จ๋‹ค๋ฉด ... ES6์™€ npm์„ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ...

๐Ÿ‘Ž์ž˜๋ชป๋œ ์‚ฌ๋ก€
๋งŒ์•ฝ React๋ฅผ <script> ํƒœ๊ทธ๋กœ ๋ถˆ๋Ÿฌ์˜จ๋‹ค๋ฉด ... ๋งŒ์•ฝ ES6์™€ npm์„ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ...