We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Static Type Checking

These docs are old and wonโ€™t be updated. Go to react.dev for the new React docs.

Check out React TypeScript cheatsheet for how to use React with TypeScript.

Flow, TypeScript์™€ ๊ฐ™์€ ์ •์  ํƒ€์ž… ์ฒด์ปค๋“ค์€ ์ฝ”๋“œ ์‹คํ–‰ ์ „์— ํŠน์ •ํ•œ ํƒ€์ž… ๋ฌธ์ œ๋ฅผ ์ฐพ์•„๋ƒ…๋‹ˆ๋‹ค. ๋˜ํ•œ ์ž๋™์™„์„ฑ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ฐœ๋ฐœ์ž์˜ ์ž‘์—… ํ๋ฆ„์„ ๊ฐœ์„ ํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ํฐ ์ฝ”๋“œ ๋ฒ ์ด์Šค์—์„œ๋Š” PropTypes๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹  Flow ํ˜น์€ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Flow

Flow๋Š” JavaScript ์ฝ”๋“œ๋ฅผ ์œ„ํ•œ ์ •์  ํƒ€์ž… ์ฒด์ปค์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ–ˆ์œผ๋ฉฐ, ๋ณดํ†ต React์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํŠน๋ณ„ํ•œ ํƒ€์ž… ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜, ํ•จ์ˆ˜ ๋ฐ React ์ปดํฌ๋„ŒํŠธ์— ์ฃผ์„์„ ๋‹ฌ ์ˆ˜ ์žˆ๊ณ , ์—๋Ÿฌ๋ฅผ ์กฐ๊ธฐ์— ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์ดˆ์ ์ธ ๋ถ€๋ถ„์„ ๋” ์•Œ์•„๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด introduction to Flow ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Flow๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ๋งŒ์กฑ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

์ด ๋‹จ๊ณ„๋“ค์— ๋Œ€ํ•ด ์•„๋ž˜์—์„œ ์ž์„ธํžˆ ์„ค๋ช…ํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ์— Flow ์ถ”๊ฐ€ํ•˜๊ธฐ

์šฐ์„ , ํ„ฐ๋ฏธ๋„์„ ํ†ตํ•ด ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ๋“ค์–ด๊ฐ„ ๋’ค ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ด์ฃผ์„ธ์š”.

Yarn์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

yarn add --dev flow-bin

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npm install --save-dev flow-bin

์ด ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ํ”„๋กœ์ ํŠธ์— ์ตœ์‹  ๋ฒ„์ „ Flow๊ฐ€ ์„ค์น˜๋ฉ๋‹ˆ๋‹ค.

์ด์ œ ํ„ฐ๋ฏธ๋„์„ ํ†ตํ•ด Flow๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ package.json ํŒŒ์ผ์˜ "scripts" ๋ถ€๋ถ„์— "flow"๋ผ๊ณ  ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค.

{
  // ...
  "scripts": {
    "flow": "flow",    // ...
  },
  // ...
}

๋งˆ์ง€๋ง‰์œผ๋กœ ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์‹คํ–‰์‹œ์ผœ์ค๋‹ˆ๋‹ค.

Yarn์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

yarn run flow init

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npm run flow init

์ด ๋ช…๋ น์–ด๋Š” Flow ํ™˜๊ฒฝ์„ค์ • ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

์ปดํŒŒ์ผ๋œ ์ฝ”๋“œ์—์„œ Flow ๋ฌธ๋ฒ• ์ œ๊ฑฐํ•˜๊ธฐ

Flow๋Š” ์ฝ”๋“œ ์ฃผ์„์„ ์œ„ํ•œ ํŠน๋ณ„ํ•œ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ JavaScript ์–ธ์–ด๋ฅผ ํ™•์žฅํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด ๋ฌธ๋ฒ•์„ ์•Œ์•„์ฐจ๋ฆฌ์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ปดํŒŒ์ผ๋œ JavaScript ๋ฒˆ๋“ค์„ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด๋‚ด๊ธฐ๋งŒ ํ•˜๊ณ  ๋๋‚ด์„œ๋Š” ์•ˆ๋ฉ๋‹ˆ๋‹ค.

์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์€ JavaScript๋ฅผ ์ปดํŒŒ์ผํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

Create React App

ํ”„๋กœ์ ํŠธ๋ฅผ Create React App์„ ํ†ตํ•ด ์„ธํŒ…ํ•˜์…จ๋‹ค๋ฉด, ์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค! Flow ์ฃผ์„์€ ์ด๋ฏธ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ฑฐ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋– ํ•œ ์ž‘์—…์„ ๋ณ„๋„๋กœ ํ•ด์ค„ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

Babel

์ฃผ์˜

์•„๋ž˜ ์„ค๋ช…์€ Create React App ์‚ฌ์šฉ์ž๋“ค์„ ์œ„ํ•œ ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. Create React App์ด Babel์„ ์‚ฌ์šฉํ•˜๊ธฐ๋Š” ํ•˜์ง€๋งŒ, ์ด๋ฏธ Flow๋ฅผ ์ดํ•ดํ•˜๋„๋ก ์„ค์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Create React App์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ๋ถ„๋“ค๋งŒ ์ด ๋‹จ๊ณ„๋ฅผ ๋”ฐ๋ผ์™€ ์ฃผ์„ธ์š”.

์ง์ ‘ Babel ์„ค์ •์„ ํ•œ๋‹ค๋ฉด Flow๋ฅผ ์œ„ํ•ด ํŠน๋ณ„ํ•œ ํ”„๋ฆฌ์…‹์„ ์„ค์น˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

Yarn์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

yarn add --dev @babel/preset-flow

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npm install --save-dev @babel/preset-flow

์„ค์น˜๊ฐ€ ๋๋‹ค๋ฉด, flow ํ”„๋ฆฌ์…‹์„ Babel configuration์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Babel์„ .babelrc ํŒŒ์ผ์—์„œ ์„ค์ •ํ•œ๋‹ค๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

{
  "presets": [
    "@babel/preset-flow",    "react"
  ]
}

์ด ๋ถ€๋ถ„์€ ์ฝ”๋“œ์— Flow ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

์ฃผ์˜

Flow๋Š” react ํ”„๋ฆฌ์…‹์„ ํ•„์ˆ˜์ ์œผ๋กœ ์š”๊ตฌํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ์ž์ฃผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. Flow ์ž์ฒด๊ฐ€ JSX ๊ตฌ๋ฌธ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋นŒ๋“œ ์„ค์ •๋“ค

Create React App๊ณผ Babel์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด flow-remove-types๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ฃผ์„์„ ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Flow ์‹คํ–‰ํ•˜๊ธฐ

์œ„์˜ ์„ค๋ช…์„ ์ž˜ ๋”ฐ๋ผ์™”๋‹ค๋ฉด, Flow๋ฅผ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

yarn flow

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npm run flow

๋‹ค์Œ ๊ฐ™์€ ๋ฉ”์„ธ์ง€๊ฐ€ ๋ณด์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

No errors!
โœจ  Done in 0.17s.

Flow ํƒ€์ž… ์ฃผ์„ ์ถ”๊ฐ€ํ•˜๊ธฐ

๊ธฐ๋ณธ์ ์œผ๋กœ Flow๋Š” ๋‹ค์Œ ์ฃผ์„์ด ํฌํ•จ๋œ ํŒŒ์ผ๋งŒ ์ฒดํฌํ•ฉ๋‹ˆ๋‹ค.

// @flow

๋Œ€์ฒด์ ์œผ๋กœ ์œ„ ์ฃผ์„์€ ํŒŒ์ผ ์ตœ์ƒ๋‹จ์— ๋‘ก๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์˜ ๋ช‡๋ช‡ ํŒŒ์ผ์— ์ฃผ์„์„ ์ถ”๊ฐ€ํ•˜๊ณ  yarn flow ๋‚˜ npm run flow ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜์—ฌ Flow๊ฐ€ ์–ด๋–ค ๋ฌธ์ œ๋ฅผ ์ฐพ์•„๋ƒˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณด์„ธ์š”.

์ฃผ์„์— ์ƒ๊ด€์—†์ด ๋ชจ๋“  ํŒŒ์ผ๋“ค์„ ์ฒดํฌํ•˜๋Š” ์˜ต์…˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ๊ฒƒ์€ ์–ด๋ ต๊ฒ ์ง€๋งŒ ๋ชจ๋“  ํƒ€์ž…์„ ์ฒดํฌํ•˜๊ณ ์ž ํ•˜๋Š” ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ์—๋Š” ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ ๋ชจ๋“  ์ค€๋น„๋ฅผ ๋งˆ์ณค์Šต๋‹ˆ๋‹ค! Flow์— ๋Œ€ํ•ด ๋” ์•Œ์•„๋ณด๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด ๋‹ค์Œ ๋ฆฌ์†Œ์Šค๋“ค๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”.

TypeScript

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

TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ๋งŒ์กฑํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

  • ํ”„๋กœ์ ํŠธ ์˜์กด์„ฑ์— TypeScript๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  • TypeScript ์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • ์˜ฌ๋ฐ”๋ฅธ ํŒŒ์ผ ํ™•์žฅ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ •์˜๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

์ข€ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Create React App๊ณผ ํ•จ๊ป˜ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‚ฌ์šฉํ•˜๊ธฐ

Create React App ์€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ณ„๋„์˜ ์„ค์ • ์—†์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ด์ค๋‹ˆ๋‹ค.

๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜๋ฉด TypeScript๋ฅผ ์ง€์›ํ•˜๋Š” ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

npx create-react-app my-app --template typescript

๋˜ํ•œ ์ด๋ฏธ ์กด์žฌํ•˜๋Š” Create React App ํ”„๋กœ์ ํŠธ์—๋„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์„œ์—์„œ ํ™•์ธํ•ด๋ณด์„ธ์š”.

์ฃผ์˜

Create React App์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ์ด ํŽ˜์ด์ง€์˜ ๋‚จ์€ ๋ถ€๋ถ„์„ ๋„˜๊ธฐ์…”๋„ ์ข‹์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” Create React App์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์‚ฌ์šฉ์ž๋“ค์„ ์œ„ํ•œ ์„ค๋ช…์ž…๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ์— TypeScript ์ถ”๊ฐ€ํ•˜๊ธฐ

ํ„ฐ๋ฏธ๋„์— ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

Yarn์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

yarn add --dev typescript

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npm install --save-dev typescript

์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค! ํ”„๋กœ์ ํŠธ์— ๊ฐ€์žฅ ์ตœ์‹  ๋ฒ„์ „ TypeScript๊ฐ€ ์„ค์น˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค. TypeScript๋ฅผ ์„ค์น˜ํ•˜๋ฉด tsc ๋ช…๋ น์–ด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„ค์ •์„ ํ•˜๊ธฐ ์ „์— package.jsonํŒŒ์ผ"script"๋ถ€๋ถ„์— "tsc"๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”.

{
  // ...
  "scripts": {
    "build": "tsc",    // ...
  },
  // ...
}

TypeScript ์ปดํŒŒ์ผ๋Ÿฌ ์„ค์ •ํ•˜๊ธฐ

์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋ฌด์—‡์„ ํ•ด์•ผํ• ์ง€ ์„ค์ •ํ•ด์ฃผ์ง€ ์•Š๋Š”๋‹ค๋ฉด ์•„๋ฌด ๋„์›€๋„ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. TypeScript๋Š” tsconfig.json์ด๋ผ๋Š” ํŠน๋ณ„ํ•œ ํŒŒ์ผ์— ์„ค์ •์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋ ค๋ฉด ์•„๋ž˜์˜ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

Yarn์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

yarn run tsc --init

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npx tsc --init

์ƒ์„ฑ๋œ tsconfig.json์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜๋งŽ์€ ์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์˜ต์…˜์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•ด๋ณด์„ธ์š”.

๋งŽ์€ ์˜ต์…˜ ์ค‘์—์„œ rootDir์™€ outDir๋ฅผ ์‚ดํŽด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” TypeScriptํŒŒ์ผ์„ ํ†ตํ•ด JavaScript ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์†Œ์Šค ํŒŒ์ผ๊ณผ ์ƒ์„ฑ๋œ ํŒŒ์ผ๊ฐ„์˜ ํ˜ผ๋™์„ ์•ผ๊ธฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‘ ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์นฉ๋‹ˆ๋‹ค.

  • ์šฐ์„  ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์†Œ์Šค์ฝ”๋“œ๋Š” src ๋””๋ ‰ํ† ๋ฆฌ์— ์œ„์น˜์‹œํ‚ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ src
โ”‚   โ””โ”€โ”€ index.ts
โ””โ”€โ”€ tsconfig.json
  • ๊ทธ ๋‹ค์Œ, ์†Œ์Šค์ฝ”๋“œ๊ฐ€ ์–ด๋”” ์žˆ๋Š”์ง€, ์บ„ํŒŒ์ผ์„ ํ†ตํ•ด ์ƒ์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์–ด๋””์— ์œ„์น˜์‹œ์ผœ์•ผ ํ•˜๋Š”์ง€ ์ปดํŒŒ์ผ๋Ÿฌ์— ์„œ์ˆ ํ•ฉ๋‹ˆ๋‹ค.
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",    "outDir": "build"    // ...
  },
}

์ข‹์Šต๋‹ˆ๋‹ค! ์ด์ œ ๋นŒ๋“œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ƒ์„ฑ๋œ JavaScript๋ฅผ build ํด๋”์— ์œ„์น˜์‹œํ‚ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค. TypeScript React Starter๋Š” ์‹œ์ž‘ํ•˜๊ธฐ์— ์ข‹์€ ๊ทœ์น™๋“ค์„ ์ •์˜ํ•œ tsconfig.jsonํŒŒ์ผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ์ƒ์„ฑ๋œ JavaScript ์ฝ”๋“œ๋ฅผ ์†Œ์Šค ๊ด€๋ฆฌ์— ๋‘๊ณ  ์‹ถ์–ด ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋•Œ๋ฌธ์— build ํด๋”๋ฅผ .gitignore ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

ํŒŒ์ผ ํ™•์žฅ์ž

React์—์„œ๋Š” ๋Œ€๋ถ€๋ถ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ .js ํŒŒ์ผ์— ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. TypeScript์—๋Š” ๋‘๊ฐ€์ง€ ํ™•์žฅ์ž๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

.ts๋Š” TypeScript ํŒŒ์ผ ํ™•์žฅ์ž ๊ธฐ๋ณธ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— .tsx๋Š” JSX ๋ฌธ๋ฒ•์ด ํฌํ•จ๋œ ์ฝ”๋“œ๋ฅผ ์œ„ํ•œ ํŠน๋ณ„ํ•œ ํ™•์žฅ์ž์ž…๋‹ˆ๋‹ค.

TypeScript ์‹คํ–‰ํ•˜๊ธฐ

์œ„ ์„ค๋ช…์„ ์ž˜ ๋”ฐ๋ผ์™”๋‹ค๋ฉด TypeScript๋ฅผ ์ฆ‰์‹œ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

yarn build

npm์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

npm run build

ํ„ฐ๋ฏธ๋„์— ์•„๋ฌด๋Ÿฐ ์ถœ๋ ฅ์ด ์—†๋‹ค๋ฉด ์ปดํŒŒ์ผ์ด ์„ฑ๊ณต์ ์œผ๋กœ ์™„๋ฃŒ๋จ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

ํƒ€์ž… ์ •์˜

๋‹ค๋ฅธ ํŒจํ‚ค์ง€์˜ ์˜ค๋ฅ˜์™€ ํžŒํŠธ๋ฅผ ์ถœ๋ ฅํ•˜๊ธฐ ์œ„ํ•ด ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์„ ์–ธ ํŒŒ์ผ์— ์˜์กดํ•ฉ๋‹ˆ๋‹ค. ์„ ์–ธ ํŒŒ์ผ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ๋ชจ๋“  ํƒ€์ž… ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์˜ npm์— ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ์„ ์–ธํŒŒ์ผ์ด ์žˆ๋‹ค๋ฉด ํ•ด๋‹นํ•˜๋Š” JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ์„ ์–ธ์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

Bundled - ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ž์‹ ์˜ ์„ ์–ธ ํŒŒ์ผ์„ ๋ฒˆ๋“คํ•ฉ๋‹ˆ๋‹ค. ์ด ํ›„ ํ•ด์•ผํ•  ์ผ์€ ๊ทธ์ € ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค์šด๋ฐ›๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ๋ฐ–์— ํ•  ์ผ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์—๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋ฒˆ๋“ค๋œ ํƒ€์ž…์„ ๊ฐ€์ง€๊ณ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๋ ค๋ฉด ํ”„๋กœ์ ํŠธ ๋‚ด์— index.d.ts ํŒŒ์ผ์ด ์กด์žฌํ•˜๋Š”์ง€ ์ฐพ์•„๋ณด์„ธ์š”. ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” package.json ํŒŒ์ผ์˜ typings ํ˜น์€ types ํ•„๋“œ ์•„๋ž˜์— ์ •์˜๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

DefinitelyTyped - DefinitelyTyped๋Š” ์„ ์–ธ ํŒŒ์ผ์„ ๋ฒˆ๋“คํ•˜์ง€ ์•Š์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์œ„ํ•œ ๊ฑฐ๋Œ€ ์ €์žฅ์†Œ์ž…๋‹ˆ๋‹ค. ์ด ์ €์žฅ์†Œ์˜ ์„ ์–ธ์€ Microsoft์™€ ์˜คํ”ˆ์†Œ์Šค ๊ธฐ์—ฌ์ž๋“ค์— ์˜ํ•ด ๊ด€๋ฆฌ๋˜๋Š” ํฌ๋ผ์šฐ๋“œ ์†Œ์Šค์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด React๋Š” ์ž์ฒด ์„ ์–ธ ํŒŒ์ผ์„ ๋ฒˆ๋“คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  DefinitelyTyped๋ฅผ ํ†ตํ•ด ๋‹ค์šด๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ํ„ฐ๋ฏธ๋„์— ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

Local Declarations ๋•Œ๋•Œ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ํŒจํ‚ค์ง€๊ฐ€ ํƒ€์ž… ์„ ์–ธ ํŒŒ์ผ์„ ๋ฒˆ๋“คํ•˜์ง€๋„ ์•Š๊ณ  DefinitelyTyped์—์„œ ์ œ๊ณตํ•˜์ง€๋„ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ ๋กœ์ปฌ ํƒ€์ž… ์„ ์–ธ ํŒŒ์ผ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด declarations.d.ts ํŒŒ์ผ์„ sourse ๋””๋ ‰ํ† ๋ฆฌ์˜ ๋ฃจํŠธ์— ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ ์„ ์–ธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

declare module 'querystring' {
  export function stringify(val: object): string;
  export function parse(val: string): object;
}

์ด์ œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ค€๋น„๋ฅผ ๋งˆ์ณค์Šต๋‹ˆ๋‹ค! TypeScript์— ๋Œ€ํ•ด ์ข€ ๋” ์•Œ์•„๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ ๋ฆฌ์†Œ์Šค๋“ค์„ ํ™•์ธํ•ด๋ณด์„ธ์š”.

ReScript

ReScript๋Š” JavaScript๋กœ ์ปดํŒŒ์ผ๋˜๋Š” ํƒ€์ž…์ด ์žˆ๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์ค‘ ๋ช‡ ๊ฐ€์ง€๋Š” 100% ํƒ€์ž… ์ปค๋ฒ„๋ฆฌ์ง€๊ฐ€ ๋ณด์žฅ๋œ๋‹ค๋Š” ์ ๊ณผ first-class๋กœ JSX๋ฅผ ์ง€์›ํ•˜๋ฉฐ, JS์™€ TS๋กœ ์ž‘์„ฑ๋œ React ์ฝ”๋“œ๋ฒ ์ด์Šค์™€์˜ ํ†ตํ•ฉ์„ ํ—ˆ์šฉํ•˜๊ธฐ ์œ„ํ•œ React ์ „์šฉ ๋ฐ”์ธ๋”ฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฏธ ์ž‘์„ฑ๋œ JS์™€ React ์ฝ”๋“œ๋ฒ ์ด์Šค์— ReScript๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๋” ์ž์„ธํ•œ ์ •๋ณด๋Š” ์—ฌ๊ธฐ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Kotlin

Kotlin์€ JetBrains์ด ๊ฐœ๋ฐœํ•œ ์ •์  ํƒ€์ž… ์–ธ์–ด์ž…๋‹ˆ๋‹ค. Kotlin์˜ ํƒ€๊นƒ ํ”Œ๋žซํผ์€ JVM, Android, LLVM, JavaScript์ž…๋‹ˆ๋‹ค.

JetBrains์€ React ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์œ„ํ•ด React bindings๋‚˜ Create React Kotlin App์™€ ๊ฐ™์€ ๋ช‡๋ช‡ ๋„๊ตฌ๋ฅผ ๊ฐœ๋ฐœ, ์œ ์ง€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Create React Kotlin App์€ ๋ณ„๋‹ค๋ฅธ ๋นŒ๋“œ ์„ค์ • ์—†์ด Kotlin์œผ๋กœ React ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์–ธ์–ด๋“ค

JavaScript๋กœ ์ปดํŒŒ์ผ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋‹ค๋ฅธ ์ •์  ํƒ€์ž… ์–ธ์–ด๋“ค๋„ React์™€ ํ˜ธํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด F#/Fable๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ elmish-react๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ฐ ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”. ๋˜ํ•œ ์ด ํŽ˜์ด์ง€์— React์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ •์  ํƒ€์ž… ์–ธ์–ด๋“ค์„ ์ž์œ ๋กญ๊ฒŒ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”.

Is this page useful?Edit this page