๊ธฐ์กด์ js, jsx์ ๊ฐ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์์ฑํ๋ React ํ๋ก์ ํธ ์ฝ๋๋ค์ TypeScript(ํ์ ์คํธ๋ฆฝํธ)๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด ๋ณด๋ฉด์ ์ ์ฉํ ๋ฐฉ๋ฒ๊ณผ, ์ ์ฉํ๋ฉด์ ์จ๋ฆํ ์ค๋ฅ๋ค์ ๊ดํด ๊ธฐ๋กํด ๋ณด๋ ค ํ๋ค.
npm install --save typescript
์ ์ฉํ ํ๋ก์ ํธ์ typescript๋ฅผ ์ค์นํด ์ค๋ค
typescript ์ค์น๋ง ์งํํ ํ ์์
ํ๋ค
๋ช ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ค๋ฅ๊ฐ ์๊ฒผ๋ค. (ํนํ styled-components)
์๋์ ๊ฐ์ด ๊ธฐ์กด JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ @types/๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ก ์ค์นํด ์ฃผ์.
์์)
@types/styled-components
@types/react-dom
@types/axios
๋์ ๊ฒฝ์ฐ ํต์ฌ์ ์ธ react, react-dom, styled-components, axios ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ @types/๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ก ์ฌ์ค์น ํด์ฃผ์๊ณ ,
์ดํ ์ถ๊ฐ๋ก ์ค์นํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ผ๋ฐ ์ค์น ํ @types๋ก ์ค์น ๋๋ฒ์ ์งํํ๊ณ ์๋ค. (@types/๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ค์น๋ง ์งํํ๋ฉด ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋์ด ๋์ง ์์๋ค.)
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น ํ ๋ฐ๋ก ts ํ์ผ๋ก ๋ณํํ์ ๋ ๋ง์ ์ค๋ฅ๋ฅผ ๋ง๋ฌ๋๋ฐ, ๊ทธ ์ค ์ ์ผ ์ฑ๊ฐ๊ฒผ๋ ์ค๋ฅ ๋๊ฐ์ง๊ฐ import ์ svg, png, jpg, jpeg ๋ฑ์ ์ด๋ฏธ์ง ํ์ผ์ ์ธ์ํ์ง ๋ชปํ๋ ๊ฒ, ๊ทธ๋ฆฌ๊ณ styled-component๋ ์ธ์ํ์ง ๋ชปํ๋ ๊ฒ์ด์๋ค.
src
ํด๋ ๋ฐ๋ก ํ์์ custom.d.ts
๋ผ๋ ์ด๋ฆ์ ํ์ผ์ ๋ง๋ ๋ค.declare module '*.svg' {
const content: any;
export default content;
}
declare module '*.jpg' {
const value: any;
export default value;
}
declare module '*.png' {
const value: any;
export default value;
}
declare module 'styled-components';
์ ํํ๋ .js/.jsx
ํ์ผ ํ์ฅ์๋ช
์ ๋ชจ๋ .tsx
๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ด๋ค.
์ด์ ๋ ์๋ ์ค๋ฅ ๋ชจ์์ง์์ ์ค๋ช
ํ๋ ค ํ๋ค.
์์์ ์ค๋ช ํ ์ค๋ฅ ์ธ์๋ ๋ง์ ์ค๋ฅ๋ฅผ ๋ง๋ฌ๋๋ฐ, ๊ทธ ์ค ์ฃผ์ ์ค๋ฅ์ ํด๊ฒฐ๋ฐฉ๋ฒ์ ์ด์ผ๊ธฐํ๋ ค ํ๋ค.
index.js
๋ฅผ index.ts
๋ก ํ์ฅ์๋ช
์ ๋ฐ๊พธ๋ ๋ค์๊ณผ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
'App'์(๋) ๊ฐ์ ์ฐธ์กฐํ์ง๋ง, ์ฌ๊ธฐ์๋ ํ์์ผ๋ก ์ฌ์ฉ๋๊ณ ์์ต๋๋ค.
์๋ฌ ๋ฉ์์ง์์๋ "typeof App์ ์ฌ์ฉํ์๊ฒ ์ต๋๊น?" ๋ผ๋ ์ ์์ด ๋์ค์ง๋ง
ํค๋งค๋ค ์ฐพ์ ์ง์ง ํด๊ฒฐ๋ฐฉ๋ฒ์ index.tsx
๋ก ๋ฐ๊ฟ์ฃผ๋ ๊ฒ์ด์๋ค.
๊ธฐ์กด ์คํ์ผ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ฉด์ props๋ฅผ ์ฌ์ฉํ ๋ถ๋ถ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
'props' ๋งค๊ฐ ๋ณ์์๋ ์์์ ์ผ๋ก 'any' ํ์์ด ํฌํจ๋ฉ๋๋ค.
props์ type์ ๋ช ์ํด ์ฃผ๋ ํด๊ฒฐ๋์๋ค.
onClick
ํ๋กํผํฐ๊ฐ ์ฌ๋ฐ๋ฅธ ํ์
์ธ์ง ๊ฒ์ฌํ ์ ์์ด ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
1) ํจ์ ์ฌ์ฉ ์์๋ React.FC
๋ผ๋ ํ์
์ ์ฌ์ฉ (๋ค๋ง ์ต๊ทผ ์ง์ํ๋ ๋๋)
2) ์ปดํฌ๋ํธ์ ํ๋กํผํฐ ํ์
์ ๋ช
์์ ์ผ๋ก ์ง์ - onClick ํ๋กํผํฐ๊ฐ ๋ฒํผ ์๋ฆฌ๋จผํธ์์ ์ฌ์ฉ๋๋ ๋ง์ฐ์ค ์ด๋ฒคํธ ํธ๋ค๋ฌ ํจ์์์ ๋ช
์์ ์ผ๋ก ์ ์ธ (React.MouseEventHandler<HTMLButtonElement>
)
React.MouseEventHandler<HTMLButtonElement>
์ ์๋ฏธ
React.MouseEventHandler
: ์ด ํ์ ์ React์์ ์ ๊ณตํ๋ ๋ง์ฐ์ค ์ด๋ฒคํธ ํธ๋ค๋ฌ ํ์ ์์ ์๋ฏธํจ<HTMLButtonElement>
: ํด๋น ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์ด๋ค HTML ์๋ฆฌ๋จผํธ์์ ์ฌ์ฉ๋๋์ง๋ฅผ ๋ํ๋ธ๋ค. ์ฌ๊ธฐ์๋ ๋ฒํผ ์๋ฆฌ๋จผํธ์ ์ฌ์ฉ๋๋ฏ๋ก HTMLButtonElement๋ก ์ง์
TypeScript๊ฐ ์ปดํฌ๋ํธ์ ํ์ ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ถ๋ก ํ๊ณ , ํ๋กํผํฐ ํ์ ์ ๊ฒ์ฌํ ์ ์์ด์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์๊ฒ ๋๋ค.
๊ธ ์ ๋ดค์ต๋๋ค, ๋ง์ ๋์์ด ๋์์ต๋๋ค.