ํ์ค Props ์ธํฐํ์ด์ค๋ฅผ ๊ณต์ฉ์ผ๋ก ์ ์ํ๋ฉด ์ปดํฌ๋ํธ์ ์ฌ์ฉ์ ์ ์ ๋ฒ์ ์ ์์ฑํ ๋ Props ์ ์๋ฅผ ์ฌ์ฌ์ฉ ํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ๋ก๊ทธ์ธ ๊ตฌ์ฑ ์์๋ฅผ ๋ง๋ค ๋ ๋ค์์ ์ํํด์ผํฉ๋๋ค.
import { FormComponentProps } from 'antd/lib/form/Form'
class Login extends React.Component<{} & FormComponentProps, {}> {
render() {
// some render code
}
}
๊ทธ๋ฌ๋ ๋ค์์ ๋ ๋์ ์ ์์ต๋๋ค.
import { FormComponentProps } from 'antd'
class Login extends React.Component<{} & FormComponentProps, {}> {
render() {
// some render code
}
}
์ ์ด๋:
import { FormComponentProps } from 'antd/lib/form'
class Login extends React.Component<{} & FormComponentProps, {}> {
render() {
// some render code
}
}
์ด TS ๊ธฐ๋ฐ UI ํจํค์ง๊ฐํ๋ ๊ฒ์ฒ๋ผ : ์ฒญ์ฌ์ง
๋ค์์ผ๋ก ์ถฉ๋ถํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
import { FormComponentProps } from 'antd/lib/form'
class Login extends React.Component<{} & FormComponentProps, {}> {
render() {
// some render code
}
}
์ฒซ ๋ฒ์งธ๊ฐ ๋ ๋ซ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์ ํํ๋ ๊ฒ์ ๋ ธ์ถ ๋ ์ฒซ ๋ฒ์งธ ๊ฒ๋ ์ธํฐํ์ด์ค ํ ์ ์๊ธฐ ๋๋ฌธ์ผ ์ ์์ง๋ง ์ด๋ฌํ ์ธํฐํ์ด์ค๋ TypeScript๋ฅผ ์ฌ์ฉํ ๋ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. TS๋ฅผ ์ฌ์ฉํ์ง ์๋ ์ฌ๋๋ค์์ด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
TS๋ก ์์ฑ๋ ๋ง์ ํ๋ ์ ์ํฌ๋ ์ธํฐํ์ด์ค๋ฅผ ๊ฐ์ฅ ๋ฐ๊นฅ์ชฝ์ ๋ ธ์ถํ๊ณ ๋ฌธ์ ๋ฅผ ์ฐพ์ง ์์ต๋๋ค.
๋ฌผ๋ก ๋ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑ ํ ์ ์์ต๋๋ค. ์ด ๋ฌธ์ ์ ๋ชฉ์ ์ ์ธํฐํ์ด์ค์ ๋
ธ์ถ ๋ ์์น๋ฅผ ํตํฉํ๋ ๊ฒ ์
๋๋ค. ํ์ฌ ์ํฉ์ lib/[component name]/
ํด๋์์ ์ธํฐํ์ด์ค์ ์์น๋ฅผ โโ์์ธกํ ์ ์๋ค๋ ๊ฒ์
๋๋ค.
๊ทธ๋ฌ๋ ๋๋ ์ฌ์ ํ ์ฒซ ๋ฒ์งธ๊ฐ ์ฑํ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
์๋ ํ์ธ์, ์ ๋๋ฅผ ์ํด ์๋ํ์ง ์๋์ง ์์ ๋ด๋ ค๊ณ ๋ ธ๋ ฅํ๊ณ ์์ง๋ง์ด ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
๋ด ํด๊ฒฐ ๋ฐฉ๋ฒ์ 'antd / lib / form / Form'์์ {FormComponentProps}๋ฅผ ๊ฐ์ ธ ์ค๋ ๊ฒ์ ๋๋ค.
๋ด๊ฐ ๋ญ ์๋ชปํ๊ณ ์๋?
์๋ ํ์ธ์.
import { FormComponentProps } from 'antd/lib/form
) ์๋ํ์ง๋ง ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค๋ ์๋ฏธ์
๋๊น?
๋ฌผ๋ก ์ค๋ฅ์
๋๋ค. FormComponentProps
๊ฐ lib/form
dir์ ์ง๊ธ ๋
ธ์ถ๋์ง ์์๊ธฐ ๋๋ฌธ์์ด ๋ฌธ์ ๋ฅผ ์ ์ถํฉ๋๋ค. :)
@newraina ahhhh ์ด์
ํธ์ ๋ด์ ๊ฐ๊ธฐ
์ด๊ฒ์ ์ํด ์ฐ๋ฆฌ๋ฅผ ๋์ธ ์ ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฒซ ๋ฒ์งธ๊ฐ ๋ ๋ซ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์ ํํ๋ ๊ฒ์ ๋ ธ์ถ ๋ ์ฒซ ๋ฒ์งธ ๊ฒ๋ ์ธํฐํ์ด์ค ํ ์ ์๊ธฐ ๋๋ฌธ์ผ ์ ์์ง๋ง ์ด๋ฌํ ์ธํฐํ์ด์ค๋ TypeScript๋ฅผ ์ฌ์ฉํ ๋ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. TS๋ฅผ ์ฌ์ฉํ์ง ์๋ ์ฌ๋๋ค์์ด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
TS๋ก ์์ฑ๋ ๋ง์ ํ๋ ์ ์ํฌ๋ ์ธํฐํ์ด์ค๋ฅผ ๊ฐ์ฅ ๋ฐ๊นฅ์ชฝ์ ๋ ธ์ถํ๊ณ ๋ฌธ์ ๋ฅผ ์ฐพ์ง ์์ต๋๋ค.
๋ฌผ๋ก ๋ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑ ํ ์ ์์ต๋๋ค. ์ด ๋ฌธ์ ์ ๋ชฉ์ ์ ์ธํฐํ์ด์ค์ ๋ ธ์ถ ๋ ์์น๋ฅผ ํตํฉํ๋ ๊ฒ ์ ๋๋ค. ํ์ฌ ์ํฉ์
lib/[component name]/
ํด๋์์ ์ธํฐํ์ด์ค์ ์์น๋ฅผ โโ์์ธกํ ์ ์๋ค๋ ๊ฒ์ ๋๋ค.๊ทธ๋ฌ๋ ๋๋ ์ฌ์ ํ ์ฒซ ๋ฒ์งธ๊ฐ ์ฑํ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๊ฐ์ฌํฉ๋๋ค.