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

Codebase Overview

์ด ์„น์…˜์€ React ์ฝ”๋“œ๋ฒ ์ด์Šค ๊ตฌ์กฐ์™€ ๊ด€๋ก€, ๊ทธ๋ฆฌ๊ณ  ๊ตฌํ˜„์— ๋Œ€ํ•œ ๊ฐœ์š”๋ฅผ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

React์— ๊ธฐ์—ฌํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด, ์ด ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ˆ˜์ •ํ•˜๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

React ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ์•„๋ž˜ ๊ด€๋ก€๋“ค์˜ ์‚ฌ์šฉ์„ ๋ฐ˜๋“œ์‹œ ์ถ”์ฒœํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ด€๋ก€๋“ค์€ ์ด์ „์— ๋งŽ์ด ์‚ฌ์šฉ๋œ ๊ฒƒ๋“ค์ด๋ฉฐ, ์ฐจ์ฐจ ์ˆ˜์ •๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ตœ์ƒ์œ„ ํด๋”

React ์ €์žฅ์†Œ๋ฅผ ํด๋ก ํ•˜๊ฒŒ ๋˜๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช‡ ๊ฐœ์˜ ์ตœ์ƒ์œ„ ํด๋”๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • packages ํด๋”๋Š” React ์ €์žฅ์†Œ์— ์žˆ๋Š” ๋ชจ๋“  ํŒจํ‚ค์ง€๋“ค์— ๋Œ€ํ•ด package.json๊ณผ ๊ฐ™์€ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ์™€ src ํด๋”๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€๊ฒฝํ•˜๊ณ ์ž ํ•˜๋Š” ๋ถ€๋ถ„์ด ์ฝ”๋“œ์™€ ๊ด€๋ จ๋˜์–ด ์žˆ๋‹ค๋ฉด, src ํด๋”์— ๋Œ€๋ถ€๋ถ„์„ ํ• ์• ํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  • fixtures์—๋Š” ๊ธฐ์—ฌ์ž๋“ค์„ ์œ„ํ•œ ๋ช‡ ๊ฐ€์ง€ React ํ…Œ์ŠคํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.
  • build ํด๋”์—๋Š” React์˜ ๋นŒ๋“œ ๊ฒฐ๊ณผ๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ €์žฅ์†Œ์—๋Š” ์กด์žฌํ•˜์ง€ ์•Š์ง€๋งŒ, React๋ฅผ ํด๋ก ํ•˜๊ณ  ์ฒ˜์Œ ๋นŒ๋“œํ•  ์‹œ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

์„ค๋ช… ๋ฌธ์„œ๋Š” React๋กœ๋ถ€ํ„ฐ ๋ถ„๋ฆฌ๋œ ์ €์žฅ์†Œ์— ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ๊ฒƒ ์™ธ์— ๋ณ„๋„์˜ ์ตœ์ƒ์œ„ ํด๋”๊ฐ€ ์กด์žฌํ•˜์ง€๋งŒ, ๋Œ€๋ถ€๋ถ„ ๊ธฐ์—ฌํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ์‚ฌ์šฉ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Colocated ํ…Œ์ŠคํŠธ

ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์—๋Š” ์œ ๋‹› ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•œ ์ƒ์œ„ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ์†Œ์Šค ์ฝ”๋“œ์™€ ํ•จ๊ป˜ __tests__ ๋””๋ ‰ํ† ๋ฆฌ ๋‚ด๋ถ€์— ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ํ•จ๊ป˜ ๋„ฃ์–ด๋’€์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, setInnerHTML.js์— ๋Œ€ํ•œ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋Š” __tests__/setInnerHTML-test.js์— ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

๊ฒฝ๊ณ ์™€ ๋ถˆ๋ณ€์‹

React ์ฝ”๋“œ๋ฒ ์ด์Šค์—์„œ๋Š” console.error๋ฅผ ์‚ฌ์šฉํ•ด ๊ฒฝ๊ณ ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

if (__DEV__) {
  console.error('Something is wrong.');

๊ฒฝ๊ณ ๋Š” ๊ฐœ๋ฐœ ์‹œ์—๋งŒ ํ‘œ์‹œ๋˜๋ฉฐ ๋ฐฐํฌ ์‹œ์—๋Š” ์™„์ „ํžˆ ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค. ์‹คํ–‰ ์‹œ์— ๋ช‡ ๊ฐ€์ง€ ์ฝ”๋“œ๋ฅผ ๋ฌด์‹œํ•˜๊ธฐ ์œ„ํ•ด์„œ, ๋‹ค์Œ๊ณผ ๊ฐ™์ด invariant ๋ชจ๋“ˆ์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

var invariant = require('invariant');

  2 + 2 === 4,
  'You shall not pass!'

invariant์˜ ๋Œ€์ƒ ์กฐ๊ฑด์‹์ด false์ผ ๋•Œ ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

โ€˜๋ถˆ๋ณ€์‹โ€™์€ โ€˜ํ•ด๋‹น ์กฐ๊ฑด์‹์ด ํ•ญ์ƒ ์ฐธ์ผ ๊ฒฝ์šฐโ€™๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ์˜ ๋™์ž‘์„ ํ™•์‹คํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•œ ์š”์†Œ๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๊ฐœ๋ฐœ๊ณผ ๋ฐฐํฌ

์˜์‚ฌ ์ „์—ญ ๋ณ€์ˆ˜ __DEV__๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ ์‹œ์—๋งŒ ์ž‘๋™ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น ๋ณ€์ˆ˜๋Š” ์ปดํŒŒ์ผ ๋‹จ๊ณ„์—์„œ ํ•œ๋ฒˆ์— ์ฒ˜๋ฆฌ๋˜๋ฉฐ, CommonJS ๋นŒ๋“œ ์‹œ์— process.env.NODE_ENV !== 'production'๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

์Šคํƒ ๋“œ์–ผ๋ก  ๋นŒ๋“œ์˜ ๊ฒฝ์šฐ, ํ•ด๋‹น ๋ณ€์ˆ˜๋Š” ์••์ถ•ํ•˜์ง€ ์•Š์„ ์‹œ true๋กœ ์ทจ๊ธ‰๋˜๋ฉฐ ์••์ถ• ์‹œ if ๋ธ”๋ก์„ ํฌํ•จํ•˜์—ฌ ์ „๋ถ€ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค.

if (__DEV__) {
  // This code will only run in development.


React๋Š” ์ตœ๊ทผ Flow ๊ฒ€์‚ฌ๋ฅผ ๋„์ž…ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ผ์ด์„ผ์Šค ์ฃผ์„์— @flow ํ‘œ์‹œ๊ฐ€ ํฌํ•จ๋œ ํŒŒ์ผ์€ ์ž๋ฃŒํ˜• ๊ฒ€์‚ฌ๋ฅผ ๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋Š” ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ์ฝ”๋“œ์— ๋Œ€ํ•œ Flow ํ˜•์‹ ์ถ”๊ฐ€์— ๋Œ€ํ•œ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ํ—ˆ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Flow ๊ฒ€์‚ฌ ํ˜•์‹์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

ReactRef.detachRefs = function(
  instance: ReactInstance,
  element: ReactElement | string | number | null | false,
): void {
  // ...

๊ฐ€๋Šฅํ•˜๋ฉด ์ƒˆ๋กœ ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ์— Flow ๊ฒ€์‚ฌ ํ˜•์‹์„ ํฌํ•จํ•ด ์ฃผ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค. yarn flow ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด Flow์— ๋Œ€ํ•œ ํ˜•์‹ ๊ฒ€์‚ฌ๋ฅผ ์ง์ ‘ ์ˆ˜ํ–‰ํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์–‘ํ•œ ํŒจํ‚ค์ง€

React๋Š” monorepo์ž…๋‹ˆ๋‹ค. ํ•ด๋‹น ์ €์žฅ์†Œ๋Š” ์—ฌ๋Ÿฌ ๋ถ„๋ฆฌ๋œ ํŒจํ‚ค์ง€๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ฐ ๋ณ€๊ฒฝ์ ๋“ค์€ ํ•จ๊ป˜ ๋ฐ˜์˜๋˜๊ณ  ๋ชจ๋“  ์ด์Šˆ๋Š” ํ•œ ๊ณณ์—์„œ ๊ด€๋ฆฌ๋ฉ๋‹ˆ๋‹ค.

React ์ฝ”์–ด

React์˜ โ€˜์ฝ”์–ดโ€™๋Š” ๋ชจ๋“  ์ตœ์ƒ์œ„ React API๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • React.createElement()
  • React.Component
  • React.Children

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

React ์ฝ”์–ด์˜ ์†Œ์Šค ์ฝ”๋“œ๋Š” packages/react์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ์ฝ”๋“œ๋Š” npm์—์„œ react ํŒจํ‚ค์ง€๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ด€๋ จ๋œ ์Šคํƒ ๋“œ์–ผ๋ก  ๋ธŒ๋ผ์šฐ์ € ๋นŒ๋“œ๋Š” react.js์ด๋ฉฐ, ์ „์—ญ์—์„œ React ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ Œ๋”๋Ÿฌ

React๋Š” ์›๋ž˜ DOM์„ ๋Œ€์ƒ์œผ๋กœ ํ•˜์—ฌ ๊ฐœ๋ฐœ๋์ง€๋งŒ, ์ดํ›„ React ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ํ†ตํ•ด ๋„ค์ดํ‹ฐ๋ธŒ ํ”Œ๋žซํผ ๋˜ํ•œ ์ง€์›ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ณธ ๋ฌธ๋‹จ์€ React ๋‚ด๋ถ€์˜ โ€˜๋ Œ๋”๋Ÿฌโ€™์— ๋Œ€ํ•ด ๊ฐ„๋žตํžˆ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

๋ Œ๋”๋Ÿฌ๋Š” React ํŠธ๋ฆฌ์˜ ํ”Œ๋žซํผ ์ข…์†์ ์ธ ๋ณ€ํ™˜ ๋ฐฉ๋ฒ•์„ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๋ Œ๋”๋Ÿฌ๋Š” packages/ ํด๋” ์•ˆ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

  • React DOM Renderer๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM์œผ๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ Œ๋”๋Ÿฌ๋Š” ์ตœ์ƒ์œ„ ๋ ˆ๋ฒจ ReactDOM API์— ๊ตฌํ˜„๋˜์–ด ์žˆ์œผ๋ฉฐ npm์—์„œ react-dom ํŒจํ‚ค์ง€๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์Šคํƒ ๋“œ์–ผ๋ก  ๋ธŒ๋ผ์šฐ์ €์—์„œ react-dom.js๋ฅผ ํ†ตํ•ด ์ „์—ญ ReactDOM ํ‚ค์›Œ๋“œ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • React Native Renderer๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋„ค์ดํ‹ฐ๋ธŒ ๋ทฐ๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ Œ๋”๋Ÿฌ๋Š” React ๋„ค์ดํ‹ฐ๋ธŒ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • React Test Renderer๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ JSON ํ˜•์‹์œผ๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ Œ๋”๋Ÿฌ๋Š” Jest์˜ Snapshot ํ…Œ์ŠคํŠธ์— ์‚ฌ์šฉ๋˜๋ฉฐ, npm์—์„œ react-test-renderer ํŒจํ‚ค์ง€๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์–ธ๊ธ‰ํ•œ ๊ฒƒ ์™ธ์— ๊ณต์‹์ ์œผ๋กœ ์ง€์›ํ•˜๋Š” ๋ Œ๋”๋Ÿฌ๋Š” react-art๋กœ ์œ ์ผํ•ฉ๋‹ˆ๋‹ค. GitHub ์ €์žฅ์†Œ์—์„œ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ์—ˆ์ง€๋งŒ, ํ˜„์žฌ๋Š” ๋ฉ”์ธ ์†Œ์Šค ํŠธ๋ฆฌ๋กœ ์˜ฎ๊ฒจ์กŒ์Šต๋‹ˆ๋‹ค.


react-native-renderer๋Š” React ๋„ค์ดํ‹ฐ๋ธŒ ๊ตฌํ˜„์ฒด์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๋งค์šฐ ์–‡์€ ๋ ˆ์ด์–ด์ž…๋‹ˆ๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ ๋ทฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ์‹ค์ œ ํ”Œ๋žซํผ ๊ด€๋ จ ์ฝ”๋“œ๋Š” React ๋„ค์ดํ‹ฐ๋ธŒ ์ €์žฅ์†Œ์— ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

์žฌ์กฐ์ •์ž

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

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

์žฌ์กฐ์ •์ž๋Š” ํ˜„์žฌ๋กœ์„œ๋Š” ์–ด๋– ํ•œ public API๋„ ์กด์žฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ณ„์ ์ธ ํŒจํ‚ค์ง€๋กœ์„œ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  React DOM๊ณผ React ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ™์€ ๋ Œ๋”๋Ÿฌ์— ๊ฐœ๋ณ„์ ์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

์Šคํƒ ์žฌ์กฐ์ •์ž

โ€˜์Šคํƒโ€™ ์žฌ์กฐ์ •์ž๋Š” React 15 ์ดํ•˜์—์„œ ๊ตฌํ˜„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ๋Š” ๋” ์ด์ƒ ์ง€์›ํ•˜์ง€ ์•Š์ง€๋งŒ, ๋‹ค์Œ ์„น์…˜์—์„œ ์ž์„ธํ•œ ์‚ฌํ•ญ์„ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŒŒ์ด๋ฒ„ ์žฌ์กฐ์ •์ž

โ€˜ํŒŒ์ด๋ฒ„โ€™ ์žฌ์กฐ์ •์ž๋Š” ์Šคํƒ ์žฌ์กฐ์ •์ž์—์„œ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ๋ช‡ ๊ฐ€์ง€ ์˜ค๋ž˜๋œ ์˜ค๋ฅ˜๋ฅผ ๊ณ ์น˜๋Š” ๋ฐ์— ์ค‘์ ์„ ๋‘๊ธฐ ์œ„ํ•ด ๊ณ ์•ˆ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ์žฌ์กฐ์ •์ž๋Š” React 16๋ถ€ํ„ฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

ํ•ด๋‹น ์žฌ์กฐ์ •์ž์˜ ๋ชฉํ‘œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ์ค‘๋‹จ ๋ถˆ๊ฐ€๋Šฅํ•œ ์ž‘์—…์„ ์ฒญํฌ๋กœ ๋ถ„ํ• ํ•˜๋Š” ๊ธฐ๋Šฅ
  • ์ง„ํ–‰ ์ค‘์ธ ์ž‘์—…์˜ ์šฐ์„  ์ˆœ์œ„ ์ง€์ •, ์žฌ๋ฐฐ์น˜ ๋ฐ ์žฌ์‚ฌ์šฉ์— ๊ด€ํ•œ ๊ธฐ๋Šฅ
  • React์˜ ๋ ˆ์ด์•„์›ƒ์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•œ ๊ณ„์ธต๋ณ„ ๋ฐฐ์น˜ ์ˆœ์„œ ์ฒ˜๋ฆฌ ๊ธฐ๋Šฅ
  • render() ํ•จ์ˆ˜๋กœ๋ถ€ํ„ฐ์˜ ๋‹ค์ค‘ ์š”์†Œ ๋ฐ˜ํ™˜ ๊ธฐ๋Šฅ
  • ์—๋Ÿฌ ๊ฒฝ๊ณ„์— ๋Œ€ํ•œ ํ–ฅ์ƒ๋œ ์ง€์›

React ํŒŒ์ด๋ฒ„ ๊ตฌ์กฐ์— ๋Œ€ํ•ด ์—ฌ๊ธฐ์™€ ์—ฌ๊ธฐ๋ฅผ ํ†ตํ•ด ๋” ์ž์„ธํžˆ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒŒ์ด๋ฒ„ ์žฌ์กฐ์ •์ž๋Š” React 16๊ณผ ํ•จ๊ป˜ ์ œ๊ณต๋˜์ง€๋งŒ, ๋น„๋™๊ธฐ ๊ธฐ๋Šฅ์€ ์•„์ง ๊ธฐ๋ณธ์ ์œผ๋กœ ํ™œ์„ฑํ™”๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น ์†Œ์Šค ์ฝ”๋“œ๋Š” packages/react-reconciler์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ ์‹œ์Šคํ…œ

React๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์ด๋ฒคํŠธ ์œ„์— ๋ ˆ์ด์–ด๋ฅผ ๊ตฌํ˜„ํ•˜์—ฌ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ € ์ฐจ์ด๋ฅผ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ์ฝ”๋“œ๋Š” packages/react-dom/src/events์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น ์ฝ”๋“œ์— ๋Œ€ํ•œ ์ƒ์„ธํ•œ ์„ค๋ช…์€ ๋‹ค์Œ์˜ ์˜์ƒ (66๋ถ„)์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.

๋‹ค์Œ ๋‚ด์šฉ์€?

๋‹ค์Œ ์„น์…˜์„ ์ฝ๊ณ  ์žฌ์กฐ์ •์ž์— ๋Œ€ํ•œ pre-React 16 ๊ตฌํ˜„์— ๋Œ€ํ•ด ๋” ์ž์„ธํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด์„ธ์š”. ์ƒˆ๋กœ์šด ์žฌ์กฐ์ •์ž์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„์ง ์ž‘์„ฑ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

Is this page useful?Edit this page