We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

Design Principles

์šฐ๋ฆฌ๋Š” ์ด ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•จ์œผ๋กœ์จ React๋Š” ๋ฌด์—‡์„ ํ•˜๊ณ  ๋ฌด์—‡์„ ํ•˜์ง€ ์•Š๋Š”์ง€, ์šฐ๋ฆฌ์˜ ๊ฐœ๋ฐœ ์ฒ ํ•™์€ ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ์šฐ๋ฆฌ๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ฒฐ์ •ํ•˜๋Š”์ง€ ์—ฌ๋Ÿฌ๋ถ„์ด ๋” ์ž˜ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๊ธฐ์—ฌํ•˜๋Š” ๊ฒƒ์„ ์ฆ๊ฑฐ์›Œํ•˜๊ธฐ๋„ ํ•˜์ง€๋งŒ ์ด ์›์น™๋“ค ์ค‘ ํ•˜๋‚˜ ์ด์ƒ์„ ์œ„๋ฐ˜ํ•˜๋Š” ๊ธธ์€ ์„ ํƒํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฃผ์˜

์ด ๋ฌธ์„œ๋Š” React์— ๋Œ€ํ•œ ๊นŠ์€ ์ดํ•ด๊ฐ€ ์žˆ์Œ์„ ์ „์ œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. React ์ปดํฌ๋„ŒํŠธ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์•„๋‹ˆ๋ผ React ์ž์ฒด์— ๋Œ€ํ•œ ์„ค๊ณ„ ์›์น™(design principles)์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

React ์†Œ๊ฐœ๋Š” React๋กœ ์‚ฌ๊ณ ํ•˜๊ธฐ๋ฅผ ์‚ดํŽด๋ณด์„ธ์š”.

ํ•ฉ์„ฑ

React์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์€ ์ปดํฌ๋„ŒํŠธ์˜ ํ•ฉ์„ฑ์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์— ์˜ํ•ด ์ž‘์„ฑ๋˜์ง€๋งŒ ์ž˜ ๋™์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฒ ์ด์Šค์— ๋ณ€ํ™”์˜ ํŒŒ์žฅ์„ ์ผ์œผํ‚ค์ง€ ์•Š๊ณ  ์ปดํฌ๋„ŒํŠธ์— ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ชฝ์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  ์ปดํฌ๋„ŒํŠธ์— ์–ด๋–ค ๋กœ์ปฌ state๋ฅผ ๋„์ž…ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ์— ์ดˆ๊ธฐํ™” ๋ฐ ํ•ด์ฒด ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ์—์„œ state๋‚˜ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด โ€œ๋‚˜์œ ๊ฒƒโ€์€ ์—†์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ ๋‹นํžˆ ์‚ฌ์šฉํ•ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์ง€๋งŒ, ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ๋“ค์„ ์ œ๊ฑฐํ•  ์ƒ๊ฐ์€ ์—†์Šต๋‹ˆ๋‹ค. ์˜คํžˆ๋ ค ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ๋“ค์ด React๋ฅผ ์œ ์šฉํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐ์— ๋งค์šฐ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์žฅ๋ž˜์— ๋ณด๋‹ค ํ•จ์ˆ˜์ ์ธ ํŒจํ„ด์„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•  ์ง€๋„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค๋งŒ, ๋กœ์ปฌ state์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋Š” ๋ชจ๋‘ ๊ทธ ๋ชจ๋ธ์˜ ์ผ๋ถ€๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ๋Š” ์ข…์ข… โ€œ๋‹จ์ˆœํ•œ ํ•จ์ˆ˜โ€๋กœ ๋ฌ˜์‚ฌ๋˜์ง€๋งŒ ์šฐ๋ฆฌ์˜ ๊ด€์ ์—์„œ๋Š” ์œ ์šฉํ•œ ๊ฒƒ ์ด์ƒ์˜ ๊ฒƒ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. React์—์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ๋™์ž‘์„ ๊ธฐ์ˆ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์—๋Š” ๋ Œ๋”๋ง, ์ƒ๋ช…์ฃผ๊ธฐ์™€ state๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. Relay์™€ ๊ฐ™์€ ์–ด๋–ค ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฐ์ดํ„ฐ ์˜์กด์„ฑ์„ ๊ธฐ์ˆ ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ์ฑ…์ž„์„ ์ปดํฌ๋„ŒํŠธ์— ๋ง๋ถ™์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์•„์ด๋””์–ด๋“ค์€ ์–ด๋–ค ํ˜•ํƒœ๋กœ React๋กœ ๋‹ค์‹œ ๋ฐ›์•„๋“ค์—ฌ์งˆ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ณตํ†ต์˜ ์ถ”์ƒํ™”

์ผ๋ฐ˜์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž ์˜์—ญ์—์„œ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ถˆํ•„์š”ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฝ”๋“œ๋กœ ์—ฌ๋Ÿฌ๋ถ„์˜ ์•ฑ์„ ๋น„๋Œ€ํ™”ํ™”๊ณ  ์‹ถ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ, ์—ฌ๊ธฐ์—๋Š” ์˜ˆ์™ธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์ด ์šฐ๋ฆฌ๊ฐ€ React ๊ทธ ์ž์ฒด์— ๋•Œ๋•Œ๋กœ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ˜ธํ™˜์„ฑ์ด ์—†๊ฑฐ๋‚˜ ๋น„ํšจ์œจ์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋œ๋‹ค๋ฉด ์ฐจ๋ผ๋ฆฌ ๊ทธ๊ฒƒ์„ React์— ๋…น์—ฌ๋‚ผ ์ง€๋„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์„ ๋œป ๊ทธ๋ ‡๊ฒŒ ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ํ•œ๋‹ค๋ฉด ๊ทธ๊ฒƒ์€ ์ถ”์ƒํ™” ๋ ˆ๋ฒจ์„ ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์ด ์ „์ฒด ์ƒํƒœ๊ณ„์— ์ด์ต์ด ๋œ๋‹ค๋Š” ํ™•์‹ ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. State, ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ, ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ €์˜ ์ด๋ฒคํŠธ ์ •๊ทœํ™”๊ฐ€ ์ข‹์€ ์˜ˆ์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ์–ธ์ œ๋‚˜ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ์ด๋Ÿฌํ•œ ๊ฐœ์„ ์•ˆ์„ ๋…ผ์˜ํ•ฉ๋‹ˆ๋‹ค. React ์ด์Šˆ ํŠธ๋ž˜์ปค์—์„œ โ€œbig pictureโ€ ๋ผ๋ฒจ๋กœ ์ด๋Ÿฌํ•œ ๋…ผ์˜๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ์ฑ…

React๋Š” ์‹ค์šฉ์ ์ž…๋‹ˆ๋‹ค. Facebook์—์„œ ์ž‘์„ฑ๋œ ์ œํ’ˆ์˜ ํ•„์š”์— ์˜ํ•ด ๋ฐœ์ „๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ๊ฐ™์€, ์•„์ง์€ ์™„์ „ํ•œ ์ฃผ๋ฅ˜๋Š” ์•„๋‹Œ ๋ช‡ ๊ฐ€์ง€ ํŒจ๋Ÿฌ๋‹ค์ž„์— ์˜ํ•ด ์˜ํ–ฅ์„ ๋ฐ›์ง€๋งŒ, ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ ๊ณผ ๊ฒฝํ—˜์„ ๊ฐ€์ง„ ๊ด‘๋ฒ”์œ„ํ•œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋„๋ก ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์€ ํ”„๋กœ์ ํŠธ์˜ ๋ช…๋ฐฑํ•œ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜์ง€ ์•Š๋Š” ํŒจํ„ด์„ ๋น„๊ถŒ์žฅํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๊ทธ๊ฒƒ์„ ๋น„๊ถŒ์žฅํ•˜๊ธฐ ์ „์— ์กด์žฌํ•˜๋Š” ๋ชจ๋“  ์œ ์Šค์ผ€์ด์Šค๋ฅผ ๊ณ ๋ คํ•˜๊ณ  ๋Œ€์ฒด๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๊ต์œกํ•˜๋Š” ๊ฒƒ์€ ์šฐ๋ฆฌ์˜ ์ฑ…์ž„์ž…๋‹ˆ๋‹ค. ์•ฑ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ์œ ์šฉํ•œ ์–ด๋–ค ํŒจํ„ด์„ ์„ ์–ธ์  ๋ฐฉ์‹์œผ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ๊ฐ€ ์•„์ฃผ ์–ด๋ ค์šด ๊ฒฝ์šฐ๋Š” ์šฐ๋ฆฌ๋Š” ๋ช…๋ น์  API๋ฅผ ์ œ๊ณตํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ์•ฑ์—์„œ ํ•„์š”ํ•œ ์–ด๋–ค ๊ฒƒ์— ๋Œ€ํ•œ ์ตœ์ ์˜ API๋ฅผ ์ฐพ์•„๋‚ด์ง€ ๋ชป ํ•œ ๊ฒฝ์šฐ, ๊ฐ€๋Šฅํ•œ ์ถ”ํ›„์— ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ๊ณ  ์žฅ๋ž˜์˜ ๊ฐœ์„ ์˜ ์—ฌ์ง€๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ์— ํ•œํ•ด์„œ ๋ณดํ†ต ์ˆ˜์ค€ ์ดํ•˜์˜ ์ž„์‹œ์ ์ธ ์ž‘์—…์šฉ API๋ฅผ ์ œ๊ณตํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•ˆ์ •์„ฑ

์šฐ๋ฆฌ๋Š” API ์•ˆ์ •์„ฑ์— ๊ฐ€์น˜๋ฅผ ๋‘ก๋‹ˆ๋‹ค. Facebook์—๋Š” React๋ฅผ ์‚ฌ์šฉํ•œ 5๋งŒ ๊ฐœ ์ด์ƒ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. Twitter์™€ Airbnb๋ฅผ ํฌํ•จํ•œ ๋‹ค๋ฅธ ๋งŽ์€ ๊ธฐ์—…๋“ค ๋˜ํ•œ React์˜ ํ—ค๋น„ ์œ ์ €(heavy user)์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ฐ”๋กœ ์šฐ๋ฆฌ๊ฐ€ ๊ณต์šฉ API๋‚˜ behavior์˜ ๋ณ€๊ฒฝ์„ ๊บผ๋ฆฌ๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ โ€œ์•„๋ฌด ๊ฒƒ๋„ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹คโ€๋Š” ์˜๋ฏธ๋กœ ์•ˆ์ •์„ฑ์„ ๊ณผ๋Œ€ํ‰๊ฐ€ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๊ณง ์ •์ฒด๋กœ ๋ฐ”๋€๋‹ˆ๋‹ค. ๋Œ€์‹ , ์šฐ๋ฆฌ๋Š” โ€œํ”„๋กœ๋•์…˜(production) ํ™˜๊ฒฝ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ฌด์—‡์ธ๊ฐ€๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ๋Š” ๋ช…ํ™•ํ•œ (๊ทธ๋ฆฌ๊ณ  ๊ฐ€๋Šฅํ•˜๋ฉด ์ž๋™ํ™” ๋œ) ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹คโ€๋Š” ์˜๋ฏธ์—์„œ์˜ ์•ˆ์ •์„ฑ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ํŒจํ„ด์„ ๋น„๊ถŒ์žฅํ•˜๋Š” ๊ฒฝ์šฐ Facebook ๋‚ด๋ถ€์—์„œ ๊ทธ ์‚ฌ์šฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜๊ณ  ๋น„๊ถŒ์žฅ ๊ฒฝ๊ณ ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์œผ๋กœ์จ ๋ณ€ํ™”์˜ ์˜ํ–ฅ๋„๋ฅผ ํ‰๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€๊ฒฝ์ด ๋„ˆ๋ฌด ์‹œ๊ธฐ์ƒ์กฐ์ด๊ฑฐ๋‚˜ ๋ณ€๊ฒฝ์— ๋Œ€ํ•œ ์ค€๋น„๊ฐ€ ๋  ๋•Œ๊นŒ์ง€ ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ๊ฐ€์ ธ๊ฐ€๋Š” ๋ฐ์— ์žˆ์–ด ์ „๋žต์ ์œผ๋กœ ์กฐ๊ธˆ ๋” ์ƒ๊ฐํ•  ํ•„์š”๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ, ์šฐ๋ฆฌ๋Š” ๊ทธ ๋ณ€๊ฒฝ์„ ๋˜๋Œ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณ€๊ฒฝ์ด ๊ทธ๋‹ฅ ํŒŒ๊ดด์ ์ด์ง€ ์•Š๊ณ  ๋ชจ๋“  ์œ ์Šค์ผ€์ด์Šค์—์„œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ „๋žต์ด ์‹คํ–‰ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ํ™•์‹ ํ•˜๋Š” ๊ฒฝ์šฐ ์˜คํ”ˆ์†Œ์Šค ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋น„์ถ”์ฒœ ๊ฒฝ๊ณ ๋ฅผ ๊ณต๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” Facebook ์ด์™ธ์˜ ๋งŽ์€ React ์‚ฌ์šฉ์ž์™€ ๊ธด๋ฐ€ํ•˜๊ฒŒ ์—ฐ๋ฝํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์ธ๊ธฐ์žˆ๋Š” ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ๋ฅผ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ณ  ๋น„์ถ”์ฒœ ๊ฒฝ๊ณ  ์ˆ˜์ •์„ ์•ˆ๋‚ดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Facebook์˜ React ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ์ˆœ์ˆ˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์ƒ๊ฐํ•ด ๋ณผ ๋•Œ ์‚ฌ๋‚ด ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์ด ์„ฑ๊ณตํ•˜๋Š” ๊ฒƒ์€ ๋‹ค๋ฅธ ๊ธฐ์—…๋“ค์—์„œ๋„ ๋ฌธ์ œ ์—†์„ ๊ฒƒ์ด๋ผ๋Š” ์ข‹์€ ์ง€ํ‘œ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๊ฐ€๋” ์‚ฌ๋žŒ๋“ค์€ ์šฐ๋ฆฌ๊ฐ€ ์ƒ๊ฐํ•˜์ง€ ๋ชป ํ•œ ์ƒˆ๋กœ์šด ์œ ์Šค์ผ€์ด์Šค๋ฅผ ์ง€์ ํ•˜๊ณ , ์šฐ๋ฆฌ๋Š” ํ•ด๊ฒฐ์ฑ…์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ ‘๊ทผ๋ฒ•์„ ๋‹ค์‹œ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ •๋‹นํ•œ ์ด์œ  ์—†์ด๋Š” ์šฐ๋ฆฌ๋Š” ์–ด๋–ค ๊ฒƒ๋„ ๋น„๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋•Œ๋•Œ๋กœ ๋น„๊ถŒ์žฅ ๊ฒฝ๊ณ ๊ฐ€ ์ขŒ์ ˆ์„ ์•ผ๊ธฐํ•จ์„ ์ธ์ •ํ•˜๊ธฐ๋Š” ํ•˜์ง€๋งŒ ๋น„๊ถŒ์žฅ์€ ์šฐ๋ฆฌ์™€ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๊ฐ€์น˜์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฐœ์„ ๊ณผ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ๊นจ๋—ํ•˜๊ฒŒ ๊ธธ์„ ๋‹ฆ๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์šฐ๋ฆฌ๋Š” React 15.2.0์—์„œ๋Š” ์•Œ๋ ค์ง€์ง€ ์•Š์€ DOM props์— ๋Œ€ํ•œ ๊ฒฝ๊ณ ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งŽ์€ ํ”„๋กœ์ ํŠธ์— ์˜ํ–ฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ, React์— ์‚ฌ์šฉ์ž attributes์˜ ์ง€์›์„ React์— ๋„์ž…ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ด ๊ฒฝ๊ณ ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ถ”๊ฐ€ํ•˜๋Š” ๋ชจ๋“  ๋น„๊ถŒ์žฅ์—๋Š” ์ด์™€ ๊ฐ™์€ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ๋น„๊ถŒ์žฅ ๊ฒฝ๊ณ ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ํ˜„์žฌ์˜ ๋ฉ”์ด์ € ๋ฒ„์ „์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์—์„œ๋Š” ๊ฒฝ๊ณ ๋ฅผ ๋‚จ๊ธด ์ฑ„ ์œ ์ง€ํ•˜๊ณ  ๋‹ค์Œ ๋ฉ”์ด์ € ๋ฒ„์ „์—์„œ๋Š” ๋™์ž‘์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ณต์ ์ธ ์ˆ˜์ž‘์—…์ด ๋งŽ์€ ๊ฒฝ์šฐ์—๋Š” ๋ณ€๊ฒฝ์˜ ์ƒ๋‹น ๋ถ€๋ถ„์„ ์ž๋™ํ™”ํ•˜๋Š” codemod ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๊ฐœํ•ฉ๋‹ˆ๋‹ค. Codemod๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋Œ€๊ทœ๋ชจ ์ฝ”๋“œ๋ฒ ์ด์Šค๋„ ์ง€์ฒด์—†์ด ์ดํ–‰์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๊ณ , ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ๋…๋ คํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„์€ ์šฐ๋ฆฌ๊ฐ€ react-codemod ์ €์žฅ์†Œ์— ๊ณต๊ฐœํ•œ codemod๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒํ˜ธ์šด์šฉ์„ฑ

์šฐ๋ฆฌ๋Š” ๊ธฐ์กด ์‹œ์Šคํ…œ๊ณผ์˜ ์ƒํ˜ธ์šด์šฉ์„ฑ๊ณผ ์ ์ง„์ ์ธ ๋„์ž…์— ๋†’์€ ๊ฐ€์น˜๋ฅผ ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Facebook์€ ๊ฑฐ๋Œ€ํ•œ non-React ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Facebook ์›น์‚ฌ์ดํŠธ๋Š” XHP๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ์„œ๋ฒ„์‚ฌ์ด๋“œ ์ปดํฌ๋„ŒํŠธ ์‹œ์Šคํ…œ๊ณผ React ์ด์ „๋ถ€ํ„ฐ ๊ฐœ๋ฐœ๋œ ๋‚ด๋ถ€ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๊ทธ๋ฆฌ๊ณ  React ๊ทธ ์ž์ฒด๋ฅผ ์กฐํ•ฉํ•ด์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์—๊ฒŒ๋Š” ์–ด๋–ค ํ”„๋กœ๋•ํŠธ ํŒ€๋„ ๋‚ด๊ธฐํ•˜๋“ฏ์ด ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ•˜๊ธฐ๋ณด๋‹ค๋Š” ์ž‘์€ ๊ธฐ๋Šฅ์— React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด React๊ฐ€ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๋ชจ๋ธ์„ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•œ ํ•ด๊ฒฐ์ฑ…(escape hatches)์„ ์ œ์‹œํ•˜๊ณ , ๋‹ค๋ฅธ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค๊ณผ ํ•จ๊ป˜ ์ž˜ ๋™์ž‘ํ•˜๋„๋ก ๋…ธ๋ ฅํ•˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค. ๊ธฐ์กด์˜ ๋ช…๋ นํ˜• UI๋ฅผ ์„ ์–ธํ˜• ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ์‹ธ๋Š” ๊ฒƒ๋„, ๋˜ ๊ทธ ๋ฐ˜๋Œ€๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ ์ง„์ ์ธ ๋„์ž…์„ ์œ„ํ•ด์„œ ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์Šค์ผ€์ฅด๋ง

์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•จ์ˆ˜๋กœ ๊ธฐ์ˆ ๋˜์–ด ์žˆ์–ด๋„ React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ทธ๊ฒƒ์„ ์ง์ ‘ ํ˜ธ์ถœํ•˜์ง€๋Š” ๋งˆ์„ธ์š”. ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฌด์—‡์„ ๋ Œ๋”๋งํ•  ํ•„์š”๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ ์„ค๋ช…์„ ๋ฐ˜ํ™˜ํ•˜๊ณ  <LikeButton>๊ณผ ๊ฐ™์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ •์˜ํ•œ ์ปดํฌ๋„ŒํŠธ์™€ <div>์™€ ๊ฐ™์€ ํ”Œ๋žซํผ ๊ณ ์œ ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ชจ๋‘ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฏธ๋ž˜์˜ ์–ธ์  ๊ฐ€ <LikeButton>์„ ํ’€๊ณ  ์ปดํฌ๋„ŒํŠธ์˜ ๋ Œ๋”๋ง ๊ฒฐ๊ณผ์— ๋”ฐ๋ผ ์žฌ๊ท€์ ์œผ๋กœ UI ํŠธ๋ฆฌ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์€ ์‹ค์ œ์ ์œผ๋กœ React์˜ ์ฑ…์ž„์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋งค์šฐ ๋ฏธ๋ฌ˜ํ•œ ์ฐจ์ด์ง€๋งŒ ๋งค์šฐ ๊ฐ•๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์ด ๊ทธ ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  React๊ฐ€ ํ˜ธ์ถœํ•˜๋Š”๋ฐ, ์ด๊ฒƒ์€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ง€์—ฐํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์ด React์— ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ์˜ ๊ตฌํ˜„์—์„œ๋Š” React๋Š” ํŠธ๋ฆฌ๋ฅผ ์žฌ๊ท€์ ์œผ๋กœ ์กฐ์‚ฌํ•˜๊ณ  ๋‹จ์ผ Tick ๋™์•ˆ์— ์ „์ฒด ๊ฐฑ์‹ ๋œ ํŠธ๋ฆฌ์˜ ๋ Œ๋”๋ง ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ React ์„ค๊ณ„์˜ ๊ณตํ†ต๋œ ํ…Œ๋งˆ์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ์ธ๊ธฐ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ƒˆ ๋ฐ์ดํ„ฐ๊ฐ€ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ด์กŒ์„ ๋•Œ ๊ณ„์‚ฐ์ด ์ˆ˜ํ–‰๋˜๋Š” โ€œpushโ€ ์ ‘๊ทผ ๋ฐฉ์‹์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ React๋Š” ํ•„์š”ํ•  ๋•Œ๊นŒ์ง€ ๊ณ„์‚ฐ์„ ์ง€์—ฐํ•  ์ˆ˜ ์žˆ๋Š” โ€œpullโ€ ์ ‘๊ทผ ๋ฐฉ์‹์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

React๋Š” ๋ฒ”์šฉ์ ์ธ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” React๊ฐ€ ์•ฑ์—์„œ ์–ด๋–ค ๊ณ„์‚ฐ์ด ์ง€๊ธˆ ํ•„์š”ํ•˜๊ณ  ์–ด๋–ค ๊ณ„์‚ฐ์ด ์ง€๊ธˆ ํ•„์š”ํ•˜์ง€ ์•Š์€์ง€ ์•Œ ์ˆ˜ ์žˆ๋Š” ํŠน๋ณ„ํ•œ ์œ„์น˜๋ฅผ ์ ์œ ํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

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

๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜์ž๋ฉด, ์šฐ๋ฆฌ๋Š” ์ง€๊ธˆ ์ด๊ฒƒ์„ ์ด์šฉํ•˜๊ณ  ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฐ ์ผ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ์ž์œ ๋Š” ์™œ ์šฐ๋ฆฌ๊ฐ€ ์Šค์ผ€์ฅด๋ง์— ๋Œ€ํ•œ ํ†ต์ œ๊ถŒ์„ ์„ ํ˜ธํ•˜๋Š”์ง€, ์™œ setState()๋Š” ๋น„๋™๊ธฐ์ ์ธ์ง€์— ๋Œ€ํ•œ ์ด์œ ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋…์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ โ€œ์Šค์ผ€์ฅด๋ง ์—…๋ฐ์ดํŠธโ€๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Functional Reactive Programming์˜ ๋ช‡ ๊ฐ€์ง€ ๋ณ€ํ˜•์—์„œ ํ”ํ•˜๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” โ€œpushโ€ ๊ธฐ๋ฐ˜ ํŒจ๋Ÿฌ๋‹ค์ž„์œผ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ๋ทฐ๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค๋ฉด ์Šค์ผ€์ฅด๋ง์— ๋Œ€ํ•œ ์ œ์–ด๋ฅผ ์–ป๋Š” ๊ฒƒ์ด ์–ด๋ ค์›Œ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” โ€œ๊ธ€๋ฃจ(glue)โ€ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

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

React๋Š” ์™„์ „ํžˆ โ€œ๋ฐ˜์‘์ (reactive)โ€œ์ด๊ณ  ์‹ถ์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— React๋Š” โ€œScheduleโ€๋กœ ๋ถˆ๋ฆฌ์› ์–ด์•ผ ํ•œ๋‹ค๋Š” ํŒ€๋‚ด ๋†๋‹ด์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜

์ข‹์€ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์€ ์šฐ๋ฆฌ์—๊ฒŒ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์šฐ๋ฆฌ๋Š” Chrome๊ณผ Firefox์—์„œ React ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ๋Š” React DevTools๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ Facebook ์—”์ง€๋‹ˆ์–ด์™€ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ชจ๋‘์—๊ฒŒ ์ปค๋‹ค๋ž€ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ์„ ๊ฐ€์ ธ์™”๋‹ค๊ณ  ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ, ๋„์›€์ด ๋  ๋งŒํ•œ ๊ฐœ๋ฐœ์ž ๊ฒฝ๊ณ ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” ๋” ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, React๋Š” ๊ฐœ๋ฐœ ์ค‘์— ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์—†๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ํƒœ๊ทธ๋ฅผ ์ค‘์ฒฉํ•˜๊ฑฐ๋‚˜ API์—์„œ ์ผ๋ฐ˜์ ์ธ ์˜คํƒ€๋ฅผ ์ž‘์„ฑํ•œ ๊ฒฝ์šฐ ์ด์— ๋Œ€ํ•ด ๊ฒฝ๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž ๊ฒฝ๊ณ ์™€ ์ด์™€ ๊ด€๋ จ๋œ ๊ฒ€์‚ฌ๋Š” React ๊ฐœ๋ฐœ์ž ๋ฒ„์ „์ด ํ”„๋กœ๋•์…˜ ๋ฒ„์ „๋ณด๋‹ค ์กฐ๊ธˆ ๋” ๋Š๋ฆฐ ์ฃผ์š”ํ•œ ์ด์œ ์ž…๋‹ˆ๋‹ค.

Facebook ๋‚ด๋ถ€์ ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์šฉ์„ฑ ํŒจํ„ด์€ ๋ณดํŽธ์ ์ธ ์‹ค์ˆ˜๊ฐ€ ๋ฌด์—‡์ด๊ณ  ์–ด๋–ป๊ฒŒ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ์ƒˆ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ๋•Œ ์šฐ๋ฆฌ๋Š” ์ผ๋ฐ˜์ ์ธ ์‹ค์ˆ˜๋ฅผ ์˜ˆ์ƒํ•˜๊ณ  ๊ทธ๊ฒƒ์„ ๊ฒฝ๊ณ ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์—ฌ๋Ÿฌ๋ถ„์˜ ์ œ์•ˆ์„ ๋“ฃ๊ณ  ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ธฐ์—ฌ๋ฅผ ์ˆ˜์šฉํ•˜์—ฌ ๋” ๋‚˜์€ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋””๋ฒ„๊น…

๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ ์‹ค์ˆ˜์˜ ์›์ธ์„ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋Š” ํ‘œ์‹์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. React์—์„œ์˜ props์™€ state๊ฐ€ ์ด๋Ÿฌํ•œ ํ‘œ์‹์ž…๋‹ˆ๋‹ค.

ํ™”๋ฉด์—์„œ ๋ฌด์—‡์ธ๊ฐ€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ React DevTools๋ฅผ ์—ด๊ณ  ๋ Œ๋”๋ง์„ ๋‹ด๋‹นํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฐพ์€ ํ›„ props์™€ state๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ render() ํ•จ์ˆ˜ ์•ˆ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ render()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์–ด๋–ค ํ•จ์ˆ˜์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ๋ฌธ์ œ๊ฐ€ ๋ถ„๋ฆฌ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

state๊ฐ€ ๋ฐ”๋ฅด์ง€ ์•Š๋‹ค๋ฉด ์ด ํŒŒ์ผ ๋‚ด์˜ setState() ํ˜ธ์ถœ ์ค‘ ํ•˜๋‚˜์—์„œ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋ณดํ†ต ํ•˜๋‚˜์˜ ํŒŒ์ผ ๋‚ด์—์„œ setState() ํ˜ธ์ถœ์€ ๋งŽ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ฒ€์ƒ‰์ด๋‚˜ ์ˆ˜์ •์ด ๋น„๊ต์  ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

props๊ฐ€ ๋ฐ”๋ฅด์ง€ ์•Š๋‹ค๋ฉด ์ธ์ŠคํŽ™ํ„ฐ๋กœ ๊ฑฐ์Šฌ๋Ÿฌ ์˜ฌ๋ผ๊ฐ€๋ฉฐ ํŠธ๋ฆฌ๋ฅผ ์ด๋ฆฌ์ €๋ฆฌ ํƒ์ƒ‰ํ•˜์—ฌ ๋‚˜์œ props๋ฅผ ์ „๋‹ฌํ•จ์œผ๋กœ์จ ์ตœ์ดˆ๋กœ โ€œ์šฐ๋ฌผ์— ๋…์„ ํƒ„โ€ ๋ฒ”์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ์˜ props์™€ state์˜ ํ˜•ํƒœ๋กœ ์–ด๋–ค UI๋ฅผ ์ƒ์„ฑํ•œ ๋ฐ์ดํ„ฐ๊นŒ์ง€ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋Š” ์ด ๋Šฅ๋ ฅ์€ React์—๋Š” ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. state๊ฐ€ Closure์™€ ์—ฐ๊ฒฐ์ž(combinator)์— ๊ฐ‡ํ˜€ ์žˆ์ง€ ์•Š๊ณ  React์— ์ง์ ‘์ ์œผ๋กœ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ๋ช…ํ™•ํ•œ ์„ค๊ณ„ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.

UI๋Š” ๋™์ ์ด์ง€๋งŒ, props์™€ state์˜ ๋™๊ธฐ์ ์ธ render() ํ•จ์ˆ˜๋Š” ๋””๋ฒ„๊น… ์ž‘์—…์„ ๋‹จ์ˆœํ•œ ์ถ”์ธก์—์„œ ์ง€๋ฃจํ•˜์ง€๋งŒ ์œ ํ•œํ•œ ๊ณผ์ •์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ๊ฐ™์€ ๋ช‡ ๊ฐ€์ง€์˜ ์œ ์Šค์ผ€์ด์Šค๊ฐ€ ๋ณด๋‹ค ์–ด๋ ต๊ฒŒ ๋˜๊ฒ ์ง€๋งŒ, ์šฐ๋ฆฌ๋Š” React์—์„œ ์ด ์ œํ•œ์ ์„ ๊ณ ์ˆ˜ํ–ˆ์œผ๋ฉด ํ•ฉ๋‹ˆ๋‹ค.

์„ค์ •

์šฐ๋ฆฌ๋Š” ๊ธ€๋กœ๋ฒŒ ๋Ÿฐํƒ€์ž„ ์„ค์ • ์˜ต์…˜์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฐ€๋ น, ๋•Œ๋•Œ๋กœ React.configure(options) ๋˜๋Š” React.register(component)๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋‹ฌ๋ผ๋Š” ์š”์ฒญ์„ ๋ฐ›์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ ์ด๊ฒƒ์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋Š”๋ฐ ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ์— ๋Œ€ํ•œ ์ข‹์€ ํ•ด๊ฒฐ์ฑ…์„ ์•Œ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

์„œ๋“œ ํŒŒํ‹ฐ ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ด๋Ÿฐ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค๋ฉด? ํ•˜๋‚˜์˜ React ์•ฑ์ด ๋‹ค๋ฅธ React ์•ฑ์„ ํฌํ•จํ–ˆ๋Š”๋ฐ ์„ค์ •์ด ๋ถˆ์™„์ „ํ•˜๋‹ค๋ฉด? ์„œ๋“œ ํŒŒํ‹ฐ ์ปดํฌ๋„ŒํŠธ๋Š” ํŠน์ •ํ•œ ์„ค์ •์ด ํ•„์š”ํ•œ์ง€ ์•„๋‹Œ์ง€ ์–ด๋–ป๊ฒŒ ๊ตฌ์ฒดํ™”ํ•  ๊ฒƒ์ธ์ง€? ์šฐ๋ฆฌ๋Š” ๊ธ€๋กœ๋ฒŒ ์„ค์ •์ด ํ•ฉ์„ฑ์—์„œ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ•ฉ์„ฑ์ด๋ž€ React์˜ ์ค‘์‹ฌ์ด๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋Š” ์ฝ”๋“œ์—์„œ ๊ธ€๋กœ๋ฒŒ ์„ค์ •์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์šฐ๋ฆฌ๋Š” ๋นŒ๋“œ ๋ ˆ๋ฒจ์—์„œ์˜ ๋ช‡ ๊ฐ€์ง€ ๊ธ€๋กœ๋ฒŒ ์„ค์ •์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ถ„๋ฆฌ๋œ ๊ฐœ๋ฐœ ๋นŒ๋“œ์™€ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ถ”ํ›„์—๋Š” ํ”„๋กœํŒŒ์ผ๋ง ๋นŒ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•  ์ง€๋„ ๋ชจ๋ฅด๊ณ , ๋˜ ๋‹ค๋ฅธ ๋นŒ๋“œ ํ”Œ๋ž˜๊ทธ์˜ ๊ฒ€ํ† ์— ์—ด๋ ค ์žˆ์Šต๋‹ˆ๋‹ค.

DOM์„ ๋„˜์–ด์„œ

์šฐ๋ฆฌ๋Š” ๋” ์ ์€ ๋ฒ„๊ทธ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋ฉด์—์„œ React์˜ ๊ฐ€์น˜๋ฅผ ๋ด…๋‹ˆ๋‹ค. DOM์€ React์—์„œ ๊ทผ๋ณธ์  ๋ Œ๋”๋ง ๋Œ€์ƒ์ด์ง€๋งŒ, React Native๋Š” Facebook๊ณผ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋ชจ๋‘ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

๋ Œ๋”๋Ÿฌ์— ๊ตฌ์†๋ฐ›์ง€ ์•Š์Œ์€ React์˜ ์ค‘์š”ํ•œ ์„ค๊ณ„์ƒ์˜ ์ œํ•œ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋‚ด๋ถ€ ํ‘œํ˜„์— ์•ฝ๊ฐ„์˜ ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ๋”ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด, ์ฝ”์–ด์˜ ๊ฐœ์„ ์€ ๋ชจ๋“  ํ”Œ๋žซํผ์— ํ†ต์šฉ๋ฉ๋‹ˆ๋‹ค.

๋‹จ์ผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ชจ๋ธ์„ ๊ฐ€์ง์œผ๋กœ์จ ์šฐ๋ฆฌ๋Š” ํ”Œ๋žซํผ ๋Œ€์‹  ํ”„๋กœ๋•ํŠธ ์ค‘์‹ฌ์˜ ์—”์ง€๋‹ˆ์–ด๋ง ํŒ€์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ์šฐ๋ฆฌ์—๊ฒŒ ํŠธ๋ ˆ์ด๋“œ ์˜คํ”„๋Š” ๊ทธ๋งŒํ•œ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ตฌํ˜„

์šฐ๋ฆฌ๋Š” ๊ฐ€๋Šฅํ•œ ํ•œ ์„ธ๋ จ๋œ API๋ฅผ ์ œ๊ณตํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ตฌํ˜„์ด ํ™”๋ คํ•œ ๊ฒƒ์—๋Š” ๊ทธ๋‹ค์ง€ ๊ด€์‹ฌ์ด ์—†์Šต๋‹ˆ๋‹ค. ์‹ค์„ธ๊ณ„๋Š” ์™„๋ฒฝํ•œ ๊ฒƒ์—์„œ ๊ฑฐ๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๋ชป์ƒ๊ธด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค๋ฉด, ํ•ฉ๋ฆฌ์ ์ธ ๋ฒ”์œ„์—์„œ ์šฐ๋ฆฌ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ทธ ๋ชป์ƒ๊ธด ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์ฝ”๋“œ๋ฅผ ํ‰๊ฐ€ํ•  ๋•Œ ์˜ฌ๋ฐ”๋ฅด๊ณ  ์„ฑ๋Šฅ์ด ์ข‹๊ณ  ๋›ฐ์–ด๋‚œ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ๊ตฌํ˜„์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. ์šฐ์•„ํ•จ์€ ๊ทธ ๋‹ค์Œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

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

๋„๊ตฌ์˜ ์ตœ์ ํ™”

๋ช‡ ๊ฐ€์ง€ ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” API๋“ค์€ ์žฅํ™ฉํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์šฐ๋ฆฌ๋Š” didMount()๋‚˜ onMount() ๋Œ€์‹  componentDidMount()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์˜๋„์ ์ž…๋‹ˆ๋‹ค. ๋ชฉ์ ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€์˜ ์ธํ„ฐ๋ ‰์…˜ ํฌ์ธํŠธ๋ฅผ ๋ˆˆ์— ๋„๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Facebook๊ณผ ๊ฐ™์ด ๊ฑฐ๋Œ€ํ•œ ์ฝ”๋“œ๋ฒ ์ด์Šค์—์„œ ํŠน์ •ํ•œ API์˜ ์‚ฌ์šฉ์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ๋ณ„์ด ์‰ฌ์šด ์žฅํ™ฉํ•œ ์ด๋ฆ„, ํŠนํžˆ ์กฐ์‹ฌ์Šค๋Ÿฝ๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์†Œ์ค‘ํžˆ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ฝ”๋“œ ๋ฆฌ๋ทฐ์—์„œ dangerouslySetInnerHTML์„ ๊ฐ„๊ณผํ•œ๋‹ค๋Š” ๊ฒƒ์€ ์•„์ฃผ ์–ด๋ ค์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํŒŒ๊ดด์ ์ธ ๋ณ€๊ฒฝ์„ ๊ฐ€ํ•  ๋•Œ codemods์— ์˜์กดํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฒ€์ƒ‰ ์ตœ์ ํ™” ๋˜ํ•œ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ๊ฑฐ๋Œ€ํ•œ ์ž๋™ํ™”๋œ ๋ณ€๊ฒฝ์„ ์ฝ”๋“œ๋ฒ ์ด์Šค ์ „์ฒด์— ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์‰ฝ๊ณ  ์•ˆ์ „ํ–ˆ์œผ๋ฉด ํ•˜๋Š” ๋ฐ”๋žŒ์ธ๋ฐ, ๋…ํŠนํ•œ ์›…์žฅํ•œ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜์—ฌ ์ด๊ฒƒ์„ ์‹คํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ๋‹ค๋ฅธ ๊ฒƒ๊ณผ ๊ตฌ๋ณ„๋˜๋Š” ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜์—ฌ, ๊ฑฐ์ง“์–‘์„ฑ(false positives)์„ ๊ฑฑ์ •ํ•˜๋Š” ์ผ ์—†์ด, React ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์‚ฌ์šฉ์ž lint ๊ทœ์น™์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

JSX๋„ ์œ ์‚ฌํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. React์—์„œ ๊ผญ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ๋ฏธ์ , ์‹ค์šฉ์ ์ธ ์ด์œ ๋กœ Facebook์—์„œ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค์—์„œ๋Š”, JSX๋Š” React ์—˜๋ฆฌ๋จผํŠธ ํŠธ๋ฆฌ๋ฅผ ๋‹ค๋ฃจ๋Š” ํˆด์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ํžŒํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด hoisting constant elements์™€ ์•ˆ์ „ํ•œ lint ๋ฐ codemod ๋‚ด๋ถ€ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ๊ณผ ๊ฐ™์€ ๋นŒ๋“œ ์‹œ์˜ ์ตœ์ ํ™”๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ JSX ์†Œ์Šค ์œ„์น˜๋ฅผ ๊ฒฝ๊ณ ์— ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋…ํ‘ธ๋”ฉ

์šฐ๋ฆฌ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ œ๊ธฐํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ์ตœ์„ ์„ ๋‹คํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์šฐ๋ฆฌ๋Š” ์‚ฌ๋žŒ๋“ค์ด โ€œ๋˜ํ•œโ€ Facebook ๋‚ด๋ถ€์ ์œผ๋กœ ๊ฒช๊ณ  ์žˆ๋Š” ์ด์Šˆ๋ฅผ ์šฐ์„ ์‹œํ•  ์ˆ˜ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜ ์ง๊ด€์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์ด ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ React์— ๋‚ด๊ธฐํ•  ์ˆ˜ ์žˆ๋Š” ์ฃผ์š”ํ•œ ์ด์œ ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๋ถ€์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— React๊ฐ€ ๋‚ด์ผ ์‚ฌ๋ผ์ง€์ง€๋Š” ์•Š์„ ๊ฑฐ๋ผ๋Š” ํ™•์‹ ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React๋Š” Facebook์—์„œ์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. React๋Š” ๊ธฐ์—…์— ํ™•์‹คํ•œ ๋น„์ง€๋‹ˆ์Šค ๊ฐ€์น˜๋ฅผ ๊ฐ€์ ธ๋‹ค ์ฃผ๋ฉฐ ๋งŽ์€ ํ”„๋กœ๋•ํŠธ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋…ํ‘ธ๋”ฉ ๊ทธ๊ฒƒ์€ ์šฐ๋ฆฌ์˜ ์ „๋ง์„ ๋‚ ์นด๋กญ๊ฒŒ ์œ ์ง€ํ•˜๋ฉฐ ์•ž์œผ๋กœ ๋‚˜์•„๊ฐ€๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์ดˆ์ ์„ ๋งž์ถ”๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ œ๊ธฐํ•˜๋Š” ์ด์Šˆ๋ฅผ ๋ฌด์‹œํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฐ€๋ น, ์šฐ๋ฆฌ๊ฐ€ Facebook ๋‚ด๋ถ€์—์„œ๋Š” ์–ด๋Š ํ•˜๋‚˜์—๋„ ์˜์กดํ•˜์ง€ ์•Š์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์›น ์ปดํฌ๋„ŒํŠธ์™€ SVG์— ๋Œ€ํ•œ ์ง€์›์„ React์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ ๊ทน์ ์œผ๋กœ ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ณ ํ†ต ํฌ์ธํŠธ์— ๋Œ€ํ•ด ๋“ฃ๊ณ  ์žˆ๊ณ  ์šฐ๋ฆฌ์˜ ์ตœ์„ ์„ ๋‹คํ•ด ๊ทธ๊ฒƒ๋“ค์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” React๋ฅผ ์šฐ๋ฆฌ์—๊ฒŒ ํŠน๋ณ„ํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ , ์šฐ๋ฆฌ๋Š” ๋‹ค์‹œ ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ์Œ์— ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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

์ด ์ ‘๊ทผ๋ฒ•์˜ ๋‹จ์ ์€ โ€œ์‹œ์ž‘ํ•˜๊ธฐโ€์™€ ๊ฐ™์€ ๊ฒฝํ—˜์ฒ˜๋Ÿผ ๋•Œ๋•Œ๋กœ Facebook ํŒ€์ด ๋‹ค๋ฃฐ ํ•„์š”๊ฐ€ ์—†๋Š” ๊ฒƒ๋“ค์— ์ถฉ๋ถ„ํ•œ ์ง‘์ค‘์„ ํ•˜์ง€ ๋ชป ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ์ •ํ™•ํ•˜๊ฒŒ ์•Œ๊ณ  ์žˆ๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์šฐ๋ฆฌ๊ฐ€ ์ด์ „์— ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ์—์„œ ํ–ˆ๋˜ ๊ฒƒ๊ณผ ๊ฐ™์€ ๋™์ผํ•œ ์‹ค์ˆ˜ ์—†์ด ๋ชจ๋“  ์‚ฌ๋žŒ์—๊ฒŒ ์ด์ต์ด ๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์–ด๋–ป๊ฒŒ ๊ฐœ์„ ํ•  ๊ฒƒ์ธ๊ฐ€ ์ƒ๊ฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Is this page useful?Edit this page