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์ ๋ํด ๋ ์์๋ณด๊ณ ์ถ์ผ์๋ค๋ฉด ๋ค์ ๋ฆฌ์์ค๋ค๋ฅผ ํ์ธํด๋ณด์ธ์.
- Flow Documentation: Type Annotations
- Flow Documentation: Editors
- Flow Documentation: React
- Linting in 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์ ๋ํด ์ข ๋ ์์๋ณด๊ณ ์ถ๋ค๋ฉด ๋ค์ ๋ฆฌ์์ค๋ค์ ํ์ธํด๋ณด์ธ์.
- TypeScript Documentation: Everyday Types
- TypeScript Documentation: Migrating from JavaScript
- TypeScript Documentation: React and Webpack
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์์ ์ฌ์ฉํ ์ ์๋ ์ ์ ํ์ ์ธ์ด๋ค์ ์์ ๋กญ๊ฒ ์ถ๊ฐํด์ฃผ์ธ์.