profile
Front-End ๐Ÿ˜ฒ
post-thumbnail

props ํ™œ์šฉ

props ํ™œ์šฉ component์˜ props ๋””์ž์ธ ํŒจํ„ด์„ ์•Œ์•„๋ณด์ž props ์„ค๊ณ„ props ์ „๊ฐœ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌ๋œ props ๊ฐ์ฒด๋ฅผ ์ „๊ฐœ(spread) ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ๋‚ด๋ถ€์˜ ๊ตฌ์กฐ์— ๋ชจ๋‘ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‹ค๋งŒ, props ๊ฐ์ฒด์˜ ์†Œ์„ฑ์„ ์ „๊ฐœํ•˜์˜€์„ ๋•Œ ์‚ฌ์šฉ๋œ external๊ณผ ๊ฐ™์€ ๋น„ ํ‘œ์ค€ ์†์„ฑ์€ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ ์‹œํ‚ด > ์ด๋Ÿฐ ๊ฒฝ์šฐ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌ๋œ props์—์„œ ๋น„ ํ‘œ์ค€ ์†์„ฑ์„ ๊ฑธ๋Ÿฌ๋‚ด์–ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐ ํ•  ์ˆ˜ ์žˆ๋‹ค. props ๊ฒ€์‚ฌ propTypes๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ๋œ props๋ฅผ ๊ฒ€์‚ฌ className ๋ณ‘ํ•ฉ props ์ „๊ฐœ ์ฝ”๋“œ์˜ ์ˆœ์„œ์— ๋”ฐ๋ผ ๊ธฐ์กด ์†์„ฑ์„ ๋ฎ์–ด์“ฐ๊ฑฐ๋‚˜, ์ „๋‹ฌ๋œ ์†์„ฑ์ด ๋ฎ์–ด์จ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ > ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์กฐ๊ฑด ์ฒ˜๋ฆฌ ํ•˜๊ฑฐ๋‚˜, classnames ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉ as ์†์„ฑ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ DOM ๋…ธ๋“œ ์ค‘ ํŠน์ • ๋…ธ๋“œ๋ฅผ ์™ธ๋ถ€์—์„œ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก

2021๋…„ 5์›” 29์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Styled Component

Styled Component React ์ปดํฌ๋„ŒํŠธ ์‹œ์Šคํ…œ ๊ตฌ์กฐ์—์„œ CSS๋ฅผ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ library ๊ณต์‹๋ฌธ์„œ JavaScript๋กœ CSS ์ž‘์„ฑ React, React Native์—์„œ ํ™œ์šฉ ๊ฐ€๋Šฅ Styled Component ํŠน์ง• 1. CSS -> JavaScript ์ž๋™ ๋ณ€๊ฒฝ ๋ Œ๋”๋ง ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ถ”์ ํ•ด CSS๋กœ ์ž‘์„ฑ๋œ ์Šคํƒ€์ผ์„ React์—์„œ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅํ•œ JS ์Šคํƒ€์ผ ๊ฐ์ฒด๋กœ ๋ณ€๊ฒฝ 2. ๊ณ ์œ ํ•œ class ์†์„ฑ ์„ค์ • ๋ Œ๋”๋ง ๋  ๋•Œ, DOM ์š”์†Œ์— ๊ณ ์œ ํ•œ class ์†์„ฑ ์ด๋ฆ„์„ ์„ค์ • 3. ์ปดํฌ๋„ŒํŠธ์—์„œ CSS ๊ด€๋ฆฌ ์Šคํƒ€์ผ์ด ํŠน์ • ์ปดํฌ๋„ŒํŠธ์— ๋ฌถ์—ฌ ์žˆ์–ด, ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ ๋ถˆํ•„์š”ํ•œ ์Šคํƒ€์ผ ์ฝ”๋“œ๊ฐ€ ๋‚จ์•„์žˆ์ง€ ์•Š๋Š”๋‹ค. ์ฆ‰, ์‚ฌ์šฉ๋œ ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ ์ฝ”๋“œ๋งŒ ๋ Œ๋”๋ง ๊ณผ์ •์—์„œ ์ฒ˜๋ฆฌ๋จ

2021๋…„ 5์›” 25์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React Hooks๐Ÿ’‹

React Hooks ํ›…(Hook)์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์— ๋ฆฌ์•กํŠธ์˜ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐˆ๊ณ ๋ฆฌ์ฒ˜๋Ÿผ ์—ฐ๊ฒฐํ•ด์ฃผ๋Š” ๊ฒƒ Hook์€ React v16.8๋ถ€ํ„ฐ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ๋ฆฌ์•กํŠธ์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋˜๋Š” Hook๋“ค์€ use๋กœ ์‹œ์ž‘ํ•˜๋Š” ํ•จ์ˆ˜๋“ค Hook์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ์—‘ํŠธ ๋ Œ๋”๋ง ๊ณผ์ •์—์„œ ํ•ญ์ƒ ๊ฐ™์€ ์ˆœ์„œ๋กœ ํ˜ธ์ถœ๋˜๋Š” ๊ทœ์น™์„ ์ด์šฉํ•˜์—ฌ ํ˜ธ์ถœ์ˆœ์„œ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ƒํƒœ ๋งค์นญ ํ›…(Hook)์˜ ๊ทœ์น™ React ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ๋งŒ ์‚ฌ์šฉ ์ปดํฌ๋„ŒํŠธ ์•ˆ์˜ ๋ฐ˜๋ณต๋ฌธ, ์กฐ๊ฑด๋ฌธ, ์ค‘์ฒฉ๋œ ํ•จ์ˆ˜ ์•ˆ์—์„œ ํ›… ์‚ฌ์šฉ โŒ useState React์˜ useState()๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—๋„ state๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. state์™€ state๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์Œ์œผ๋กœ ์ œ๊ณต useState()๋Š” ์ „๋‹ฌ ๋ฐ›๋Š” ์ธ์ž๋กœ state์˜ ์ดˆ๊ธฐ ๊ฐ’์„ ์„ค์ • (์ฒซ ๋ Œ๋”๋ง ๋  ๋•Œ ๋”ฑ ํ•œ๋ฒˆ ์‚ฌ์šฉ) ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์˜ this.state์™€ ์ฐจ์ด์  `use

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ(HOC)

HOC(Higher-Ordered Component) > ๊ณ ์ฐจ(้ซ˜ๆฌก) ๊ณ ์ฐจ(Highter-order)์˜ ์˜๋ฏธ๋Š” '์ƒ์œ„ ์ฐจ์›(์ˆ˜์ค€)'์ด๋‹ค. ์‚ฌ์ „์  ์˜๋ฏธ๋Š” '์ƒ๊ฐ์ด๋‚˜ ํ–‰๋™ ๋”ฐ์œ„์˜ ์ˆ˜์ค€์ด๋‚˜ ์ •๋„๊ฐ€ ๋†’์€ ๊ฒƒ'์„ ๋งํ•˜๋ฉฐ ์ˆ˜ํ•™์—์„œ๋Š” '๋†’์€ ์ฐจ์ˆ˜(3์ฐจ ์ด์ƒ)'์„ ๋œปํ•œ๋‹ค. (๊ณ ์ฐจ ๋ฐฉ์ •์‹, ๊ณ ์ฐจ ๋ถ€๋“ฑ์‹) ๊ณ ์ฐจ ํ•จ์ˆ˜ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ๋Š” ํ•จ์ˆ˜๋Š” ๊ฐ’(value)์œผ๋กœ ์ทจ๊ธ‰๋œ๋‹ค. ์ฆ‰, ํ•จ์ˆ˜์— ์ˆซ์ž, ๋ฌธ์ž ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋“ฏ ํ•จ์ˆ˜ ๋˜ํ•œ ๋‹ค๋ฅธ ํ•จ์ˆ˜์— ๊ฐ’์œผ๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํ•จ์ˆ˜๋ฅผ ๊ฐ’์œผ๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅ ํ•˜๋‚˜ ์ด์ƒ์˜ ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค. ((fn) => {}) ํ•จ์ˆ˜๋ฅผ ๊ฒฐ๊ณผ๋กœ ๋ฐ˜ํ™˜ ํ•œ๋‹ค. (() => fn) ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ ์ปดํฌ๋„ŒํŠธ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ React ๊ณ ๊ธ‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ˆ  React API๋Š” ์•„๋‹ˆ์ง€๋งŒ, React ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ์ž์ฃผ ํ™œ์šฉ๋œ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ „๋‹ฌ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜ >

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Form Control

Form Control ์ž…๋ ฅ๊ฐ’์„ ๋ฐ›๋Š” element๋“ค์—๊ฒŒ value๊ฐ’์œผ๋กœ state๋ฅผ ๊ฑธ์–ด์ฃผ๊ณ  setState() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋งŒ๋“ค์–ด ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ์–ด์ค€๋‹ค. Controlled ์ปดํฌ๋„ŒํŠธ React ์ปดํฌ๋„ŒํŠธ๋Š” ํผ์„ ํ†ตํ•ด ์ž…๋ ฅ๋œ ์‚ฌ์šฉ์ž์˜ ๊ฐ’์„ ์ œ์–ด ํ•  ์ˆ˜ ์žˆ๋‹ค. React๋ฅผ ํ†ตํ•ด ๊ฐ’์ด ๊ด€๋ฆฌ๋˜๋Š” ์ž…๋ ฅ ์š”์†Œ๋Š” ์ปจํŠธ๋กค ์ปดํฌ๋„ŒํŠธ(Controlled Component)์ด๋‹ค. Controlled Component๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋“  state์˜ ์—…๋ฐ์ดํŠธ๋Š” ์—ฐ๊ฒฐ ๋œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์— ์˜ํ•ด ์ฒ˜๋ฆฌ ๋œ๋‹ค. Controlled Component๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๋‚ด์šฉ์„ ์—…๋ฐ์ดํŠธ ํ•˜๊ฑฐ๋‚˜, ์œ ํšจ์„ฑ๊ฒ€์‚ฌ ์ˆ˜ํ–‰์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ฉ€ํ‹ฐ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง ํ•˜๋‚˜ ์ด์ƒ์˜ ``์„ ํ•˜๋‚˜์˜ ๋ฆฌ์Šค๋„ˆ๋กœ ์ปจํŠธ๋กค ํ•  ์ˆ˜ ์žˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ปจํŠธ๋กค์„ ์ œ์–ดํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” name ์†์„ฑ์„ ์„ค์ •ํ•ด์•ผ ํ•œ๋‹ค. TextArea Controll Reac

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Context API

Context API Context๋Š” React ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ ์•ˆ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธ€๋กœ๋ฒŒ(Global)ํ•˜๊ฒŒ ๊ณต์œ ํ• ์ˆ˜ ์žˆ๋„๋ก ๊ณ ์•ˆ๋œ ๋ฐฉ๋ฒ• React๋Š” ๋ณต์žกํ•œ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์˜ ์ƒํƒœ ๊ณต์œ  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ Context API๋ฅผ ์ œ๊ณตํ•œ๋‹ค. Context API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•˜์œ„์— ์ข…์†๋œ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต๊ธ‰(Provider)ํ•œ ํ›„, ํŠน์ • ์œ„์น˜์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ”๋กœ ์ˆ˜์š”(Consumer)ํ•˜๋„๋ก ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. .png) > Context์˜ ์ฃผ๋œ ์‚ฌ์šฉ ๋ชฉ์ ์€ ๋ณต์žกํ•˜๊ฒŒ "์ค‘์ฒฉ ๋œ" ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ(๋“ค)์— ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ฒƒ Context๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์ด ์–ด๋ ค์šฐ๋ฏ€๋กœ ๊ผญ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉ!! ์ปจํ…์ŠคํŠธ ์ƒ์„ฑ React.createContext A

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

์ปดํฌ๋„ŒํŠธ ํ†ต์‹ 

์ปดํฌ๋„ŒํŠธ ํ†ต์‹  ์ปดํฌ๋„ŒํŠธ๋Š” ๋กœ์ปฌ ๋ฐ์ดํ„ฐ์ธ state(์ƒํƒœ)๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค. React ํ”„๋กœ๊ทธ๋ž˜๋ฐ์‹œ์—๋Š” ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ณต์œ ๊ฐ€ ํ•„์š”ํ•œ state๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์™€ ํ†ต์‹ ํ•˜์—ฌ state๋ฅผ ๊ณต์œ ํ•œ๋‹ค. ์ฆ‰, props๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ state๋ฅผ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ > ์Šค์ฝ”ํ”„ ์ฒด์ธ(Scope Chain) ์ผ๋ฐ˜์ ์œผ๋กœ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ํ™˜๊ฒฝ์ธ Javascript๋Š” ์Šค์ฝ”ํ”„ ์ฒด์ธ์— ์˜ํ•ด ์ƒ์œ„(๋ถ€๋ชจ) ์˜์—ญ์œผ๋กœ ๊ฑฐ์Šฌ๋Ÿฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐธ์กฐํ•˜์ง€๋งŒ, React์—์„œ๋Š” ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ state(์ƒํƒœ)๋ฐ์ดํ„ฐ๊ฐ€ ์Šค์ฝ”ํ”„ ์ฒด์ธ๋˜์ง€ ์•Š๋Š”๋‹ค. ๋ฉ”์„œ๋“œ(ํ•จ์ˆ˜) ์ „๋‹ฌ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” props๋ฅผ ํ†ตํ•ด ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— ์†์„ฑ์„ ์ „๋‹ฌ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์˜ ํ•จ์ˆ˜ ๋˜ํ•œ ์†์„ฑ์ด๋ฏ€๋กœ props๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” ์ „๋‹ฌ ๋ฐ›์€ ๋ฉ”์„œ๋“œ๋ฅผ ํŠน์ • ์‹œ์ ์— ์‹คํ–‰(callback)ํ•˜์—ฌ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ์— ์ ‘๊ทผํ•˜์—ฌ ์—…๋ฐ์ดํŠธ ๊ฐ€๋Šฅ ์ƒํƒœ ๊ณต์œ 

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Event Handling

์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง React ์š”์†Œ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ํ•ธ๋“ค๋ง ํ•˜๋Š” ๋ฐฉ์‹์€ DOM ์š”์†Œ์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง ๋ฐฉ์‹๊ณผ ์œ ์‚ฌ |์ฐจ์ด์ |์˜ˆ์‹œ| |--|--| |์ด๋ฒคํŠธ ์†์„ฑ์ด๋ฆ„์€ camelCase ํ˜•์‹์œผ๋กœ ์ž‘์„ฑ|onClick, onKeyDown, onFocus, onChange ๋“ฑ| |์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์—ฐ๊ฒฐ์€ JSX ์ธํ„ฐํด๋ ˆ์ด์…˜|``| |๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ ๋™์ž‘ ๋ฐฉ์ง€์ง€|event.preventDefault() ๋ฉ”์„œ๋“œ๋งŒ ํ—ˆ์šฉ| React์˜ ํ•ฉ์„ฑ ์ด๋ฒคํŠธ > React์˜ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ผํ•œ ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ด๋ฒคํŠธ ๋ž˜ํผ ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌ๋ฐ›๋Š”๋‹ค. ํ•ฉ์„ฑ(Synthetic)์ด๋ฒคํŠธ ๊ฐ์ฒด๋Š” preventDefault,stopPropagation๋ฉ”์„œ๋“œ๋ฅผ ํฌํ•จํ•˜๋ฉฐ ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ํ‘œ์ค€ ์ด๋ฒคํŠธ ๋ชจ๋ธ๊ณผ ๋™์ผ React ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง React ์ด๋ฒคํŠธ ์—ฐ๊ฒฐ์€ ์ด๋ฒคํŠธ ์†์„ฑ ์ด๋ฆ„ ํ‘œ๊ธฐ๋Š” camelCase

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Life Cycle(์ƒ๋ช…์ฃผ๊ธฐ)

Life Cycle ์ƒ๋ช…์€ ์‹œ๊ฐ„์˜ ํ๋ฆ„์— ๋”ฐ๋ผ ์‹œ์‹œ๊ฐ๊ฐ ๋ณ€ํ™”(ํƒœ์–ด๋‚จ -> ์„ฑ์žฅ(๋ณ€ํ™”) -> ์ฃฝ์Œ)ํ•œ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ปดํฌ๋„ŒํŠธ๋„ ์ด๋Ÿฌํ•œ ์ƒ๋ช…์ฃผ๊ธฐ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ๋ผ์ดํ”„์‚ฌ์ดํด ๋ฉ”์„œ๋“œ๊ฐ€ ์ œ๊ณต๋œ๋‹ค. Life Cycle Method ์ปดํฌ๋„ŒํŠธ์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด์„ ํฌ๊ฒŒ ๋‚˜๋ˆ„๋ฉด ๋‹ค์Œ์˜ 3๋‹จ๊ณ„๋กœ ์ง„ํ–‰๋จ Mount ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค๋ฅผ ๋งŒ๋“ค๊ณ  DOM์— ์‚ฝ์ž…ํ•  ๋•Œ ๋‹ค์Œ ์ˆœ์œผ๋กœ ๋ฉ”์†Œ๋“œ ์‹คํ–‰๋จ ๋ถ€๋ชจ ์ž์‹ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ๋ผ์ดํ”„์‚ฌ์ดํด ์ˆœ์„œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ render() ์ž์‹ ์ปดํฌ๋„ŒํŠธ

2021๋…„ 5์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

State(์ƒํƒœ)

State(์ƒํƒœ) ์ปดํฌ๋„ŒํŠธ UI๋ฅผ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ด€ํ•˜๋Š” ์˜ค๋ธŒ์ ํŠธ state(์ƒํƒœ)๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๊ฐ€ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๋ฆฌ์•กํŠธ๊ฐ€ ์ž๋™์œผ๋กœ render()๋ฅผ ํ˜ธ์ถœ state๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์†Œ์œ ํ•œ ๋กœ์ปฌ ๋ฐ์ดํ„ฐ๋กœ ์ ์šฉ ๋ฒ”์œ„๋Š” ํ˜„์žฌ ์ปดํฌ๋„ŒํŠธ์— ํ•œ์ •๋œ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” ์ž์‹ ์˜ state๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค. state๋Š” ๋ถˆ๋ณ€(Immutable) ๊ฐ์ฒด์ด๋‹ค. ์ฆ‰, ๊ฐ์ฒด์— ๋ณ€ํ˜•์„ ๊ฐ€ํ•ด์„  ์•ˆ๋œ๋‹ค. ๋ณ€ํ˜•์„ ๊ฐ€ํ•˜๋Š” ๋Œ€์‹ , ๋น„๊ต๋ฅผ ํ†ตํ•ด ๊ต์ฒดํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด ๋ถˆ๋ณ€ ๊ฐ์ฒด๋ฅผ ์œ ์ง€ํ•œ๋‹ค. Immutable ๊ฐ์ฒด์˜ ์‚ฌ์šฉ ์ด์œ  > ์ผ๋ฐ˜์ ์œผ๋กœ ๊ฐ์ฒด๊ฐ€ ์ฐธ์กฐ๋ฅผ ํ†ตํ•ด ๊ณต์œ ๋˜์–ด ์žˆ๋‹ค๋ฉด ์ƒํƒœ๊ฐ€ ์–ธ์ œ๋“ ์ง€ ๋ณ€๊ฒฝ ๋  ๊ฐ€๋Šฅ์„ฑ๋„ ์ปค์ ธ ๋ฌธ์ œ๊ฐ€ ์ œ๊ธฐ๋œ๋‹ค. ๋ฐ˜๋ฉด ๋ถˆ๋ณ€ ๊ฐ์ฒด๋Š” ๊ฐ์ฒด๋ฅผ ๋ณต์ œํ•  ๋•Œ ๊ฐ์ฒด ์ „์ฒด๊ฐ€ ์•„๋‹ˆ๋ผ ๋‹จ์ˆœ ์ฐธ์กฐ๋งŒ ๋ณต์‚ฌํ•˜๊ณ  ๋๋‚ธ๋‹ค. ์ฐธ์กฐ๋Š” ๋ณดํ†ต ๊ฐ์ฒด ๊ทธ ์ž์ฒด๋ณด๋‹ค ํ›จ์”ฌ ์ž‘์•„์„œ(์ „ํ˜•์ ์œผ๋กœ ํฌ์ธํ„ฐ ํฌ๊ธฐ), ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ์ ˆ๊ฐ๋˜๋ฉฐ ํ”„๋กœ๊ทธ๋žจ ์„ฑ๋Šฅ ํ–ฅ์ƒ

2021๋…„ 5์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Props(์ „๋‹ฌ์†์„ฑ)

Props(์ „๋‹ฌ์†์„ฑ) ์ปดํฌ๋„ŒํŠธ ๋ฐ–์—์„œ ์ฃผ์–ด์ง€๋Š” ๋ฐ์ดํ„ฐ > props๋Š” ๋ถ€๋ชจ -> ์ž์‹์œผ๋กœ ๋‹จ๋ฐฉํ–ฅ(1-way) ํ๋ฆ„์œผ๋กœ ์ „๋‹ฌ๋œ๋‹ค. ์ปดํฌ๋„ŒํŠธ์— ์„ค์ •๋œ ์ž„์˜์˜ JSX ์†์„ฑ(type, children ๋“ฑ)์€ React์— ์˜ํ•ด ์ปดํฌ๋„ŒํŠธ์— ์†์„ฑ(props) ๊ฐ์ฒด๋กœ ์ „๋‹ฌํ•œ๋‹ค. ์ „๋‹ฌ๋œ ๊ฐ’์€ props ๊ฐ์ฒด์˜ ๊ฐ ์†์„ฑ์œผ๋กœ ์„ค์ •๋œ๋‹ค. ์ „๋‹ฌ๋œ ์ปดํฌ๋„ŒํŠธ ์†์„ฑ ๊ฐ์ฒด props๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์ปดํŒŒ์ผ์— ํ™œ์šฉ๋œ๋‹ค. ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ๋œ ์†์„ฑ(props)๊ฐ์ฒด๋Š” ์ฝ๊ธฐ ์ „์šฉ(readonly) ์ „๋‹ฌ ๋ฐ›์€ props ๊ฐ’์„ ์ˆ˜์ •ํ•˜๋ฉด ์•ˆ๋œ๋‹ค. ์ „๋‹ฌ ๋ฐ›์€ props ๊ฐ’์„ ์ˆ˜์ •ํ•˜๋Š” ๋Œ€์‹  ์ปดํฌ๋„ŒํŠธ ์ƒํƒœ(state)๋ฅผ ํ™œ์šฉ ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ž„!! props.children vue.js์— slot๊ณผ ๊ฐ™์€ ๊ฐœ๋… data binding์„ ๋ฐ”๊นฅ(๋ถ€๋ชจ)์—์„œ ํ•ด์ค€ ๊ฒƒ!! component์— content๋ฅผ children์ด๋ผ๋Š”

2021๋…„ 5์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Virtual DOM

Virtual DOM React๋Š” ์ƒํƒœ ๋ณ€๊ฒฝ์ด ๊ฐ์ง€๋˜๋ฉด Virtual DOM์„ ๋‹ค์‹œ ๊ทธ๋ ค ์‹ค์ œ DOM์„ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค. ์žฆ์€ DOM ์กฐ์ž‘์€ ๋น„์šฉ์ด ๋งŽ์ด ๋“ค๊ณ  ์†๋„๊ฐ€ ๋Š๋ ค์ง„๋‹ค. React๋Š” Virtual DOM์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ฑ๋Šฅ(์†๋„)์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐฉ์‹์„ ์ฑ„ํƒ Virtual DOM์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง€์†์ ์œผ๋กœ ๊ด€์ฐฐํ•˜์—ฌ ์ƒํƒœ ๋ณ€๊ฒฝ์„ ๊ฐ์ง€ํ•˜๋ ค ์‹œ๋„ Virtual DOM์˜ ์ด์ „, ์ดํ›„ ๋น„๊ต๋Š” diff ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์‚ฌ์šฉํ•˜์—ฌ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌ ๋น„๊ต ๊ฒฐ๊ณผ ์ฐจ์ด๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์‹ค์ œ DOM์— ๋ฐ˜์˜ํ•ด UI๋ฅผ ์—…๋ฐ์ดํŠธ ReactDOM ReactDOM ๋ชจ๋“ˆ์€ React ์š”์†Œ๋กœ ๊ตฌ์„ฑ๋œ Virtual DOM์„ ์‹ค์ œ DOM์— ์žฅ์ฐฉ(Mount)์‹œ์ผœ ๋ Œ๋”๋ง(Rednering)ํ•˜๋Š” ์—ญํ• ์„ ์ˆ˜ํ–‰ > ReactDOM.render ๋™์ž‘ ๋ฐฉ์‹ domNode์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค. ์ฒ˜์Œ ํ˜ธ์ถœํ•  ๋•Œ ๊ธฐ์กด์˜ DOM ์š”์†Œ๋ฅผ ๊ต์ฒดํ•˜๋ฉฐ, ์ดํ›„ ํ˜ธ์ถœ์—์„œ๋Š” React์˜ DOM ๋น„๊ต(

2021๋…„ 5์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

JSX

JSX(Javascript Syntax eXtension) JavaScript๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ• JSX๊ฐ€ ํ•˜๋Š” ์ผ์€ React ์š”์†Œ(element)๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ React ์š”์†Œ๋Š” ์‹ค์ œ DOM ์š”์†Œ๊ฐ€ ์•„๋‹Œ Js ๊ฐ์ฒด JSX๋Š” HTML๊ณผ ์œ ์‚ฌํ•œ ๋ฌธ๋ฒ•์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ html์ฒ˜๋Ÿผ ๊ฐ„ํŽธํ•˜๊ฒŒ ๋งˆํฌ์—… ๊ฐ€๋Šฅ {}๋ฅผ ์ด์šฉํ•˜์—ฌ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. JSX๋„ ํ‘œํ˜„์‹ if ๊ตฌ๋ฌธ ๋ฐ for loop ์•ˆ์— ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ณ , ๋ณ€์ˆ˜์— ํ• ๋‹น ๋ฐ ์ธ์ž๋กœ ๋ฐ›์•„๋“ค์ด๊ณ  ํ•จ์ˆ˜๋กœ ๋ฐ˜ํ™˜ ๊ฐ€๋Šฅ ๋‹ค์ˆ˜์˜ ํƒœ๊ทธ๋ฅผ ๋ฆฌํ„ดํ•  ์ˆ˜ ์—†๋‹ค. (ํ˜•์ œ๋…ธ๋“œ ์‚ฌ์šฉ๋ถˆ๊ฐ€) ํ•œ ๊ฐ€์ง€ ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ค˜์•ผํ•œ๋‹ค. ๋‹จ์ˆœํžˆ ๋ฌถ์–ด์ค„๋•Œ๋Š” ` ๋˜๋Š” ` ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉ HTML๊ณผ ์ฐจ์ด์  JSX๋Š” HTML๋ณด๋‹ค JS์— ๊ฐ€๊น๊ธฐ ๋–„๋ฌธ์— React DOM์€ HTML attribute ๋Œ€์‹  camelCase ํ”„๋กœํผํ‹ฐ ๋ช…๋ช…๊ทœ์น™์„ ๋”ฐ๋ฆ„ -

2021๋…„ 5์›” 17์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React Component

React Components ํ™”๋ฉด์ƒ์— ๋ณด์—ฌ์ง€๋Š” UI ๋‹จ์œ„ react library๋ฅผ ์ด์šฉํ•˜์—ฌ component ์„ค๊ณ„๋ฐฉ๋ฒ•์œผ๋กœ class, function์ด ์žˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์€ ํ•ญ์ƒ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” PascalCase ๋ฌธ๋ฒ• ์‚ฌ์šฉ์„ ๊ถŒ์žฅ HTML ํ‘œ์ค€ ์š”์†Œ์™€ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด > ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋†“๋Š” ๊ฒƒ์€ ๋” ํฐ ์•ฑ์—์„œ ์ž‘์—…ํ•  ๋•Œ ๋‘๊ฐ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. UI ์ผ๋ถ€๊ฐ€ ์—ฌ๋Ÿฌ ๋ฒˆ ์‚ฌ์šฉ๋˜๊ฑฐ๋‚˜ (Button, Panel, Avatar), UI ์ผ๋ถ€๊ฐ€ ์ž์ฒด์ ์œผ๋กœ ๋ณต์žกํ•œ (App, FeedStory, Comment) ๊ฒฝ์šฐ์—๋Š” ๋ณ„๋„์˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“œ๋Š” ๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค. Class Component react์—์„œ ์ œ๊ณตํ•˜๋Š” 'Component Class'๋ฅผ ์ƒ์†ํ•ด์„œ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. component์— ์ƒํƒœ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” state Object๊ฐ€ ์žˆ๊ณ  ์ƒํƒœ์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋œ๋‹ค. state๊ฐ€ ๋ณ€๊ฒฝ์ด๋˜๋ฉด

2021๋…„ 5์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React.js๋ž€..?

๐Ÿค” React.js๋ž€..? Facebook ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด Jordan Walke์— ์˜ํ•ด ํƒ„์ƒ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์•„๋‹Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋”ฐ๋กœ ์ •ํ•ด์ง„ ๊ณจ๊ฒฉ์ด ์—†์œผ๋ฏ€๋กœ ์›ํ•˜๋Š” ๊ตฌ์กฐ๋กœ ์„ค๊ณ„ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์— ๋”ฐ๋ผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณจ๋ผ ์‚ฌ์šฉ ๊ฐ•๋ ฅํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ˜•์„ฑ์œผ๋กœ ์ธํ•ด ๋ฌธ์„œํ™”๊ฐ€ ์ž˜๋˜์žˆ๋‹ค. ์„ ์–ธํ˜•(Declarative) ํ”„๋กœ๊ทธ๋ž˜๋ฐ Re-render the whole app on every update ์ „๋‹ฌ ์†์„ฑ props, ์ƒํƒœ state ๋ณ€๊ฒฝ ๊ฐ์ง€ -> UI ์—†๋ฐ์ดํŠธ(Rendering) ์ปดํฌ๋„ŒํŠธ(Component)๊ธฐ๋ฐ˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์บก์Šํ™” ๋œ ์ปดํฌ๋„ŒํŠธ ๋กœ์ง(Logic)์€ ํ…œํ”Œ๋ฆฟ(Template)์ด ์•„๋‹Œ, JSX(Javascript XML) React(web), React Native(mobile app), React Electron(desktop app) 1์„ 3์กฐ React concep React๋Š” UI ์ œ์ž‘

2021๋…„ 5์›” 8์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท