Ant Design 3.0์ด ์ถ์ ๋ 2017 ๋ 12 ์ ์ดํ 16 ๊ฐ์์ด ์ง๋ฌ์ต๋๋ค. 4289 ๊ฐ์ ์ปค๋ฐ, 138 ๊ฐ์ ๋ฆด๋ฆฌ์ค, 7675 ๊ฐ์ ๋ฌธ์ ๋ฐ PR ๋ด์์ ๋ง์ ๋ฒ๊ทธ๋ฅผ ์์ ํ๊ณ ๋ง์ ์๋ก์ด ๊ธฐ๋ฅ ( changelog )์ ์ถ๊ฐํ์ฌ GitHub์์ 25375 ๊ฐ์ ๋ณ์ ์ป์์ต๋๋ค. ๋ํ Ant Design Pro 4.0 ๋ ์ถ์ํ์ต๋๋ค. TypeScript, ๋ธ๋ก ๋ฐ ๋ ์ด์์ ์ถ์ํ ์ง์. ๋ชจ๋ ๊ธฐ์ฌ์์๊ฒ ๊ฐ์ฌ ๋๋ฆฌ๋ฉฐ ์ฌ๋ฌ๋ถ์ ๊ธฐ์ฌ๋ก Ant Design์ด ๋ ์ข๊ณ ๋์์ก์ต๋๋ค.
๋์์ Ant Design Pro 4.0์ ์ถ์ํ์ต๋๋ค. TypeScript, Block ๋ฐ Layout ๊ตฌ์ฑ ์์๋ฅผ ์ง์ํฉ๋๋ค.
์ด ์๊ฐ, ์ฐ๋ฆฌ๋ ์๊ฐํ๊ณ ์์ต๋๋ค. ์ข์ต๋๋ค. ๊ทธ๋ผ ๋ค์์ ๋ฌด์์ ๋๊น? Ant Design์ ๋ ๋ฐ์ ์ํค๊ธฐ ์ํด ๋ฌด์์ ํ ์ ์์ต๋๊น? Ant Design 4.0์ ๊ณํ ํ ๋์ ๋๋ค! ๐ป
๋ค์์ 4.0์ ๋ํ ์ธ๋ถ ๊ณํ์ ๋๋ค. ์์ง ๊ณํ ์ค์ด๋ฏ๋ก ์ผ๋ถ๋ฅผ ์กฐ์ ํ ์ ์์ต๋๋ค.
4.0์์ ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ์ํ์ ์ ๊ฑฐ ํ ๊ฒ์ ๋๋ค. ์ฆ, ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ์ํ์ด ๋ ์ด์ ์ง์๋์ง ์์ต๋๋ค. ์ต์ 3.x์์ ๊ฒฝ๊ณ ๊ฐ ํ์๋์ง ์์ผ๋ฉด ์ํํ๊ฒ ์ ๊ทธ๋ ์ด๋ ํ ์ ์์ต๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด 4.0์ด ๋ฆด๋ฆฌ์ค ๋ ํ 3.0์ ๋ํ ๋ฐ๋ ์ ์ง ๊ด๋ฆฌ ๋จ๊ณ๊ฐ ์์ต๋๋ค.
์ ๊ทธ๋ ์ด๋ํ๋ ๊ฒ์ด ๋ฒ๊ฑฐ ๋กญ๋ค๋ ๊ฒ์ ์๊ณ ์์ต๋๋ค. ์ด๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ํธํ ๊ฐ๋ฅํ ํจํค์ง๋ฅผ ์ ๊ณต ํ ๊ณํ์ ๋๋ค.
import Compatible from '@ant-design/compatible';
// It works, but will warning in console
const Demo = () => (
<Compatible>
<YourApp />
</Compatible>
);
์ด ํจํค์ง๋ 3.x ์ ์ง ๊ด๋ฆฌ ๋จ๊ณ๊ฐ ๋๋ ๋๊น์ง ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ฐ๋ฆฌ๋ ์ค๋ซ๋์ React 15 ์ง์์ ์ ๊ณตํด ์์ต๋๋ค. ๊ทธ๋ฌ๋ React๋ ๊ฐ๋ ฅํ ํธํ์ฑ์ ๊ฐ์ง๊ณ ์๊ธฐ ๋๋ฌธ์ ์์ ํผ๋๋ฐฑ (React 15์ ๋ํ ๋ฌธ์ ์ ๊ฑฐ์ 0 %๊ฐ ์์)์์๋ ํ์ํ์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค. React 15๋ฅผ ์ง์ํ๊ธฐ ์ํด ์ฐ๋ฆฌ๋ ์๋ก์ด API๋ฅผ ๋งค์ฐ ์ ์คํ๊ฒ ์ฌ์ฉํฉ๋๋ค. 4.0 ์ดํ์๋ ๋ ์ด์ ๋ฌธ์ ๊ฐ๋์ง ์์ต๋๋ค.
Ant Design 3.0์ ์ด์ IE ๋ฅผ
[email protected]
๋ค์ svg ์์ด์ฝ ( ์ svg? )์ ์ฌ์ฉํฉ๋๋ค. ์์ฒญ์๋ก๋ ํ ์์๋ ์์ด์ฝ์ ๋งคํํ๊ธฐ ์ํด ๋ฌธ์์ด ์ด๋ฆ์ ์ฌ์ฉํฉ๋๋ค. ๋ชจ๋ ์์ด์ฝ ํ์ผ์ antd๋ก ๊ฐ์ ธ์ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ๋ง๋ญ๋๋ค . 4.0์์์ด๋ฅผ ์ฒ๋ฆฌ ํ ๊ฒ์
๋๋ค.
์ด์ ์์ด์ฝ ์ฌ์ฉ ๋ฐฉ๋ฒ์ * ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ต๋๋ค * :
import { Icon, Button } from 'antd';
const Demo = () => (
<div>
<Icon type="smile" />
<Button icon="smile" />
</div>
);
4.0์์ ๋์ ๋จ์ผ ์์ด์ฝ ๊ฐ์ ธ ์ค๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
// Directly import
import SmileOutline from 'antd/icons/SmileOutline';
// If tree-shaking supported
import { SmileOutline } from 'antd/icons';
const Demo = () => (
<div>
<SmileOutline />
<Button icon={<SmileOutline />} />
</div>
);
์ด์ ๋ฐฉ์์ผ๋ก ํธํ๋๋ ๋ฐฉ์์ผ๋ก ๊ณ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํ์ ์์น๋ฅผ ํ์ธํ๊ธฐ ์ํด Mention ๊ตฌ์ฑ ์์์์ Draft.js๋ฅผ ์ฌ์ฉํ์ง๋ง ๊ทธ ์ค ์ผ๋ถ ๊ธฐ๋ฅ ๋ง ์ฌ์ฉ๋ฉ๋๋ค. ๋น์ฉ ์ด์์ธ ๊ฒ ๊ฐ์ต๋๋ค. 4.0์์ Draft.js๋ฅผ ์ ๊ฑฐํ๊ณ ๋์ ๋ค๋ฅธ ๊ฐ๋ฒผ์ด ์๋ฃจ์ ์ ์ฌ์ฉํ ๊ณํ์ ๋๋ค. ๋์์ 3.0์ Origin Mention ๊ตฌ์ฑ ์์์ ๊ตฌ๋ณํ๊ธฐ ์ํด API ์ถฉ๋์ ํผํ๊ธฐ ์ํด ์๋ก์ด ๊ตฌ์ฑ ์์ Mentions๊ฐ ๋์ ๋ฉ๋๋ค. ๋ํ ํธํ๋๋ ๋ฐฉ๋ฒ์ ์ง์ํฉ๋๋ค.
// Follow Code will not work
import { Mention } from 'antd';
const Demo = () => (
<Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';
const Demo = () => (
<Mentions />
);
์ปค๋ฎค๋ํฐ์์ ํฐ ๋ฐ์ดํฐ ์ธํธ์ ๋ํ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๊ฑฐ์ ์์ต๋๋ค. ์ฌ๊ธฐ์ ๋ช ๊ฐ์ง ์ต์ ํ๊ฐ ์ด๋ฃจ์ด ์ง๋๋ก ํ ๊ฒ์ ๋๋ค.
๊ฐ์ ์คํฌ๋กค์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํํ๋ ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ ๋๋ค. ์ด๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ตฌ์ฑ ์์์์ ์ง์ํ ๊ณํ์ ๋๋ค. 4.0 ๋ฆด๋ฆฌ์ค์์๋ ์ฆ์ ์๋ฃ๋์ง ์์ ์ ์์ต๋๋ค. ๋จ๊ณ์ ์ผ๋ก ํตํฉ๋ฉ๋๋ค.
์ฐ๋ฆฌ๋ ๊ณผ๊ฑฐ์ ์ ๋๋ฉ์ด์ ์ผ๋ก ํดํน์ํ์ต๋๋ค. ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ์ ์๋ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ํดํน ๋์ ํจ์ฌ ์์ํ React ๋ฐฉ์์ ์ฌ์ฉํ ๊ณํ์ ๋๋ค. ์ด ์ ๋ฐ์ดํธ๋ ์กฐ์ฉํ ์งํ๋๋ฉฐ ์๋ฌด๋ฐ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค.
3.0์์ ๋ง์ ๊ตฌ์ฑ ์์๋ฅผ ์ถ๊ฐํ์ผ๋ฉฐ 4.0์์๋ ๊ณ์ํ ๊ฒ์ ๋๋ค. ์ด๋ฌํ ๊ตฌ์ฑ ์์๋ ๋น์ฆ๋์ค ์๋๋ฆฌ์ค, Ant Design Pro ๋ฐ ์ฌํ์ ์๊ตฌ ์ฌํญ์์ ๋น๋กฏ๋ฉ๋๋ค. ์๋ก์ด ์ปดํฌ๋ํธ ํ๋ก์ธ์ค๋ Ant Design 3.0๊ณผ ๋์ผํ๋ฉฐ ๊ด๋ จ ๋์์ธ ํ์ผ์ PR์ ๋ฃ๊ณ ๊ณต์ ์น ์ฌ์ดํธ์์ ์์งํฉ๋๋ค. ๊ฐ ๋ถ ๋ฒ์ ์์ ๋ฆด๋ฆฌ์คํ์ญ์์ค.
๋ํ ์ฌ์ฉํ๊ธฐ ์ฝ๊ฒํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ฃผ์ ๊ตฌ์ฑ ์์๋ฅผ ๋ฆฌํฉํ ๋ง ํ ๊ณํ์ ๋๋ค. ๋ค์์ ํฌํจํ์ง๋ง ๋ค์์ ํฌํจํฉ๋๋ค.
์์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๊ตฌ์ฑ ์์ ์ค ํ๋์
๋๋ค. ์ฐ๋ฆฌ๋ ์์
์ด API ๋์์ธ์ ๋ํด ๋ง์ ์๊ฒฌ์ ๊ฐ์ง๊ณ ์์์ ์์์ต๋๋ค.
4.0์์ API๋ฅผ ๋จ์ํํ๊ณ ์ถ์ต๋๋ค.
Form.create()
์ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค.getFieldDecorator
์ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค.const Demo = () => {
const [form] = Form.useForm();
const onFinish = () => {
// Do something...
};
useEffect(() => {
// Something like ajax call
form.setFieldsValue({
username: 'light',
});
}, []);
return (
<Form form={form} onFinish={onFinish}>
<Form.Item name="username" rules={[{ required: true }]}>
<Input />
</Form.Item>
</Form>
);
}
์ค์ ์ธ๊ณ์์ ์ฐ๋ฆฌ๋ ์์ ๊ฐ์ ๋ง์ ํต์ ์ ๋ง๋ฉ๋๋ค (์ผ๋ฐ์ ์ผ๋ก ์ธ๋ถ ๊ตฌ์ฑ์์). ์ฐ๋ฆฌ๋ ๋ ์ฝ๊ฒ ๋ง๋ค๊ณ ์ถ์ต๋๋ค.
const { useForm, createContext } = Form;
const FormContext = createContext();
const Demo = () => {
return (
<FormContext>
<YourForm1 />
<YourForm2 />
</FormContext>
);
};
์์ ์งํ ์ํฉ์ ํ์ธํ๋ ค๋ฉด ์ฌ๊ธฐ ๋ฅผ
๊ณผ๊ฑฐ์๋ ๋ง์ ํ ์ด๋ธ ํผ๋๋ฐฑ์ ๋ฐ์์ต๋๋ค. ํ์ฅ ๋ฐ ์คํฌ๋กค ์ํ์ด ํจ๊ป ์ ์๋ํ์ง ์๋๋ค๋ ๊ฒ์ ์๊ณ ์์ต๋๋ค. ์ด๋ฒ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ ์ง์คํ๊ฒ ์ต๋๋ค. ๊ฒ๋ค๊ฐ ์ฐ๋ฆฌ๋ ํ ์ด๋ธ ์ต์ ํ์ ๋ํด ๋ง์ ๊ฒ์ ํ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ ์ด์์์ํ๋ ์ฌ์ด ๋ฐฉ๋ฒ :
const Demo = () => {
return (
<Table
header={{
templateAreas: `
name address address
name building no
`,
cells: [
{ key: 'name', title: 'Name' },
{ key: 'address', title: 'Address' },
{ key: 'building', title: 'Building' },
{ key: 'no', title: 'No' },
],
}}
/>
);
};
๋ํ ์์ฝ ํ์ ์ง์ํ๊ธฐ ์ํด ์์ฝ ๋ฐ๋ฅ ๊ธ ์ ์ถ๊ฐ ํ ๊ณํ์ ๋๋ค.
ํ์ฌ DatePicker๋ ๋๋ถ๋ถ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ปค๋ฎค๋ํฐ ํ ๋ก ์์ ์ฐ๋ฆฌ๋ ๋ ๋ง์ด ํํค์น ์ ์์ต๋๋ค. ์ฐ๋ฆฌ๋ ํด์ผ ์ ํ๊ธฐ์ ๋ ์ธ์ ์ ํ๊ธฐ๋ฅผ ์ ๊ณต ํ ๊ฒ์ ๋๋ค ( ํ ๋ก ). ๋ํ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ธฐ ์ํด DatePicker ๋์์ธ ์คํ์ผ์ ์ ๋ฐ์ดํธ ํ ๊ฒ์ ๋๋ค.
์์ ๋ด์ฉ ์ธ์๋ ๊ณ์ ์ ๋ฐ์ดํธ ํ ์์ ์ ๋๋ค. ์ด๋ค์ ๊ฐ๋ฐ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ธฐ ์ํด 4.0์์ ๊ณ์ ์ ๋ฐ์ดํธ๋ฉ๋๋ค.
Ant Design 3.0์ ์ ๊ทผ์ฑ์ ์ ํ์ ์ผ๋ก ์ง์ํ๋ฏ๋ก dom ๊ตฌ์กฐ๋ฅผ ์กฐ์ ํ๊ณ ๋ ๋ง์ aria ๋งํฌ๋ฅผ ์ถ๊ฐํ์ฌ ํ๋ฉด ํ๋ ๊ธฐ ๊ฒฝํ์ ํฅ์์ํฌ ๊ณํ์ ๋๋ค. ๋ํ ํค๋ณด๋ ์ํธ ์์ฉ์ ์ต์ ํ ํ ์ค๋น๋ํฉ๋๋ค.
์ผ๋ถ API ์ด๋ฆ ์ง์ ์คํ์ผ์ ๋ค๋ฅธ ์ด๋ฆ๊ณผ ์ฝ๊ฐ ๋ค๋ฆ
๋๋ค. Typescript ๊ฐ๋ฐ์์๊ฒ๋ ๋ฌธ์ ๊ฐ ์๋์ง๋ง ๋ฌ๋ฆฌ ๊ธฐ์ตํ๊ธฐ๋ ์ด๋ ต์ต๋๋ค.
๋ฐ๋ผ์ ํ์ฌ API ๋ฐ ๊ด๋ จ ๋ช
๋ช
๊ท์น์ ํฌํจํ๋ ๋ช
๋ช
ํ์ค ๋ฌธ์๋ฅผ ์์ฑํฉ๋๋ค. ์๋ก์ด ๊ธฐ๋ฅ์์๋ API ๋ช
๋ช
์ถฉ๋์ ํผํ๊ธฐ ์ํด ๋ช
๋ช
๊ท์น์ ๋ฐ๋ฆ
๋๋ค. ๋ํ PR์์ ์ด์ ๋ํ ์ปค๋ฎค๋ํฐ์ ์๊ฒฌ์ ํ์ํฉ๋๋ค.
<React.StrictMode>
antd ๊ตฌ์ฑ ์์๋ฅผ ๋ํํ๋ ค๊ณ ํ๋ฉด ๊ฒฝ๊ณ ๊ฐ ํ์๋ฉ๋๋ค. ์ด๋ฏธ ์ผ๋ถ ๊ตฌ์ฑ ์์๋ฅผ ์๋ก์ด ๋ผ์ดํ ์ฌ์ดํด ๋ฐฉ๋ฒ์ผ๋ก ๊ต์ฒดํ์ต๋๋ค. ์ด ์์
์ 4.0์์ ๊ณ์๋ฉ๋๋ค.
๊ณผ๊ฑฐ์๋ ๋ช ๊ฐ์ง ๋ฌธ์ ๊ฐ ๋ฐ๋ณต์ ์ผ๋ก ๋ฐ์ํ๋ค๋ ์ฌ์ค์ ๋ฐ๊ฒฌํ์ต๋๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ ์ด๋ป๊ฒ ๋ ์ฌ์ฉ ์ง๋ฌธ์ ๋๋ค. ์ฐ๋ฆฌ๋ ์ด๊ฒ์ ๋ํด ๋ญ๊ฐ๋ฅผ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค (์ค์ ๋ก ์ด๋ฏธ 3.0์์ ์์๋์์ต๋๋ค). ๊ฐ๋ฐ ํ๊ฒฝ์์ ์๊ธฐ์น ์์ ์ํ (์ : Moment ๊ฐ์ฒด ๋ฌดํจํ, ์ ๋์ฌ / ์ ๋์ฌ ์กฐ์ ์ผ๋ก ์ธํด dom ๊ตฌ์กฐ ๋ณ๊ฒฝ ๋ฑ)๋ฅผ ๊ฒฝ๊ณ ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์ฝ์์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๋ ๊ฐ์ฅ ๋จผ์ ์ง์คํด์ผํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ฌธ์ ๋ฅผ ์ฐพ๋ ๋ฐ ๋์์ด ๋ ์์๋ ์ ์ ํ ํ์ ์ ๊ณตํฉ๋๋ค. ๋์์ ๊ฐ ๊ตฌ์ฑ ์์ ๋ฌธ์์ FAQ์ ๋ค๋ฅธ ์ง๋ฌธ์ ์์ฝํฉ๋๋ค. ์ ์ง ๊ด๋ฆฌ ์ธก๋ฉด์์ ๊ฐ ์ฌ์ฉ ์ง๋ฌธ์ ๋ํด ๋์์ ๋๋ฆด ์๋ ์์ง๋ง ํนํ ์๋ก ์จ ๊ฐ๋ฐ์์๊ฒ๋ ์กด์ฌํฉ๋๋ค. FAQ๋ ๋ง์ ๊ฒ์ ์๊ฐ์ ์ ์ฝํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์ด์ ๊ด์ฌ์ด ์์ผ์๋ฉด ์ ํฌ์ ํจ๊ป ๊ฐ๋ฐ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐ ๋์์ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
Ant Design์ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ผ๋ฟ๋ง ์๋๋ผ ๋์์ธ์ด ์ง์์ ํ์ ๋๋ค. ๋์์ธ ๋ฆฌ์์ค (Sketch ์ปดํฌ๋ํธ ํจํค์ง, ์ฃผ๋ฐฉ ๋๊ตฌ, ๋์์ธ ํ ํฐ ๋ฑ)๋ฅผ ์ ๋ฐ์ดํธํ๊ณ ํ์ฌ ์ปดํฌ๋ํธ ์คํ์ผ์ ์กฐ์ ํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ๊ฒ์ ๋๋ค.
์ด์ ํ ๊ณํ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. Github์์ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ๋ง๋ค ๊ฒ์ ๋๋ค. ๋ํ ์ฌํ ๊ณตํ์๋ฅผ ํ์ํฉ๋๋ค.
๊ฐ๋ฐ ๊ณผ์ ์์ ๊ณ์ ๊ฒ์ํ๊ฒ ์ต๋๋ค. ์์ ๋ด์ฉ์ ์ต์ข ๋ด์ฉ์ด ์๋ ์ ์์ต๋๋ค. ์ปค๋ฎค๋ํฐ์ ์๊ฒฌ / ์กฐ์ธ์ ํ์ํฉ๋๋ค! Ant Design 4.0์ ๋ ์ข๊ฒ ๋ง๋ค์ด ๋ด ์๋ค!
Ant Design์ด 2017 ๋ 12 ์ 3.0์ ์ถ์ ํ ์ง 16 ๊ฐ์์ด ์ง๋ฌ์ต๋๋ค. ์ด ๊ธฐ๊ฐ ๋์ ์ฐ๋ฆฌ๋ ๋ง์ ๋ฒ๊ทธ๋ฅผ ์์ ํ๊ณ ๋ง์ ์๋ก์ด ๊ธฐ๋ฅ ( ์ ๋ฐ์ดํธ ๋ก๊ทธ )์ ์ถ๊ฐํ์ต๋๋ค. 4289 ๊ฐ์ ์ปค๋ฐ์ ์ ์ถํ๊ณ 138 ๊ฐ์ ๋ฒ์ ์ ์ถ์ํ์ผ๋ฉฐ 7675 ๊ฐ์ ๋ฌธ์ ์ PR์ ์ข ๋ฃํ๊ณ 25375 ๊ฐ์ ๋ณ์ ์ถ๊ฐํ์ต๋๋ค. ๋ํ Ant Design Pro 4.0 ๋ ์ถ์ํ์ต๋๋ค. TypeScript, ๋ธ๋ก ๋ฐ ๋ ์ด์์ ์ถ์ํ๋ฅผ ์ง์ํฉ๋๋ค. Ant Design์๋ณด๋ค ์ ์ฉํ๊ฒ ๋ง๋ค๊ธฐ ์ํด ํ์ ํด ์ฃผ์ ๋ชจ๋ ์ปค๋ฎค๋ํฐ ์์ ๋ด์ฌ์์๊ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๋์์ ๋ค์ ๋จ๊ณ๋ ๋ฌด์์ด๋ฉฐ Ant Design์ ๋ ๋ฐ์ ์ํฌ ์์๋ ๋ฐฉ๋ฒ๋ ์๊ฐํ๊ณ ์์ผ๋ฉฐ ์ฌํด 4 ๋ถ๊ธฐ์ Ant Design 4.0 ๋ฒ์ ์ ์ถ์ ํ ์์ ์ ๋๋ค. ๐ป
๋ค์์ 4.0์ ๋ํ ์ธ๋ถ ๊ณํ์ ๋๋ค. ๋ฌผ๋ก ์ด๊ฒ์ ์์ง ๊ณํ ์ค์ ๋๋ค. ์ ์ ์ถ์์ ์กฐ์ ๋ ์ ์์ต๋๋ค.
4.0์์ Deprecated๋ก ํ์๋ ์์ฑ์ ์ ๊ฑฐํฉ๋๋ค. ์ด๋ ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ํ๋ก์ ํธ๋ฅผ ์ต์ 3.x๋ก ์ ๊ทธ๋ ์ด๋ํ๊ณ ์ฝ์์ antd์ ๊ฒฝ๊ณ ๋ฉ์์ง๊ฐ ํ์๋์ง ์์ผ๋ฉด 4.0์ผ๋ก์ ์ ๊ทธ๋ ์ด๋๋ ์ํํ๊ฒ ์ด๋ฃจ์ด์ง๋๋ค. 3.x ๋ฒ์ ์ ๊ฒฝ์ฐ 4.0 ๋ฆด๋ฆฌ์ค ์ดํ์๋ ์ถ๊ฐ 6 ๊ฐ์์ ์ ์ง ๊ด๋ฆฌ ์์ ์ ์ํํฉ๋๋ค.
์ ๊ทธ๋ ์ด๋ ๋ฒ์ ์ ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ API๋ฅผ ํฌ๊ธฐํ ์๋์ง๊ฐ ๋ง๋ค๋ ๊ฒ์ ์๊ณ ์์ต๋๋ค. 4.0์ ์ถ์ ํ ๋ ํ๋ก์ ํธ ์ ํ์ ์ง์ํ๊ธฐ ์ํด ํธํ์ฑ ํจํค์ง๋ฅผ ์ ๊ณต ํ ๊ณํ์ ๋๋ค (๊ด๋ จ API๋ ์์ง ์ค๊ณ ์ค์ด๋ฉฐ ๊ณต์ ์ถ์์ ๋ค๋ฅผ ์ ์์). ) :
import Compatible from '@ant-design/compatible';
// It works, but will warning in console
const Demo = () => (
<Compatible>
<YourApp />
</Compatible>
);
3.0 ์ ์ง ๊ด๋ฆฌ ์์ ์ด ์ค๋จ ๋ ๋๊น์ง ํธํ์ฑ ํฉ๋ ์ ๋ฐ์ดํธ ๋ ์ํ๋ก ์ ์ง๋ฉ๋๋ค.
์ฐ๋ฆฌ๋ ์ค๋ซ๋์ React 15 ๋ฒ์ ์ ์ง์ํด ์์ง๋ง ์ปค๋ฎค๋ํฐ ํผ๋๋ฐฑ์์ ์ด๊ฒ์ ์ค์ ๋ก ์ค์ํ์ง ์์ต๋๋ค (React 15์ ์ด์ ๋ฒํธ๊ฐ 0 %์ ๊ฐ๊น์์ง๊ณ ์์ต๋๋ค). React ์์ฒด์๋ ๋งค์ฐ ๊ฐ๋ ฅํ ํธํ์ฑ์ด ์๊ธฐ ๋๋ฌธ์ ๋๋ค. React 15๋ฅผ ์ง์ํ๊ธฐ ์ํด ์ฐ๋ฆฌ๋ ๊ฐ๋ฐ ๊ณผ์ ์์ ์๋ก์ด API๋ฅผ ์ฌ์ฉํ ๋ ๋งค์ฐ ์ ์คํฉ๋๋ค. ๋ฒ์ 4.0 ์ดํ์๋ ์ต์ React ๋ฒ์ ์ ๊ฐ๋ฐ ๋ฒค์น ๋งํฌ๋ก ์ฌ์ฉํ ๊ฒ์ ๋๋ค.
Ant Design 3.0์ ์ด์ ๋ฒ์ ์ IE์ ํธํ๋๋๋ก ๋ง์ ๋ ธ๋ ฅ์ ๊ธฐ์ธ
[email protected]
์์๋ svg ์์ด์ฝ์ ๋์
ํ์ต๋๋ค ( ์ svg ์์ด์ฝ์ ์ฌ์ฉํฉ๋๊น? ). ๋ฌธ์์ด ๋ค์ด๋ฐ์ผ๋ก ์์ด์ฝ์ ์ค์ ํ๋ API๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ,์ด ๋์์ธ์์๋ ํ์์ ๋ฐ๋ผ๋ก๋ ํ ์ ์๊ธฐ ๋๋ฌธ์ SVG ์์ด์ฝ ํ์ผ์ ์ ๋ฉด ๋์
ํ์ฌ ํจํค์ง ์ ํ์ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ๋ ๋ ธ์ต๋๋ค . 4.0์์๋์ด๋ฅผ ์กฐ์ ํ์ฌ ๋ณผ๋ฅจ์ ์ต์ ํํฉ๋๋ค.
์ด์ ๋ฒ์ ์ ์์ด์ฝ ์ฌ์ฉ์ ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ต๋๋ค .
import { Icon, Button } from 'antd';
const Demo = () => (
<div>
<Icon type="smile" />
<Button icon="smile" />
</div>
);
4.0์์๋ ์ฃผ๋ฌธํ ๋์ ๋ฐฉ๋ฒ์ด ์ฑํ๋ฉ๋๋ค.
// Directly import
import SmileOutline from 'antd/icons/SmileOutline';
// If tree-shaking supported
import { SmileOutline } from 'antd/icons';
const Demo = () => (
<div>
<SmileOutline />
<Button icon={<SmileOutline />} />
</div>
);
์์ ํธํ ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ ๊ณ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋๋กญ ๋ค์ด ํ๋กฌํํธ ์์น ์ง์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด Mention ๊ตฌ์ฑ ์์์ Draft.js๋ฅผ ๋์ ํ์ง๋ง ๊ทธ ๊ธฐ๋ฅ์ ์ผ๋ถ๋ง ์ฌ์ฉํ์ต๋๋ค. ๊ฐ์ฑ ๋น๋ฅผ ๊ฐ์ํ๋ฉด ์กฐ๊ธ ๋ญ๋น ์ธ ๊ฒ ๊ฐ๋ค. 4.0์์ ์ข ์์ฑ์ ์ ๊ฑฐํ๊ณ ๋์ ๋ ๊ฐ๋ฒผ์ด ์๋ฃจ์ ์ ์ฌ์ฉํ ๊ณํ์ ๋๋ค. ๋์์ 3.0์์ Mention ๊ตฌ์ฑ ์์๋ฅผ ๊ตฌ๋ณํ๊ธฐ ์ํด API ์ถฉ๋์ ๋ฐฉ์งํ๊ธฐ ์ํด ์๋ก์ด ๊ตฌ์ฑ ์์ Mentions๋ฅผ ์ ๊ณต ํ ๊ฒ์ ๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก ์์ ํธํ ๊ฐ๋ฅํ ๋ฉ์๋์ ์ง์์ ์ธ ์ฌ์ฉ๋ ์ง์ํฉ๋๋ค.
// Follow Code will not work
import { Mention } from 'antd';
const Demo = () => (
<Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';
const Demo = () => (
<Mentions />
);
์ ์ง ๋ณด์ ๊ณผ์ ์์ ๋น ๋ฐ์ดํฐ์ ๋ํ ์ฑ๋ฅ ๋ ผ์ ๋ฅผ ๋ง์ด ๋ฐ์์ต๋๋ค. ์ด๋ฅผ ์ํด ์ฑ๋ฅ ์ต์ ํ๋ ๊ณํํ๊ณ ์์ต๋๋ค.
๊ฐ์ ์คํฌ๋กค์ ์ผ๋ฐ์ ์ธ ์ต์ ํ ๋ฐฉ๋ฒ์ด์ง๋ง Ant Design์ ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ก ์ธํด ๊ฐ์ ์คํฌ๋กค์ ์ฌ์ฉ์ ์ ์ํ๋ ๊ฒ์ด ์ฝ์ง ์์ต๋๋ค. ์ด์ ์ฐ๋ฆฌ๋ ์คํฌ๋กค๋ง์ ํตํด ๊ตฌ์ฑ ์์์์ ๊ฐ์ ์คํฌ๋กค๋ง์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ ๊ณํ์ ๋๋ค. ๋ฌผ๋ก 4.0์ด ์ถ์ ๋ ๋ ๋ชจ๋ ๊ตฌ์ฑ ์์๊ฐ ์ ๋ฐ์ดํธ๋์๋ค๊ณ ๋ณด์ฅํ์ง๋ ์์ผ๋ฉฐ ๊ณ์ ์ ๋ฐ์ดํธ ๋ ๊ฒ์ ๋๋ค.
๊ณผ๊ฑฐ์๋ ์ ๋๋ฉ์ด์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ํดํน์ ์ฌ์ฉํ์ต๋๋ค. ๋๋ถ๋ถ์ ์๋๋ฆฌ์ค์์ ๋งค์ฐ ์ ์๋ํฉ๋๋ค. 4.0์์๋์ด๋ฅผ ์กฐ์ ํ๊ณ ๋ ๋ง์ React ๋๋ก์ ๋ํ ํดํน ์ ๊ทผ ๋ฐฉ์์ ํฌ๊ธฐํ ๊ณํ์ ๋๋ค. ์กฐ์ ์ ์๋์ผ๋ก ์ ๋ฐ์ดํธ๋๋ฏ๋ก ๋ณ๊ฒฝํ ํ์๊ฐ ์์ต๋๋ค.
3.0์์๋ ๊ณ์ํด์ ๋ง์ ๊ตฌ์ฑ ์์๋ฅผ ์ถ๊ฐํ์ต๋๋ค. 4.0์์๋ ๊ณ์ํ ๊ฒ์ ๋๋ค. ์ด๋ฌํ ๊ตฌ์ฑ ์์๋ ๋น์ฌ์ ๋น์ฆ๋์ค ์๋๋ฆฌ์ค, Ant Design Pro ๋ฐ ์ปค๋ฎค๋ํฐ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๊ฐ์ ๋ ๊ฒ์ด๋ฉฐ ์ด๋ ์ง์์ ์ธ ํ๋ก์ธ์ค์ ๋๋ค. ์ ๊ท ์ปดํฌ๋ํธ ์ถ๊ฐ ๊ณผ์ ์ Ant Design 3.0๊ณผ ๋์ผํฉ๋๋ค. ๊ด๋ จ ์ปดํฌ๋ํธ์ ๋์์ธ ์ด์์ ์ด๋ฐํ์ฌ PR์ ๊ฒ์ํ๊ณ ๊ณต์ ์น ์ฌ์ดํธ์ ์ ๋ฐ์ดํธ ํ ์์ ์ ๋๋ค. ๊ฐ๋ฐ ์๋ฃ ํ ์๊ฐ ๋ง์ด๋๋ก ๊ณต๊ฐ ํ ์์ ์ ๋๋ค. ๋ฒ์ .
๋ํ ๊ฐ๋ฐ ๋ฐ ์ํธ ์์ฉ์ ์ฉ์ด์ฑ์ ๊ฐ์ ํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ฃผ์ ๊ตฌ์ฑ ์์๋ฅผ ๋ฆฌํฉํ ๋ง ํ ์ค๋น๋ํ๊ณ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋์ง๋ง ์ด์ ๊ตญํ๋์ง๋ ์์ต๋๋ค.
์์ ๊ตฌ์ฑ ์์์ ์ฒญ์ค์ด ๋งค์ฐ ๋ง์ต๋๋ค. ๋ํ ์ฑ๊ฐ์ ์์ API์ ๋ํ ์ปค๋ฎค๋ํฐ์ ๋ถ๋ง๋ ํ์ธํ์ต๋๋ค. 4.0์์๋ ๊ฐ๋ฐ ๋น์ฉ์ ๋จ์ํํ๊ธฐ ์ํด ๋ ๋์ API ์์์ ํ์ํ๊ณ ์ํฉ๋๋ค.
Form.create()
๋ฅผ ํตํด ์ปจํ
์คํธ๋ฅผ ๋ง๋ค ํ์๊ฐ ์์ต๋๋ค.getFieldDecorator
๋ฅผ ํตํด ํ๋๋ฅผ ๋ฐ์ธ๋ฉ ํ ํ์๊ฐ ์์ต๋๋ค.const Demo = () => {
const [form] = Form.useForm();
const onFinish = () => {
// Do something...
};
useEffect(() => {
// Something like ajax call
form.setFieldsValue({
username: 'light',
});
}, []);
return (
<Form form={form} onFinish={onFinish}>
<Form.Item name="username" rules={[{ required: true }]}>
<Input />
</Form.Item>
</Form>
);
}
์ค์ ์ฅ๋ฉด์์ ์ฐ๋ฆฌ๋ ๋ค์ค ํํ ์ฐ๊ฒฐ ์ฅ๋ฉด (์์ธ ๊ตฌ์ฑ์์ ์ผ๋ฐ์ )์ ๋ง๋ฌ์ต๋๋ค. ์ด๊ฒ์ด ์ฌ์ฉํ๊ธฐ ํธ๋ฆฌํ์ง ์๋ค๋ ๊ฒ์ ์๊ณ ์์ผ๋ฏ๋ก ์์ ๊ฐ์ ์ฐ๊ฒฐ ๊ธฐ๋ฅ๋ ์ ๊ณต ํ ๊ฒ์ ๋๋ค.
const { useForm, createContext } = Form;
const FormContext = createContext();
const Demo = () => {
return (
<FormContext>
<YourForm1 />
<YourForm2 />
</FormContext>
);
};
๋น์ ์ด ์์์ ์งํ์ ๋ฐ๋ผํ๋ ค๋ฉด ํ์ธ์ ์ค์ ๊ฒ์ ํ์ ์งํ ์ํฉ์ .
์ด์ ๋ฒ์ ์์๋ ํ ์ด๋ธ ๊ตฌ์ฑ ์์์ ๋ํ ๋ง์ ํผ๋๋ฐฑ์ ๋ฐ์์ต๋๋ค. ๊ณผ๊ฑฐ์๋ Table์ ํ์ฅ ๋ฐ ์คํฌ๋กค ์์ฑ์ด ์ ์๋ํ์ง ์์ ์์ ์๊ณ ์์ต๋๋ค. ์ด๋ฒ์๋์ด ์์ญ์์ ๊ฐ๋ฑ์ ํด๊ฒฐํ๋ ๋ฐ ์ด์ ์ ๋ง์ถ ๊ฒ์ ๋๋ค. ๋ํ ํ ์ด๋ธ ๊ตฌ์ฑ ์์์ ์ฑ๋ฅ์ ๋์ฑ ์ต์ ํ ํ ๊ฒ์ ๋๋ค. ๋ ๊ฐ๋จํ ํ ์ด๋ธ ๋ ์ด์์ ๋ฐฉ๋ฒ์ ์ดํด๋ณด์ธ์.
const Demo = () => {
return (
<Table
header={{
templateAreas: `
name address address
name building no
`,
cells: [
{ key: 'name', title: 'Name' },
{ key: 'address', title: 'Address' },
{ key: 'building', title: 'Building' },
{ key: 'no', title: 'No' },
],
}}
/>
);
};
๋ํ ์์ฝ ์๊ตฌ ์ฌํญ์ ์ง์ํ๊ธฐ ์ํด ์์ฝ ๋ฐ๋ฅ ๊ธ ์ ์ถ๊ฐ ํ ๊ณํ์ ๋๋ค.
๊ธฐ์กด DatePicker๋ ๋๋ถ๋ถ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ์ง๋ง ์ปค๋ฎค๋ํฐ ํ ๋ก ์์ . ์ฐ๋ฆฌ๋ ์ฌ์ ํ ๋ ๊น์ด ํ๊ณ ๋ค ์์๋ ๊ธฐํ๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ๋จ์ ์ฐ๋ ์ ํ์์ ํด๋น ๋ฒ์ ์ ํ์๋ฅผ ์๋ฃ ํ ๊ฒ์ ๋๋ค ( ํ ๋ก ). ๋ํ ์ฌ์ฉ์์์ธ์ง ๋น์ฉ์ ๋์ฑ ์ค์ด๊ธฐ ์ํด ๊ด๋ จ ๋ ์ง ๋ฐ ์๊ฐ ์ ํ๊ธฐ์ ์คํ์ผ์ ์กฐ์ ํ ๊ฒ์ ๋๋ค.
์์ ์ฝํ ์ธ ์ธ์๋ ์ผ๋ถ ์ฝํ ์ธ ๋ ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ ํ ์์ ์ ๋๋ค. ์ด๋ 4.0์์ ์ฌ์ฉ์ ๊ฐ๋ฐ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ํ์ ์กฐ์น๋ฅผ ์ทจํ ๊ฒ์ ๋๋ค.
Ant Design 3.0์ ์ ๊ทผ์ฑ ๊ฒฝํ์ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ํ๋ฉด ์ฝ๊ธฐ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์กฐ์ ํ๊ณ ๋ ๋ง์ aria ํ๊ทธ๋ฅผ ์ถ๊ฐ ํ ๊ณํ์ ๋๋ค. ๋ํ ๋ ๋์ ์ ์ฒด ํค๋ณด๋ ์ํธ ์์ฉ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ธฐ์กด ๊ตฌ์ฑ ์์ ํค๋ณด๋ ์ํธ ์์ฉ ๋ฐฉ๋ฒ์ ์ต์ ํ ํ ์ค๋น๋ํ๊ณ ์์ต๋๋ค.
์งํ ๊ณผ์ ์์ ๋ช ๊ฐ์ง API ์คํ์ผ์ด ๋ค๋ฅธ ๊ตฌ์ฑ ์์์ ํธํ๋์ง ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ ๋๋ค. TypeScript ์ฌ์ฉ์์๊ฒ๋ ๋ฌธ์ ๊ฐ๋์ง ์์ง๋ง ๋ค๋ฅธ ์ฌ์ฉ์์๊ฒ๋ ๋ฉ๋ชจ๋ฆฌ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
๊ทธ๋์ ์ฐ๋ฆฌ๋ ํ์ค ๋ช ๋ช ๋ฌธ์๋ฅผ ๋ง๋ค ๊ฒ์ ๋๋ค. ์ด ๋ฌธ์์๋ ๊ธฐ์กด API ๋ชฉ๋ก๊ณผ ์ ์ ํ ๋ช ๋ช ๊ท์น์ด ํฌํจ๋ฉ๋๋ค. ์๋ก์ด ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๋ฉด์ด ์ฌ์์ ๋ฐ๋ผ ์ด๋ฆ์ด ์ง์ ๋ฉ๋๋ค. ํฅํ API ์ฐจ์ด๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด. ๋ฌผ๋ก PR์ ๋ํ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋ ์ปค๋ฎค๋ํฐ ํ์๋ค๋ ํ์ํฉ๋๋ค.
antd ๊ตฌ์ฑ ์์ ์ธ๋ถ์์ <React.StrictMode>
๋ฅผ ๋ํํ๋ ค๊ณ ํ๋ฉด antd ๊ตฌ์ฑ ์์์์ ๋ง์ ๊ฒฝ๊ณ ๋ฉ์์ง๊ฐ ํ์๋ฉ๋๋ค. 3.0์์ ์ผ๋ถ ๊ตฌ์ฑ ์์์ ์๋ช
์ฃผ๊ธฐ ๋ฐฉ๋ฒ์ ์
๋ฐ์ดํธํ์ต๋๋ค. 4.0์์๋ ๊ณ์ํ ๊ฒ์
๋๋ค.
๊ณผ๊ฑฐ ์ ์ง ๊ด๋ฆฌ ํ๋ก์ธ์ค์์ ํน์ ๋ฌธ์ ๊ฐ ์๋ค๋ก ๋ํ๋๋ ๊ฒ์ ๋ฐ๊ฒฌํ์ต๋๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ ์ผ๋ถ ์ฌ์ฉ ์ฌ์ ๋๋ ์์ฉ ํ๋ก๊ทธ๋จ ์๋๋ฆฌ์ค์์ ์ผ๋ฐ์ ์ ๋๋ค. ์ด๋ฅผ ์ํด ์ฐ๋ฆฌ๋ ์ฌ๊ธฐ์ ๊ฐ์ ํ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค (์ฌ์ค 3.0 ์ดํ๋ก ๊ฐ์ ๋๊ณ ์์ต๋๋ค). ๊ฐ๋ฐ ํ๊ฒฝ์์๋ ์๊ธฐ์น ์์ ์ํฉ (์ : ์ ํจํ์ง ์์ Moment ๊ฐ์ฒด, ์ ๋ ฅ ์ ๋์ฌ / ์ ๋ฏธ์ฌ์ ๋์ ์กฐ์ ์ผ๋ก ์ธํ Dom ๊ตฌ์กฐ ๋ณ๊ฒฝ ๋ฑ)์ ๋ํด ์ฝ์์์ ๋ฉ์์ง๋ฅผ ํ์ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์ฝ์์ด ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ ๋ ๊ฐ๋ฐ์๊ฐ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๋ ์ฒซ ๋ฒ์งธ ์ฅ์๋ผ๊ณ ํ์ ํ๋ฉฐ ์ฌ๊ธฐ์ ์ ์ ํ ํํธ๋ฅผ ์ ๊ณตํ๋ฉด ๋ฌธ์ ๋ฅผ ์ ์ํ๊ฒ ์ฐพ์ ์ ์์ต๋๋ค. ๋์์ ์ผ๋ถ ํน์ํ ์ฌ์ฉ ๋๋ ์๋๋ฆฌ์ค๋ฅผ ์ํด. ํด๋น ๊ตฌ์ฑ ์์ ๋ฌธ์์์ FAQ๋ฅผ ์ ๊ณตํฉ๋๋ค. ํ๋ก์ ํธ ์ ์ง ๋ณด์์ ๊ด์ ์์ ์ฐ๋ฆฌ์ ์๋์ง๋ ์ฌ์ฉ ๋ฐฉ๋ฒ ๋ฌธ์ ์ ๋ํ ์์ธํ ๋ต๋ณ์ ์ ๊ณต ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด๋ฌํ ์ง๋ฌธ์ ์ฌ์ค์ด๋ฉฐ, ํนํ ์ ๊ท ๊ฐ๋ฐ์์๊ฒ๋ FAQ๊ฐ ๋ง์ ๊ฒ์ ์๊ฐ์ ์ ์ฝํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ๊ด์ฌ์ด ์์ผ์๋ฉด ์ปค๋ฎค๋ํฐ ์์ ๋ด์ฌ์๋ค๋ ๊ฐ๋ฐ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ ๋ฐ ๋์์ ์ค ์ ์์ต๋๋ค.
Ant Design์ ๊ตฌ์ฑ ์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์งํฉ ์ผ๋ฟ๋ง ์๋๋ผ ๊ทธ ๋ค์์๋ ๊ฐ๋ ฅํ ๋์์ธ ์์คํ ์ด๊ธฐ๋ํฉ๋๋ค. 4.0์์๋ ์ต์ ๋์์ธ ๊ด๋ จ ์์ฐ (์ค์ผ์น ๊ตฌ์ฑ ์์ ํจํค์ง, ์ฃผ๋ฐฉ ๋๊ตฌ ์ธํธ, ๋์์ธ ํ ํฐ ๋ฑ)์ ์ ๋ฐ์ดํธํ์ฌ ๋์์ธ์ ๊ด์ฌ์ด์๋ ๋์์ด๋์ ํ์์ ์ฐธ๊ณ ํ ์ ์๋๋กํฉ๋๋ค. ๊ธฐ์กด ๊ตฌ์ฑ ์์ ๋์์ธ ์คํ์ผ๋ ์๊ฐ์ ํจ๊ณผ์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ๋ฏธ์ธ ์กฐ์ ๋ฉ๋๋ค.
๋ค์์ ์ผ๋ถ ๊ตฌ์ฑ ์์ ์ ๋ฐ์ดํธ๊ฐ ์งํ๋๋ ์ผ์ ์ ๋๋ค. ์ฐ๋ฆฌ๋ github์ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ๋ง๋ค ๊ฒ์ด๋ฉฐ ์ปค๋ฎค๋ํฐ ์์ ๋ด์ฌ์๋ค๋ ์ฐธ์ฌํ ์ ์์ต๋๋ค.
4.0 ๊ฐ๋ฐ ๊ณผ์ ์์ ์์ ๋ด์ฉ์ด ์กฐ์ ๋ ์ ์์ต๋๋ค. ๊ท์คํ ์์ด๋์ด์ ์ ์์ ์ ๊ณตํ๋ ์ปค๋ฎค๋ํฐ ํ์๋ค์ ํ์ํฉ๋๋ค. Ant Design 4.0์ ํจ๊ป ๋ ํธ๋ฆฌํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค!
๋ฒ์ 4์์ Moment.js๋ฅผ ๋์ฒด ํ ์์ ์ ๋๊น?
ํ๋ฅญํฉ๋๋ค. ์ ๊ทธ๋ ์ด๋๋ฅผ ๊ธฐ๋ค๋ฆด ์ ์์ต๋๋ค.
type
# 12011 ์์ด์ฝrc-animate
์
๊ทธ๋ ์ด๋expand
๋ฐ scroll
๊ณต๋ ์์
์ง์๋ค์์ Ant 4์ ๋ํ ๋ช ๊ฐ์ง ์ ์์ ๋๋ค.
templateAreas
templateArea
๋ ๋ฐํ์์ ๋ฌธ์์ด์ ๊ตฌ๋ฌธ ๋ถ์ํฉ๋๋ค. ๋ฌธ์์ด ์คํ๊ฐ ๋ฐ์ํ๋ฉด ์์ธ์๋ ๊ตฌ๋ฌธ ๋ถ์ ์ค๋ฅ ๋๋ ๋น์ ์์ ์ธ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค. ๋ฐํ์ ๊ตฌ๋ฌธ ๋ถ์๋ TypeScript์ ์ ํฉํ์ง ์์ต๋๋ค. Ant ํ์ด ์๋ ์ ์์ ๊ณ ๋ คํ ๊น์?
const columnTemplate = [
['name', 'address', 'adress'],
['name', 'building', 'no']
]
Ant Team์ด moment
์ข
์์ฑ ์ ๊ฑฐ๋ฅผ ๊ณ ๋ คํ ๊น์?
์๊ฐ์ด ๋๋ฌด ์ปค์ ํ๋ก ํธ ์๋ ํ๋ก์ ํธ์ ๋นํด ๋ง์ ๋์์ด ์์ง๋ง TimePicker
๋ฐ DatePicker
์ props๋ Moment์์ ์ค๊ณ๋ฉ๋๋ค. moment
๋ฅผ date-fns
๋๋ Moment๋ณด๋ค ์์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋์ฒด ํ ์ ์์ต๋๋ค.
Ant ์์ด์ฝ์ด ์ง๊ธ ์ฌ์ฉํ๋ ๋ฐฉ์์ ๋ ์ด์ ์ฌ์ฉ๋์ง ์์์ผํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ์์ด์ฝ์ ๊ฐ์ ธ ์ค๋ ์๋ก์ด ๋ฐฉ์์ ํ๋์ ์์ด์ฝ์ ์ถ๊ฐํ๊ฑฐ๋ ์ ๊ฑฐ ํ ๋ ์ผ๋ฐ์ ์ธ ๋ฒ๋ค ์ฒญํฌ ๋ณ๊ฒฝ์ ์ ๋ฐํ ์ ์์ต๋๋ค.
Ant Team์ Ant ์์ด์ฝ์ ์ฌ์ฉํ๋ ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ ๊ณต ํ ์ ์์ต๋๋ค.
<script>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฒด ํ์ผ์ ๊ฐ์ ธ์ฌ ์ ์์ผ๋ฉฐ ์นํฉ์์ externals
๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.่ฟ ๆฏ ๆ ๅฏน Ant4 ็ ไธไบ ๅปบ่ฎฎ
templateAreas
templateAreas
ๅจ่ฟ่กๆถๅฏนๅญ็ฌฆไธฒ่ฟ่ก่งฃๆ,ๅฝๅญ็ฌฆไธฒๅบ็ฐๆผๅ้่ฏฏ็ๆถๅ,ๅฏ่ฝไผๅฏผ่ด่งฃๆๅคฑ่ดฅๆ่
้้ป้่ฏฏ่ฟ่กๆถ่งฃๆๅฏนํ์ดํ ๋ผ์ดํฐไนไธๅๅฅฝ.Antๅข้ๆฏๅฆ่่ๅฆไธๆนๆก. :
const columnTemplate = [
['name', 'address', 'adress'],
['name', 'building', 'no']
]
ๆฏๅฆ ่่ ็งป้ค ๅฏน ์๊ฐ ็ ไพ่ต๏ผ
Moment ์ด์ ์ ์กด์ฌํ๋ ๋ง์ ๊ธฐ๋ฅ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค, TimePicker
์ DatePicker
Moment ๅฏน่ฑก, ่ฟ ๆณ ๅฏน่ฑก, ่ฟ ๆณ ๅฏน่ฑกdate-fns
ๆ่
ไธไบ ๆฏ Moment ๆด ๅฐ ็ ๅบ ๆฅ ๆฟไปฃ Momentใ
ๆ่ฎคไธบๅฝๅไฝฟ็จ๊ฐ๋ฏธๅพๆ ็ๆนๅผไธๅบ่ฏฅ่ขซๅบๅผ.ๆฐ็ไฝฟ็จๆนๅผๅจๆๆฐๅขๆ่ ๅ ้คไธไธชๅพๆ ๅผ็จ็ๆถๅ,ๅฏ่ฝไผๅฏผ่ดๅ ฌๅ ฑ์ฒญํฌๅๅคๅๆด.
Ant ๅข้ ๅฏไปฅ ๆไพ ๅฆไธ ไธค็ง ๆนๆก ๆฅ ไฝฟ็จ Ant ๅพๆ ๏ผ
<script>
ๆ ็ญพ ๅผ็จ ๅ
จ้จ ๅพๆ ๏ผ ๅนถไธ ๅจ Webpack ไธญ ่ฎพ็ฝฎ ไธบexternals
ํ
์ด๋ธ ๊ฐ์ ์คํฌ๋กค์ ์ง์ํ ๊ณํ์ด ์์ต๋๊น? ๊ฒฝ์ฐ์ ๋ฐ๋ผ ํ์ด์ง ๋งค๊น๋ณด๋ค๋ ๋ฌดํ ํ
์ด๋ธ์ด ์ ํธ๋ฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ 3.11์ 'Comment'๊ฐ ํฌํจ๋์ด ์์ผ๋ฏ๋ก ChatBox์ ChatMessage๊ฐ ์์๊น์?
ํ ์ด๋ธ ๊ฐ์ ์คํฌ๋กค์ ์ง์ํ ๊ณํ์ด ์์ต๋๊น? ๊ฒฝ์ฐ์ ๋ฐ๋ผ ํ์ด์ง ๋งค๊น๋ณด๋ค๋ ๋ฌดํ ํ ์ด๋ธ์ด ์ ํธ๋ฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ 3.11์ 'Comment'๊ฐ ํฌํจ๋์ด ์์ผ๋ฏ๋ก ChatBox์ ChatMessage๊ฐ ์์๊น์?
UserInfo
์ฐ์ ์์ ์ผ ์ ์์ต๋๋ค.
templateAreas
2 ์ฐจ์ ๋ฐฐ์ด์ ๊ตฌ๋ฌธ๋ ์ง์ํฉ๋๋ค.
2 ์ฐจ์ ๋ฐฐ์ด์ ๊ตฌ๋ฌธ๋ ์ง์ํฉ๋๋ค.
templateAreas์ ๊ด๋ จํ์ฌ ๋ค์์ ์ ์ ๊ฒ์ฌ์ ์์
๋๋ค.
์ด๊ฒ์ templateAreas์ ts๋ฅผ ์ฌ์ฉํ๋ ์ ํ ์ ์ ๊ฒ์ฌ์ ์์
๋๋ค.
interface Cell<T extends string = string> {
key: T;
title: string;
}
interface Config<K extends string = string> {
header: {
templateAreas: ReadonlyArray<ReadonlyArray<K>>;
cells: ReadonlyArray<Cell<K>>
};
}
declare function check<T extends string>(config: Config<T>): void;
const config = {
header: {
templateAreas: [
['name', 'address', 'address'],
['name', 'building', 'error'],
],
cells: [
{ key: "name", title: "Name" },
{ key: "address", title: "Address" },
{ key: "building", title: "Building" },
{ key: "no", title: "No" }
]
}
} as const;
check(config);
ํฐ
15311
๋ฒ์ 4์์ Moment.js๋ฅผ ๋์ฒด ํ ์์ ์ ๋๊น?
moment
์์ ๋ฒ์ด๋๋ ์ฃผ์ ๋ฌธ์ ๋ locale
s ์ฃผ๋ณ์ ๋ณํ๋ฅผ ๊นจ๋ ๊ฒ์
๋๋ค. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811
typescript์ ๋ํ ์ง์์ด ๋ ๋์์ง ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
๋๋ฐ 4.0์ด ์งํ ์ค์ ๋๋ค! ์๋์ ๊ณ ๋ คํ ๋ช ๊ฐ์ง ์ ์์ด ์์ต๋๋ค. ๋์์ธ ํจํด์ ๋ง๋์ง ์ ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ฌ์ฉ์ ์ง์ ๊ฐ๋ฅ์ฑ์ ๋ํด์๋ ์ ์๊ฐ์ ํ๋ฅญ ํ ๊ฒ์ ๋๋ค.
<Table>
๋ด ํ์ ๋ฐฐ๊ฒฝ์์ ์ ์ด ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ํด๋น ํ์ ๋ํ ๊ฒฝ๊ณ ๋ฅผ ๊ฐ์กฐํ๊ธฐ ์ํด ํ์ ์ฃผํฉ์์ผ๋ก ์ฑ์ํฉ๋๋ค.<Tag color="red">RED<Tag />
์ ์ ์ฌํ API๋ฅผ ๊ฐ์ง ์ ์๋ค๋ฉด ์ข์ ๊ฒ์
๋๋ค (์ <Button color="red">Red Button<Button/>
.<Icon>
๊ตฌ์ฑ ์์ ๋์ FA๋ฅผ ์ฌ์ฉํ ๋ ์ ๋ ฌ์ ๋ช ๊ฐ์ง ๋ฌธ์ ๊ฐ ์์์ ๋ฐ๊ฒฌํ์ต๋๋ค.<Pagination>
๊ตฌ์ฑ ์์๋ ํ์ด์ง ์์ ์ง์ ์ ๊ณตํ๋ ๊ฒ์ ์ง์ํ์ง ์์ต๋๋ค. ์ฌ์ฉ ์ฌ๋ก๋ ์๋ฅผ ๋ค์ด ํ์ด์ง ์๊ณผ ํ์ฌ ํ์ด์ง ๋ง ์ฌ์ฉํ ์ ์์ง๋ง ๊ฐ ํ์ด์ง ๋ด์์ ๋ช ๊ฐ์ ํญ๋ชฉ์ ์ฌ์ฉํ ์๋ ์๋ค๋ ๊ฒ์
๋๋ค. ๋๋ ์ด๊ฒ์ ์ฒ๋ฆฌํ๋ ์ข์ ๋ฐฉ๋ฒ์ ์์ง ์ฐพ์ง ๋ชปํ์ต๋๋ค.์ค๋ ์ฟ ์ค
์๋ฅผ ๋ค์ด ํด๋น ํ์ ๋ํ ๊ฒฝ๊ณ ๋ฅผ ๊ฐ์กฐํ๊ธฐ ์ํด ํ์ ์ฃผํฉ์์ผ๋ก ์ฑ์
๋๋ rowClassName
๋ฅผ ์ฌ์ฉํ์ฌ์ด ํ์ ํด๋์ค๋ฅผ ์ฐ๊ฒฐ ํ ๋ค์ CSS๋ก ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ ์ํ๋ ๊ฒฝํฅ์ด ์์ต๋๋ค.
๊ทธ๋งํผ
๊ตฌ์ฑ ์์๋ ํ์ด์ง ์์ ์ง์ ์ ๊ณตํ๋ ๊ฒ์ ์ง์ํ์ง ์์ต๋๋ค.
๊ฐ์ง ํฉ๊ณ๋ฅผ ์ ๋ฌํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด 50 ํ์ด์ง๋ฅผ ์ํ๋ ๊ฒฝ์ฐ total = pageSize * 50
์ ๋ฌํ ์ ์์ต๋๋ค.
๊ทธ๊ฒ์ ์ ๋ง ์ข์ ์์์ ๋๋ค ๐ ์ฑ๋ฅ์ ์ด์ ์ ๋ง์ถ๋ ๊ฒ์ด ๋์ ๋๊ณ ์ข์ ์์์ ๋๋ค. ์ผ๋ถ ๊ตฌ์ฑ ์์๋ ๋ง์ ์์ ๋ฐ์ดํฐ์ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
๊ฐ์ ์คํฌ๋กค์ ์ด๋ป๊ฒ ๊ตฌํ ํ์๊ฒ ์ต๋๊น? react-window
?
์ฃผ๋ก ๋์ ๊ธฐ๋ฅ์ ๋ํ ์ฐ์ ์์๊ฐ ์์ต๋๊น?
์ํ ๋จ๊ณ์์ ๊ฐ์ ์ ํ์ ์๋ํ๊ณ ์ถ์๋ฐ ์ด๊ฒ์ ๊ดํด์๋ ๋ ํผ์๊ฐ ์๋๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๊ฐ์ฌ.
์์ฒญ์ ๋ฌธ์์ด ์ด๋ฆ์๋ก๋ ํ ์์๋ ์ด์ ๋ ๋ฌด์์ ๋๊น? ๋ฐ์์ lazy ()๊ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ง ์์ต๋๊น?
์๋
ํ์ธ์.
์,ํ์ง๋ง webpack
์ ํน์ฑ, ํน์ ์์
์ ๋ฐ๋ผ ๋ค๋ฆ
๋๋ค.
๋ ๊ฐ์ง ๋ฌธ์ ๊ฐ ๋ ๋๋๋ฌ์ง๋๋ค
/* webpackChunkName: "icons/icon-" */
๋ฅผ ์์ฑํ๋์ด ๋ฐฉ๋ฒ์ webpack
์ ๊ณต ํ Magic Comments
๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ๋ํ ์์ด๋์ด๊ฐ ์์ต๋๊น? # 4331 # 9363
๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ๋ํ ์์ด๋์ด๊ฐ ์์ต๋๊น? # 4331 # 9363
IMHO 4.0์์๋ ์ฌ์ฉ์๊ฐ ์ ์ญ ์ด๋ฆ์ผ๋ก antdesign ์คํ์ผ์ ๋ฒ์๋ฅผ ์ง์ ํ ์ ์๋๋กํ๋ ๊ฒ์ด ์ข์ต๋๋ค (๋ด ์๊ฒฌ https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487 ์ฐธ์กฐ).
๋ค์ ๋ง์ผ์คํค์ ๋ํด ๋ฃ๊ฒ๋์ด ๊ธฐ์ฉ๋๋ค!
๋ด 2 Ct. ๋ฌธ์ ๋ฐ ๊ฐ์ํ ๊ด๋ จ :
๋ฌธ์ํ๋์ง ์์ ๊ธฐ๋ณธ DOM ์์๋ก ์ ๋ฌ๋๋ ์ํ์ด์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค (IIRC ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๊ตฌ์ฑ ์์ ๊ตฌํ์์ ์ ํํ์ง ์์ ๋ชจ๋ ์ํ์ด ํต๊ณผ ๋จ). ๋์ ์์๋ณ๋ก ๊ทธ๋ฃนํํ์ฌ ๋ฌธ์ํํ๋ฉด ๋งค์ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค (ํ๋ ์ด์์์ ์ ์์) : "๋ค์ ์ํ์ ์ปจํ ์ด๋๋ก ์ ๋ฌ๋ฉ๋๋ค.
์ด๋ฌํ ๋ณ๊ฒฝ์ TypeScript ๊ฐ๋ฐ์์๊ฒ๋ ํฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค. ํ์ฌ ์ด์ ๊ด๋ จํ์ฌ TS ์ ์๋ฅผ ์ต์ ์ํ๋ก ์ ์งํ๋ ๊ฒ์ ์ง๋ฃจํ ์์ ์ ๋๋ค.
"๊ฐ๋ฐ์ API ํ์ค"์์ ์ด๊ฒ์ ๋ฌธ์ํ๋์ด์ผํ๋ฉฐ ํญ์ ์ ๋ฌ๋์ด์ผํ๋ props (className, id,?)๋ฅผ ๊ฒฐ์ ํด์ผํฉ๋๋ค.
๋ค๋ฅธ ์ง๋ฌธ:
TypeScript ์ ์๊ฐ์๋ JavaScript์์ ๋ค์ดํฐ๋ธ TypeScript๋ก ๋ ๋ง์ ํ์ผ (๋๋ ์ฌ์ง์ด rc ๊ตฌ์ฑ ์์)์ ์ ํ ํ ๊ณํ์ ๋๊น?
rc-form์ Formik๊ณผ ๊ฐ์ ๋ ์ ์ฐํ ๊ฒ์ผ๋ก ๋ฐ๊พธ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
๊ด๋ฆฌ์๋ฅผ์ํ ์ง๋ฌธ :
์ฐ๋ฆฌ ํ์ Ant๋ฅผ ์ฌ์ฉํด๋ณด๊ณ ์ถ์ง๋ง https://github.com/ant-design/ant-design/issues/11097(Antd Less๊ฐ ์ ์ญ JavaScript ๋์ถ์ ์์ฑ ํจ)์ด ์ฐ๋ฆฌ๋ฅผ ์ฐจ๋จํ๊ณ ์์ต๋๋ค. ์์ ๋ก๋๋งต์ Ant๊ฐ LESS ๋ฒ์ 3์ผ๋ก ์ด๋ํ ๊ฒ์ด๋ผ๊ณ ๋งํ๋ฉฐ, ๋ฌธ์ ์ ์์ ํ์ง ์๊ณ ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ์ธ๋ผ์ธ JavaScript ๊ธฐ๋ฅ์ด ๊ธฐ๋ณธ์ ์ผ๋ก ๋นํ์ฑํ๋์ด ์์์ ์ฝ์์ต๋๋ค. ์ด๊ฒ์ Ant ๋ฒ์ 4๊ฐ ๋ ์ด์ ๋ฌธ์ ๊ฐ ์ ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๊น?
IE9 / 10๋ฟ๋ง ์๋๋ผ IE ์ง์ ์ค๋จ,
์ค ์ด๋ฐ, ์ ์ญ ์คํ์ผ์ ์ค์ผ์ํค์ง ์๋ ๊ฒ์ด ๋งค์ฐ ์ ์ฉ ํ ๊ฒ์
๋๋ค ( html
, body
, *::before
, ...)
react-slick ๊ธฐ๋ฐ์ Carousel์ ์ฌ์ฉ์ ๋ง์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฏ๋ก ์ ๋ฒ์ ์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ต์ฒด ํ ์ ์์ต๋๋ค.
react-pannable ์ ์ฌ์ฉํ๊ธฐ์ ๊ฝค ์ข์ต๋๋ค.
@cztflove ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ปค๋ฐ์ ๋ํ ์ค๋ช
์ ๋ชจ๋ no message
๐์ด๊ณ ์ปค๋ฎค๋ํฐ์ ๊ด์ฌ์ด ๋๋ฌด ๋ฎ์ผ๋ฏ๋ก ๊ณ ๋ คํด์๋ ์๋ฉ๋๋ค.
@ yoyo837 ์ฃผ๋ก์ด ๊ตฌ์ฑ ์์๋ virtual list
๋ฐ ไปฟios่พน็ผๅผนๆง
ํ๋ฏ๋ก์ด ๊ตฌ์ฑ ์์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ผ๋ถ ๆๆฝ
๊ธฐ๋ฅ๋ ๊ตฌํํ ์ ์์ต๋๋ค ๐ค ํฅํ ํ์ฅ์ ์ฌ์ง๊ฐ ๋ ์์ต๋๋ค.
ํ๋์ ๋ฒ์ฉ ์ธ์ด๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด์ผํ์ง ์์ต๋๊น?
๋๋ ์์ด ์์ด๋ฏผ์ด ์๋๋๋ผ๋ ์ง์ญ ์ธ์ด์ ์ ์ ์ผ๋ก ๋์ํ๊ณ ์กด์คํฉ๋๋ค. ์ด์ค ์ธ์ด๋ก ์ค๋ณต ์์ ์ ๋งํ๋ ๊ฒ์ด 100 ๊ฐ๋ ๋ ์ข์ผ๋ฉฐ, ๋ฌด์๋ณด๋ค๋ ๊ฐ์ฅ ์ค์ํ ์์๋ ์๊ฐ, ๋ ผ์ ๋ ๋ฌธ์์ด ๋ฒ์ญ, ๋ฌธ์ํ ๋๋ ํํธ์์ ๋ฐฐ์ฐ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ชจ ๋ฑ
์ธ์ ํด์ผํฉ๋๋ค. ์ธ์ด ๊ฐ๋ฑ์ผ๋ก ์ธํด ๊ธฐ์ฌ์๊ฐ ๋ถ์กฑํ ๊ฒ์ ์๋๋ฉฐ ์ฌ์ ํ ์๋ฐฑ ๋ช ์ ์ฐ๋ฆฌ๊ฐ ์ฐธ์ฌํ๊ธฐ๋ฅผ ๋๋ ค์ํฉ๋๋ค. ์ด๋ฏธ ๋ง์ ์คํ๋ฆฐํธ, ๋ฒ์ญ ๋ฌธ์ ๊ฐ ์งํ ์ค์ด์ง๋ง, ์ ๊ฐ ์์ฒญํ๋ ๊ฒ์์ด ์ฃผ์ ๋ฆด๋ฆฌ์ค ๋ฅผ ํตํด ํ๋์ ๋ฒ์ฉ ์ธ์ด๋ก ์์ ํ ๋ง์ด๊ทธ๋ ์ด์ ํ์ฌ ์ฐ๋ฆฌ ๋ชจ๋์ ์ค์ด๋ ๊ฒ์ ๋๋ค.
ํ๋์ ๋ฒ์ฉ ์ธ์ด๋ก ๋ง์ด๊ทธ๋ ์ด์ ํด์ผํ์ง ์์ต๋๊น?
๋๋ ์์ด ์์ด๋ฏผ์ด ์๋๋๋ผ๋ ์ง์ญ ์ธ์ด์ ์ ์ ์ผ๋ก ๋์ํ๊ณ ์กด์คํฉ๋๋ค. ์ด์ค ์ธ์ด๋ก ์ค๋ณต ์์ ์ ๋งํ๋ ๊ฒ์ด 100 ๊ฐ๋ ๋ ์ข์ผ๋ฉฐ, ๋ฌด์๋ณด๋ค๋ ๊ฐ์ฅ ์ค์ํ ์์๋ ์๊ฐ, ๋ ผ์ ๋ ๋ฌธ์์ด ๋ฒ์ญ, ๋ฌธ์ํ ๋๋ ํํธ์์ ๋ฐฐ์ฐ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ชจ ๋ฑ
์ธ์ ํด์ผํฉ๋๋ค. ์ธ์ด ๊ฐ๋ฑ์ผ๋ก ์ธํด ๊ธฐ์ฌ์๊ฐ ๋ถ์กฑํ ๊ฒ์ ์๋๋ฉฐ ์ฌ์ ํ ์๋ฐฑ ๋ช ์ ์ฐ๋ฆฌ๊ฐ ์ฐธ์ฌํ๊ธฐ๋ฅผ ๋๋ ค์ํฉ๋๋ค. ์ด๋ฏธ ๋ง์ ์คํ๋ฆฐํธ์ ๋ฒ์ญ ๋ฌธ์ ๊ฐ ์งํ ์ค์ด์ง๋ง, ์ ๊ฐ ์์ฒญํ๋ ๊ฒ์ ์ด๋ฒ ์ฃผ์ ๋ฆด๋ฆฌ์ค ๋ฅผ ํตํด ํ๋์ ๋ฒ์ฉ ์ธ์ด๋ก ์์ ํ ๋ง์ด๊ทธ๋ ์ด์ ํ์ฌ ์ฐ๋ฆฌ ๋ชจ๋์ _ ์ปค๋ฎค๋์ผ์ด์ ๊ฒฉ์ฐจ๋ฅผ ์ค์ด๋ ๊ฒ์ ๋๋ค.
่ฏดๅพ ๅฏน ๏ผ ไธๅฟ ่ฏด ไธญๆ ๅง
๊ด๋ฆฌ์๋ฅผ์ํ ์ง๋ฌธ : ๋นํ ์ค์ ์์ ๋ฐ ์คํ์ผ ํ ๋ง๋ฅผ ๋ณ๊ฒฝํ๊ธฐ ์ํด CSS ๋ณ์๋ฅผ ์ฌ์ฉํ ๊ณํ์ด ์์ต๋๊น?
์ค์ ๋ก๋ ๋ณ์๋ฅผ ํตํด ๊ตฌ์ฑ ์์ ์คํ์ผ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ด ๋งค์ฐ ํธ์ํ ๋ฐฉ๋ฒ์ด๋ผ๋ ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค. var(--css-vars)
Less ๋ณ์๋ฅผ ๋ค์ ์์ฑํ๋ ค๊ณ ํ์ง๋ง ์คํ์ผ ์ปดํ์ผ์์ ๋ง์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ๋ง์ ์คํ์ผ์ด ๊ฐ๋ฟ๋ง ์๋๋ผ vars์ ํจ๊ป ํจ์์ ์ฐ์ฐ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์
๋๋ค. ๋๋ ๊ทธ๊ฒ์ด ํฐ ์์
์ด๊ณ ์ด๋ฐ ์์ผ๋ก ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ์์ฑํ๋ค๊ณ ๊ฐ์ ํ์ง๋ง ์ฃผ์ ๋ฒ์ ์ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ์์ฑํ์ต๋๋ค. :) ์ฌ์ฉ CSS vars๋ ๊ตฌ์ฑ ์์ ์คํ์ผ์ ์ฌ์ฉ์ ์ ์ ํ ์์๋ ๋ง์ ๊ธฐํ๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
๊ทธ๊ฒ์ ๋ํด ์ด๋ป๊ฒ ์๊ฐํ์ธ์? ์ด์จ๋ ํ ์์ฒญ์ผ๋ก CSS vars ์ฌ์ฉ์ผ๋ก ํ ๋ง๋ฅผ ๊ฐ๋ฐํ ๊ณํ ์ด์๊ธฐ ๋๋ฌธ์์ด ๊ธฐ๋ฅ (์คํ ์ค ํ ๋ง ๋ณ๊ฒฝ)์ด ๋ด ํ๋ก์ ํธ์ ํ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
ํด๋น ์ ์์ด ์ค๋ณต ๋ ๊ฒฝ์ฐ ์ฃ์กํฉ๋๋ค.ํ์ง๋ง ๋ค๋ฅธ ๋ฌธ์ ์ PR์์ ํด๋น ๋ด์ฉ์ ์ฐพ์ง ๋ชปํ์ต๋๋ค.
@ Z3SA https://caniuse.com/#search = CSS % 20Variables. ์ด๊ฒ์ ๋ชจ๋ IE ์ง์์ ์ค์งํด์ผํฉ๋๋ค. IE11 ์ง์์ ์ค์งํ๋ ๊ฒ์ ๋๋ฌด ๊ธ์ง์ ์ด์ง๋ง ์ ๋ ์ง์ํฉ๋๋ค.
@ yoyo837 , IE ์ง์ ๋ฌธ์ ์ ๋๋ฌด ๊ธ์ง์ ์ธ ์์ธ์ด๋ผ๋ ๋ฐ ๋์ํฉ๋๋ค. ๋ํ Ant Design์ Electron (์น์ด ์๋ ๋ณ๋์ ํ๋ซํผ)์ ๊ณต์์ ์ผ๋ก ์ง์ํฉ๋๋ค (ant.design์์ ์ธ๊ธ ๋จ). ์ด ๊ฒฝ์ฐ ๋ ๊ฐ์ ํ ๋ง๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ด์์ ์ ์์ต๋๋ค. ํ๋๋ Less vars์ด๊ณ ๋ค๋ฅธ ํ๋๋ CSS vars์ ๋๋ค. ํ์ง๋ง ์ง์ํ๊ธฐ๊ฐ ๋๋ฌด ์ด๋ ค์ ๋ณด์ ๋๋ค.
๋ฐ๋ผ์ ๋ด๊ฐ ์๊ฐํ๋ ๋ค๋ฅธ ๊ฐ๋ฅํ ์ ๋ต์ Less์ ๋ชจ๋ ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํ ์์ฑ์ ๋ํด Less ๋ณ์๋ฅผ ์์ฑํ๊ฑฐ๋ ๊ฐ๋ฐ์๊ฐ ์์ ์ CSS ๋ณ์์ ๋ํ ํญ๋ชฉ์ผ๋ก ์ฌ์ฉํ ์์๋ Less ๋ณ์ ์๋์ ํจ์ ๋ฐ ์์ ์ฌ์ฉ์ ์ ๊ฑฐํ๋ ๊ฒ์ ๋๋ค. ๋๋ ๋ ๊ฐ๋จํ๋ค๊ณ ๋งํ๋ฉด Less vars๋ฅผ ํจ์ ๋ฐ ์์ ์ด ์๋ ๊ฐ ์ปจํ ์ด๋๋ก๋ง ์ฌ์ฉํ์ญ์์ค.
๋ฉ์ด์ ๋ธ๋ผ์ฐ์ ๋ง ์ง์ํ๋ค๋ฉด ์ฝ๋์ ํฌ๊ธฐ๊ฐ ์์์ง๊ณ ์ ์ง ๊ด๋ฆฌ๋ ๋ ์ฌ์ ์ง ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
IE9 / 10๋ฟ๋ง ์๋๋ผ IE ์ง์ ์ค๋จ,
@wanliyunyan ๋๋ฌด antd @ 3๋ฅผ ๊ณ ์ ํ ์ ์์ผ๋ฉฐ ์ด๋ ์ฐ๋ฆฌ์๊ฒ ์ข์ง ์์ต๋๋ค.
@ Z3SA ์์ฒญ๋ ์์ ์ด ๋ ๊ฒ์ ๋๋ค.
@dancerphil ๋คํํ๋ ๋ด ํ๋ก์ ํธ์๋ ์ต์ ๋ฒ์ ์ ํฌ๋กฌ ๋ง ๊ณ ๋ คํฉ๋๋ค. ๐ ํฌ๊ธฐ๊ฐ ์์์๋ก ์ข์ต๋๋ค.
@ yoyo837 ์์์. ๊ทธ๋ฆฌ๊ณ ์ด ์์ด๋์ด๊ฐ ์ถฉ๋ถํ ๊ด์ฌ์๋ฐ์ง ๋ชปํ๋ฉด ๋ด๊ฐ ์ง์ ํ ๊ฒ์ ๋๋ค.
์ฐ๋ฆฌ๋ ๊ฐ๋ณ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ง์ ์ผ๋ก antd๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๋ ๊ฒ์ ์ข์ํ๋ ํ์ฌ์ ๋๋ค. ๊ทธ๋ฌ๋ ant๊ฐ Global ์คํ์ผ์ ์ฌ์ฉํ๋ฉด์ด ๋ฌธ์ ๊ฐ ์ค์ ๋ก ๋ณต์กํด์ง๋๋ค. ๊ธ๋ก๋ฒ ์คํ์ผ์ ์ค์ผ์ํค์ง ๋ง์ญ์์ค.
์์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๊ตฌ์ฑ ์์ ์ค ํ๋์ ๋๋ค. ์ฐ๋ฆฌ๋ ์์ ์ด API ๋์์ธ์ ๋ํด ๋ง์ ์๊ฒฌ์ ๊ฐ์ง๊ณ ์์์ ์์์ต๋๋ค. 4.0์์ API๋ฅผ ๋จ์ํํ๊ณ ์ถ์ต๋๋ค.
Fom.Item์๋ ํ๋ ๋ฐ์ธ๋ฉ์ด ํฌํจ๋ฉ๋๋ค.
์ด๋ฌํ ๋ณ๊ฒฝ์ผ๋ก ์ธํด Form.Item์ ์๊ฒฉํ ํํ ๊ตฌ์ฑ ์์๋ก ์ฌ์ฉํ ์ ์์ต๋๊น? ๋๋ antd์ ๊ตฌ์ฑ ์์๋ฅผ ์ข์ํ์ง๋ง ์ํ ๊ด๋ฆฌ๋ฅผ ์ํด react-final-form์ ์ ํธํฉ๋๋ค. Form.Item์ ์คํ์ผ์ ์ํ๊ณ ์ํ ๊ด๋ฆฌ ๋ ผ๋ฆฌ๋ ์์ต๋๋ค.
4.0 ๋ธ๋์น๊ฐ ์์ฑ๋ฉ๋๋ค. ์ธ์ ๋ฏธ๋ฆฌ ๋ณผ ์ ์์ต๋๊น
์๋ก์ด ์์ ๊ตฌ์ฑ ์์๋ ๊ต์ฅํฉ๋๋ค!
momentjs๊ฐ ํฌ๊ณ ๋ฒ๋ค ํฌ๊ธฐ๋ ์ปค ์ก์ผ๋ฏ๋ก momentjs๋ฅผ dayjs๋ก ๊ต์ฒดํ์ญ์์ค.
์์์๋ ํ ์คํธ ํธ์ง๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ ๋ ํจ์ ์ด ์์ต๋๊น?
์ถ์์ผ์ ์ธ์ ์ธ๊ฐ์?
@rafaelodassi ์์ง ํ์ ๋ ๋ ์ง๋ ์์ง๋ง ์๋ง๋ 4 ๋ถ๊ธฐ์์์ ๊ฒ์ ๋๋ค.
@babel/runtime@7
๋ฐ core-js@3
์
๊ทธ๋ ์ด๋ํ๋ ๊ฒ๋ ์ฐ๋ฆฌ์ ์ต์ฐ์ ๊ณผ์ ์
๋๋ค.
v3๊ฐ ์๋๋๊น? core-js@4
๋ํ ๋ด์ค๊ฐ ์์ต๋๊น?
ํต๊ณ์ ๊ฑฐ์ ์ฌ์ฉ๋์ง ์์๊ธฐ ๋๋ฌธ์ ๋ชจ๋๊ฐ IE ์ง์์ ์ ๊ฑฐํ๋ ๊ฒ์ ๋ํด ์ด์ผ๊ธฐํฉ๋๋ค. ํต๊ณ์ ์ ํ ๋ค์ด ๊ฐ์ง ์๋ ์ธํธ๋ผ๋ท ๋ค์์๋ ์๋ฐฑ๋ง ๋ช ์ ๊ธฐ์ ์ฌ์ฉ์๋ ์ด๋ป์ต๋๊น? ๊ทธ๋ค์ ๊ธฐ์ ์ ์ฑ ๋๋ฌธ์ IE10๊ณผ IE11์ ๊ณ ์ํ๊ณ ์์ต๋๋ค.
IE11 ์ง์์ด ์ค๋จ๋๋ฉด antd @ 3 ์ ๊ณ ์ ํ ๊ฒ์ ๋๋ค. IE10 ์ญ์ ๋ MS์์ ๋ ์ด์ ์ง์ํ์ง ์๊ณ ๊ธฐ์ PC๊ฐ IE11๋ก ์ ๋ฐ์ดํธ๋๊ธฐ ๋๋ฌธ์ ๋๋ถ๋ถ์ ํด๋ผ์ด์ธํธ์์ ํ์ฉ ํ ์ ์์ต๋๋ค.
<Select/>
๊ฐ์ผ๋ก ๊ฐ์ฒด ์ฌ์ฉ์ ํ์ฉํ๋ API๋ฅผ ๋์
ํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์์ธํ ๋ด์ฉ์ https://github.com/ant-design/ant-design/issues/13485 ๋ฅผ ์ฐธ์กฐ
cc @zombieJ
๊ฐ ๊ตฌ์ฑ ์์์ ์์ฒด ์ ๋ฐ์ดํธ ๋ก๊ทธ๊ฐ์๋ ๊ฒ์ด ์ข์ต๋๋ค. ์จ๊ฒจ๋ ์๊ด ์์ต๋๋ค. ๊ฐ์ธ์ ์ธ ์ ์ ~
๋ฆด๋ฆฌ์ค ๋๋ RC๋ ์ธ์ ๊ฐ๋ฅํฉ๋๊น?
๊ฐ ๊ตฌ์ฑ ์์์ ์์ฒด ์ ๋ฐ์ดํธ ๋ก๊ทธ๊ฐ์๋ ๊ฒ์ด ์ข์ต๋๋ค. ์จ๊ฒจ๋ ์๊ด ์์ต๋๋ค. ๊ฐ์ธ์ ์ธ ์ ์ ~
๊ฐ ๊ตฌ์ฑ ์์์ ๋ฌธ์๋ฅผ ์ด๋ค ๋ฒ์ ์ผ๋ก ์ถ๊ฐ ํ ์ ์๋์ง ๋์ํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๋ฌธ์๋ฅผ๋ณด๊ณ ํ์ฌ ๋ฒ์ ์ ์ฌ์ฉํ ์ ์๋์ง, ์ข ์์ฑ์ ์ ๋ฐ์ดํธํ ์ง ์ฌ๋ถ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
GitHawk๋ก ์ ์ก
ํธ์ ๋ด์ ๊ฐ๊ธฐ
์์ด pls์)
์์ด ์ฑ๋๋ก ์ ์ง ํด์ฃผ์ธ์ ~
4.0 ์ํ๊ฐ ๊ฒ์๋์์ต๋๋ค. ๊ทธ ๋๋ผ์ด. ์ด์ ์ค๋น .
๋ฒ ํ ๋ฒ์ ์ ๊ฒ์ํ๋ฉด ๋ด ํ๋ก์ ํธ๋ฅผ ๋ฆฌํฉํฐ๋งํ๊ฒ ์ต๋๋ค.
antd
์ ๊ธฐ๋ณธ ํ
๋ง๋ ์๋ฆ๋ต์ง๋ง ๋ ์ข์ ์๋ ์์ต๋๋ค.
๊ฐ๋
์ฑ์ ์ํด ํฅ์๋ ๋๋น๋ฅผ ๊ณ ๋ คํ๊ณ ๋ ํฐ ํ
์คํธ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
๊ธฐ์ฌ์ ๋๊ตฌ๊ฐ ๋๋ฌด ๋ง์ต๋๋ค.
https://www.google.com/search?q=web+readability
antd
v3์ v4๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ ์คํฌ๋ฆฝํธ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
biz ํ๋ก์ ํธ์ ๋๋ฌด ๋ง์ ์์ ๊ตฌ์ฑ ์์๊ฐ ์์ต๋๋ค. antd
v3๋ฅผ v4๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ ๋ฐ ๋น์ฉ์ด ๋๋ฌด ๋ง์ด ๋ญ๋๋ค.
react-relay
ํ๋ ๋น์ทํ ์ผ์ํ์ต๋๋ค.
react-relay
v3๋ฅผ react-relay v4 Realease ๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ ค๋ฉด ๋ง์ ํ์ผ์ ์์ ํด์ผํฉ๋๋ค.
๋ฐ๋ผ์ jscodeshift ๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ด๊ทธ๋ ์ด์
์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ๋ฏ๋ก react-relay
์ ์ฌ์ฉ์๊ฐ react-relay
v3์ v4๋ก ์ฝ๊ฒ ๋ง์ด๊ทธ๋ ์ด์
ํ ์ ์์ต๋๋ค.
์ผ๋ถ ์คํ์ผ์ ๊ณผ์ฅํ๋ ๊ฒ์ด ์ด๋ ต๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋์ ๊ทธ๊ฒ์ ๊ฐ์ ํ ๊ณํ์ด ์๋ค๋ฉด?
๊ฐ์ธ์ ์ผ๋ก CSS-in-JS ์ฌ์ฉ์ ์ ํธํ๋ฉฐ ๋งค์ฐ ์ ์ฐํ๊ณ React์ ๋งค์ฐ ์ ์ด์ธ๋ฆฝ๋๋ค.
4.0 alpha์์ ํด๋์ค ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ์์ ์ํฐํฐ๋ฅผ ์ป์ ์ ์์ต๋๋ค. https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn ์ด ๋งํฌ ์๋์ ์ํ ์ฝ๋๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. formRef ๋ฉ์๋์ ์ํฐํฐ๊ฐ ์์ต๋๋ค.
ํด๊ฒฐ
@ Kwei9 , ๋ฌธ์ ๋ฅผ ์ด๊ณ ์ฒจ๋ถํ์ฌ ์ฌํ ํ ์ ์์ต๋๊น?ํ ๋ฒ ๋ณผ๊ฒ์
@ Kwei9 , ๋ฌธ์ ๋ฅผ ์ด๊ณ ์ฒจ๋ถํ์ฌ ์ฌํ ํ ์ ์์ต๋๊น?ํ ๋ฒ ๋ณผ๊ฒ์
์ฐธ์กฐ ์์ฑ์ด์ด ์๋ฃจ์ ์ผ๋ก ๋ณ๊ฒฝ๋์์ต๋๋ค.
๋๋ ์ง๊ธ์ด ๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ํด๊ฒฐํ ๋๋ผ๊ณ ์๊ฐํฉ๋๋ค! ๋ฐ๋ผ์ ๋ค๋ฅธ ์์ฉ ํ๋ก๊ทธ๋จ๊ณผ ํจ๊ป antd๋ฅผ ์ฌ์ฉํด์ผํ์ต๋๋ค!
Moment๋ ํ๋ฐํธ ์๋ ํ๋ก์ ํธ์ ๋๋ฌด ์ปค์ ๋ง์ ๋์์ด ์์ง๋ง TimePicker์ DatePicker์ props๋ Moment๋ฅผ ์ค๊ณํฉ๋๋ค. ๊ทธ๊ฒ์ ์ฐ๋ฆฌ๊ฐ ์๊ฐ์ ๋์ฒด ํ ์ ์๋๋ก ์ธ๋ํฉ๋๋ค.
@ jas0ncn ์๋ ํ์ธ์, momentjs๋ฅผ dayjs (2kb ๋์)๋ก ๊ต์ฒดํด๋ณด์ธ์. ์ด๋ค์ ์ด๋ฏธ Ant Design (Antd)์ Replace Moment.js์์ Day.js https://github.com/iamkun/dayjs/issues/529 ์ ํ ์คํธ ๋ ๋ฌธ์ ์ด๋ฉฐ ์ ๋ง ์ ์๋ํฉ๋๋ค.
dayjs์ ํต์ฌ ๊ด๋ฆฌ์๋ก์ ์ฐ๋ฆฌ๋์ด ๊ต์ฒด์ ๋ํ ๋์์ ๊ธฐ๊บผ์ด ์ ๊ณต ํ ๊ฒ์ ๋๋ค.
๊ฐ์ฌ.
่ฏท ่่ ไฝฟ็จ ่ฝป ้ ็ Dayjs ๆฅ ๆฟๆข moment.js, ๅจ ่ฟ้ ๅทฒ็ป ๅ ๅ ๆต่ฏ ่ฟ ๆฟๆข ็ ๅฏ่กๆงhttps://github.com/iamkun/dayjs/issues/529
์ด์ ์์ด์ฝ ์ฌ์ฉ ๋ฐฉ๋ฒ์ * ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ต๋๋ค * :
import { Icon, Button } from 'antd'; const Demo = () => ( <div> <Icon type="smile" /> <Button icon="smile" /> </div> );
4.0์์ ๋์ ๋จ์ผ ์์ด์ฝ ๊ฐ์ ธ ์ค๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
// Directly import import SmileOutline from 'antd/icons/SmileOutline'; // If tree-shaking supported import { SmileOutline } from 'antd/icons'; const Demo = () => ( <div> <SmileOutline /> <Button icon={<SmileOutline />} /> </div> );
์ ์์ด์ฝ ์ฐธ์กฐ์ ๋ํ ์์ด๋์ด๊ฐ ์์ต๋๋ค. ์์ ์ ๋จ์ด๋ก ์ธํด ๊ฐ ์์ด์ฝ์ ๋ณ๋์ ๊ตฌ์ฑ ์์์ ํด๋นํฉ๋๋ค. ์๋ฅผ ๋ค์ด ๋ก๋ฉ ์์ด์ฝ์ ๋์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
import Loading from 'antd/icons/Loading';
<Loading />
๊ทธ๋ฌ๋ ์ผ๋ฐ์ ์ผ๋ก ์ค์ ๋ก๋ฉ ๊ตฌ์ฑ ์์๋ฅผ ์ง์ ์บก์ํ ํ ์ ์์ผ๋ฉฐ, ๊ณผ๊ฑฐ์๋ <Icon />
์ด (๊ฐ) ํ ๋์ ์์ด์ฝ์ด๋ผ๋ ๊ฒ์ ์๊ณ ์์์ง๋ง ์ง๊ธ์ ๋๋ฌด ๋ง์ ์ด๋ฆ์ ์ฐจ์งํ๋ฏ๋ก ์์ด์ฝ์ด ์ด๋ํด์ผํ๋ค๋ ๊ฒ์ ์๊ณ ์ถ์ต๋๋ค. ์์
์ฅ์๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
์ :
<Title />
<Loading />
<Sun />
์ธ๋ป๋ณด๊ธฐ์ ๋ค์ ๋ ๊ฐ๋ ์์ด์ฝ์ผ๋ก ๋ณด์ด์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค (๋ฌผ๋ก ์ฝ๋ ์คํ์๋ ์ํฅ์์ฃผ์ง ์์ต๋๋ค ~)
๋ค์ ๋ฌธ๊ตฌ๋ก ๋ณ๊ฒฝํ๋ ๊ฒฝ์ฐ :
import {Icon} from 'antd';
import {Loading, Sun} from '@antd/icons';
<Icon spec={Loading} {...otherProps}/>
<Icon spec={Sun} />
๋นต์ ์ธ๋ถ ๋ ์ด์ด๋ฅผ ํตํด ์ด์ ๋ ์ด์ด์ ๋งค์ฐ ์ ์ฌํ๊ฒ ๋ณด์ด๋ฉฐ ํ์์ ๋ฐ๋ผ ์ฌ์ฉํ ์๋ ์์ผ๋ฉฐ ์์ด์ฝ ๊ตฌ์ฑ ์์๋ฅผ ๋์
ํ ๊ฒ์
๋๋ค.
ํน์ ๊ท์น์ด ์ถฉ์กฑ๋๋ฉด ์ฌ์ฉ์ ์ ์ ์์ด์ฝ์ด spec ์์ฑ์ ํตํด ์ ๋ฌ ๋ ์ ์์ต๋๊น? ๋ง์ ์์ด์ฝ์ ๋ฏธ๋ฆฌ ์ ์ํ๋ ๋ฐ ๋์์์ฃผ๋ antd์ ๋์ผํ์ง๋ง ์ฌ์ฉ์ ์ ์ ์์ด์ฝ์ ๋๊ฐ์ต๋๋ค ~~~ (๊ทธ๋ฅ ์๊ธฐํด๋ณด์ธ์ ~)
์ถ์ : ์๋๋ฉด ์ด๋ฐ ์ข
๋ฅ์ ๊ธ์ ์ค์ ๋ก ์ค๋ ์ ์ ์๊ฐ ๋ ๊ฒ์
๋๊น, ์๋๋ฉด ์ด๋ฐ ์ข
๋ฅ์ ๊ธ์ ๋ฌธ์ ๊ฐ์์ด์ ๊ทธ๊ฒ์ ๋ํด ์๊ฐํ์ง ์์์ต๋๊น? . . ๐
๊ทธ๋ฅ ์๊ฐ ํ์ด์. . .
@ppbl์ ์์ด๋์ด์ ๋ฐ๋ผ ๋ค์๊ณผ ์ ์ฌํฉ๋๋ค.
import Icon from '@antd/icons';
imoort { LoadingOutline } from '@antd/icons-svg';
<Icon component={LoadingOutline} {...otherProps}/>
์ ์์ด์ฝ๋ ์ ์ฌํ๊ฒ ์์ฑ๋ฉ๋๋ค. https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx ์ฐธ์กฐ
Icon ์ด๋ฆ์ Icon ์ ๋์ฌ / ์ ๋ฏธ์ฌ๋ฅผ ์ถ๊ฐํ์ฌ ์ด๋ฌํ ์ํฉ์ ํผํ ์ ์์ต๋๊น?
imoort { LoadingOutlineIcon } from '@antd/icons';
<LoadingOutlineIcon {...otherProps}/>
๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ๋
ธ๋ ฅํ์ญ์์ค.
https://github.com/ant-design/ant-design/issues/9419
Button
๊ฐ์ ธ ์ค๋ฉด ํ๋ก์ ํธ์ 95KB๊ฐ ์ถ๊ฐ๋ฉ๋๋ค. ์ด๋ 2019 ๋
์๋ ํ์ฉ๋์ง ์์ต๋๋ค. ๐
@vagusX ์ด์ฉ๋ฉด ์ด๋ฆ์ด ์กฐ๊ธ ๊ธธ๋ค๊ณ ์๊ฐํฉ๋๊น? ํญ์ ์ด๋ฆ์ด ๊ฐ๊ฒฐํ๊ณ ์์ ๊ตฌ์ฑ ์์ ๋ ์๋์ ์ผ๋ก ๋จ์ผ ๊ตฌ์ฑ ์์๋ผ๊ณ ์๊ฐํฉ๋๋ค. ์ด๋ฆ์ด ๋๋ฌด ๊ธธ๊ณ ํฐ ๊ตฌ์ฑ ์์ ์ฌ์ผํฉ๋๋ค (๋ฌผ๋ก ์ด๊ฑด ์๋ชป๋ ๋๋์ด์์ ~ ์์์). . ~
๋ฌผ๋ก , <Icon />
๋งํด๋ ์์ด์ฝ ์ธ ๊ฒ์ ์๋ค๋ฉด <Icon />
์ปดํฌ๋ํธ๋ฅผ ์ง์ ๋ง๋ค์ด์ ์ฌ์ฉํ ๋ antd ์์ด์ฝ์ ๊ฐ์ ์๋ ์์ต๋๋ค. ํจ๊ณผ๋ ๊ฑฐ์ ๋๊ฐ์์ ~ ๊ทธ๋ฅ ๋ชจ๋ ์์ด์ฝ์ด๊ณ ์ด๋ฆ์ด ํฉ์ด์ ธ์๋ ๊ฒ ๊ฐ์ ๋๋์ด ๋ญ๋๋ค. ์กฐ๊ธ ์ด์ํ๊ฒ ๋๊ปด์ง๋๋ค. ์ฐจ์ด์ ์ ๋จผ์ ์์ด์ฝ์ด๋ผ๋ ๊ฒ์ ์์๊ณ ๊ทธ ๋ค์์ ์ด๋ค ์ ํ์ธ์ง ์์์ต๋๋ค. ๋จผ์ ํ์
์ ์๊ณ ๊ทธ๋ค์์ ์์, ์ค, ์์ด์ฝ์ด์ผ ~
@ avalanche1 ์ด pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838์ ๋ฒ๋ค ๋ถ์ ๊ฒฐ๊ณผ์ Button
๊ตฌ์ฑ ์์์ ํฌ๊ธฐ๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ๋ถ๋ช
ํ ๊ฐ์
์์ ๋๋ง ํ. ํ์ง๋ง ์คํฌ๋ฆฐ ์ท์๋ ์ค์ ํฌ๊ธฐ๊ฐ ํ์๋์ด ์์ง ์์ผ๋ฏ๋ก ํ์ธํ๊ฑฐ๋ ๋ฐ๋ฐ ํ ์ ์์ต๋๋ค.
Form์ ์ API๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๋ ค๊ณ ํ๋๋ฐ field-form ์ ๋ฒ์ ์ด ๋ถ์์ ํ๋ค๋ ์ฌ์ค์ ์๊ฒ ๋์๊ธฐ ๋๋ฌธ์ ์์ผ๋ก ์ด๋ฌํ ์ธํฐํ์ด์ค๊ฐ ํฌ๊ฒ ๋ณ๊ฒฝ ๋ ์ง ์ฌ๋ถ๋ฅผ ์๊ณ ์ถ์ต๋๋ค.
@orzyyyy ,
antd๋ ์์
๋ฐ ๋ด๋ถ ์์ ๋ด์ฌ์๊ฐ ํ
์คํธ ํ ์ ์๋๋ก 4.0-alpha.x
๋ฒ์ ์ ์ถ์ํ์ต๋๋ค. ์ํ ๋ฒ์ ์์ ๋ถ์ ์ ์ธ ํผ๋๋ฐฑ์ด์๋ ๊ฒฝ์ฐ์ด API๊ฐ ๋ฆด๋ฆฌ์ค์ ์ต์ข
๋ฒ์ ์ด๋ฉ๋๋ค.
@ avalanche1 @ant-design/icons
v4-alpha ๋ฒ์ ์ ํธ๋ฆฌ ์
ฐ์ด ํน์ ์ง์ํ๋ฏ๋ก ๋ฒ๋ค ํฌ๊ธฐ๋ ๋ด๋ถ์ ์ผ๋ก ์์ด์ฝ์ ๊ฐ์ ธ ์ค๋ antd ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๋์ง ๋๋ @ant-design/icons
๋ฅผ ์ฌ์ฉํ๋์ง ์ฌ๋ถ์ ๊ด๊ณ์์ด ์์ ์ ํ๋ก์ ํธ์์ ์ฌ์ฉํ ์์ด์ฝ์ ์์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค
์ด๊ธฐ ๊ฒ์๋ฌผ์ด ๋ฒํผ, ์บ๋ฆฐ๋ ๋ฐ ๊ธฐํ ๊ตฌ์ฑ ์์์ ๊ดํ ๊ฒ์ด์์ ๋ ์์ด์ฝ์ ๋ํด ์ด์ผ๊ธฐํ๋ ์ด์ ๋ ๋ฌด์์ ๋๊น? https://github.com/ant-design/ant-design/issues/9419
DatePicker ๊ฐ์ ์๊ฐ์ด์ด์ผํฉ๋๋ค. ์๊ฐ์ ์ ๊ฑฐ ํ ์ ์์ต๋๊น? from์ ์ ๋ฐ์ดํธํ๋ฉด ์๊ฐ์ผ๋ก ๋ณํํด์ผํฉ๋๋ค.
moment
์ ๋ํ ๊ณ ๋ ค ์ฌํญ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. DatePicker๋ ํธํ์ฑ ์๊ตฌ ์ฌํญ ๋๋ฌธ์ ๊ธฐ๋ณธ์ ์ผ๋ก moment
๋ฅผ ๊ณ์ ์ฌ์ฉํ์ง๋ง ๋ค๋ฅธ ๋ ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์์ฑ ํ ์์๋ ํฉํ ๋ฆฌ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
import DatePicker, { createPicker } from 'antd/lib/date-picker';
import dayjs from 'dayjs';
const basicDemo = <DatePicker />
const MyDatePicker = createPicker(dayjs, {
// Some proxy function, maybe can provided by default...
format(dayObj, formatStr) {
return ...;
},
parse(str, formatStr) {
return ...;
},
});
const dayDemo = <MyDatePicker />;
๊ทธ๋ฅ ์๊ฐํด, ํ์ํฉ๋๋ค.
Moment.js๋ ๋ณต์กํ OOP API๋ก ์ธํด ํธ๋ฆฌ๋ฅผ ํ๋ค ์ ์ค๋ฒ ํค๋ ์ ๋๋ค.
Ant Design v4๋ ์ด๋ฏธ ํฌ๊ฒ ๋ณ๊ฒฝ๋ ์ฃผ์ ๋ฆด๋ฆฌ์ค์ ๋๋ค. ์ง๊ธ์ด ์ ํธ์ ๊ธฐํ ๋ค!
๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ต์ฒด ํ์ง ์๋ ๊ฒ์ด ์ข์ต๋๋ค. Antd ๊ฐ์ ์์ ๊ฒ์ ์ฌ์ฉํ ์ dayjs
๋๋ date-fns
๋ด๋ถ์ ํ์ง๋ง ๋ค์ดํฐ๋ธ ๋ฐ์ ๋ค์ฌ์ผํ๋ค Date
๊ตฌ์ฑ ์์์ ๋ํ ๊ฐ์ฒด ๋ ๋ฌธ์์ด์.
moment()
๋ฅผ ๋ถ๋ฅผ ๋๋ง๋ค ๊ฐ์์ง๊ฐ ์ฃฝ์ต๋๋ค ..
@zombieJ ๋ Table ์ปดํฌ๋ํธ๊ฐ ์ด๋ป๊ฒ ์งํ๋๊ณ ์๋์ง ์๊ณ ์ถ์ต๋๋ค. Form๊ณผ ๊ฐ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฒ์ ์ด ์์ต๋๊น? ๋๋ ๊ฑฐ์ ํ ํ ํผ๋ฅผ ํ ํ๋ค ๐
์ํ ๋ฒ์ ์ ์ด๋ฏธ ์ ํ ์ด๋ธ์ด ํฌํจ๋์ด ์์ต๋๊น? ๊ทธ๋ ๋ค๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์น ์ฌ์ดํธ ์ ์์ ๊ฐ ํฌํจ๋์ด์ผํฉ๋๊น?
ํ ์ด๋ธ์ด ๋๊ธฐ์ด์ ์์ผ๋ฉฐ ํ์ฌ ๊ฐ์ ๋ชฉ๋ก์์ ์์ ์ค์ ๋๋ค.
์คํ์ผ ๊ตฌ์ฑ ์์ ์ง์์ ์ด๋ป์ต๋๊น?
์์ initialValues๋ moment
์ค์ ํ์ง ์์ต๋๋ค. https://github.com/react-component/field-form/blob/master/src/interface.ts#L7
Form์ด Excel๊ณผ ๊ฐ์ ๋ํ ํผ์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ ์ด๋์ง ์์ ๋ฒ์ ์ ์ ๊ณต ํ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
์ํ ๋ฌธ์๋ฅผ ์ผ๋ฐ Ant ๋ฌธ์ ์ฌ์ดํธ๋ก ์ด๋ํ ์ ์์ต๋๊น?
๋ด ๊ณ ์ฉ์ฃผ๋ Netlify ๋๋ฉ์ธ์ ์ฐจ๋จํ๊ณ ๋ค๋ฅธ ์ฌ๋๋ ๊ทธ๋ด ์ ์๋ค๊ณ ๊ฐ์ ํฉ๋๋ค.
๋ฉ๋ด ๋ฐ ๋๋กญ ๋ค์ด์์ ํค๋ณด๋ ์๋์ ์ง์ํ ๊ตฌ์ฒด์ ์ธ ๊ณํ์ด ์์ต๋๊น?
์ํ ๋ฌธ์๋ฅผ ์ผ๋ฐ Ant ๋ฌธ์ ์ฌ์ดํธ๋ก ์ด๋ํ ์ ์์ต๋๊น?
๋ด ๊ณ ์ฉ์ฃผ๋ Netlify ๋๋ฉ์ธ์ ์ฐจ๋จํ๊ณ ๋ค๋ฅธ ์ฌ๋๋ ๊ทธ๋ด ์ ์๋ค๊ณ ๊ฐ์ ํฉ๋๋ค.
์? ใ ใ
Table ์ปดํฌ๋ํธ๋ Element์ Table ์ปดํฌ๋ํธ์ ๋น์ทํด์ง๊ธฐ๋ฅผ ๋ฐ๋ผ๋ฉฐ, ๊ฐ ์ปฌ๋ผ์ ์๋์ผ๋ก ๋๋น๋ฅผ ๋จผ์ ์ค์ ํฉ๋๋ค. ํ ์ด๋ธ์ ํค๋ ๋ฌธ์๋ ์ค ๋ณ๊ฒฝ์ด ์๋ ์ต์ ๋๋น๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์คํฌ๋กค ๊ธฐ๋ฅ๊ณผ ๋์์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ฌ๋ฌ ํญ๋ชฉ์ ์ ํํ๋ฉด ํธ๋ฆฌ ๋ชจ์์ ํ ์ด๋ธ์ด TreeSelect์ ๋น์ทํด์ง๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
Table ์ปดํฌ๋ํธ๊ฐ Element์ Table ์ปดํฌ๋ํธ์ฒ๋ผ ๋ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๊ฐ ์ด์ ์๋์ผ๋ก ๋๋น๊ฐ ๋จผ์ ์ค์ ๋ฉ๋๋ค. ํ ์ด๋ธ ํค๋ ๋ฌธ์๋ฅผ ์ค ๋ฐ๊ฟ์์ด ์ต์ ๋๋น๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ ๊ธฐ ๊ธฐ๋ฅ๊ณผ ์คํฌ๋กค ๊ธฐ๋ฅ์ด ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๋์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ํธ๋ฆฌ ํ ์ด๋ธ์ด ๋ค์ค ์ ํ์ด๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค., TreeSelect์ ์ ์ฌ ํ ์ ์์ต๋๋ค.
v4 ๋๋ v5๋ก ์ฌ์ฉ์ ์ ์์ ๋ํด ๋ญ๊ฐ๋ฅผ ํ ๊ฐ๋ฅ์ฑ์ด ์์ต๋๊น? MaterialUI๋ ํจ์ฌ ๋ ์๋ฒฝํ๊ธฐ ๋๋ฌธ์ AntD๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ ๊ฒฝ์ฐ์๋ ๋ด๊ฐ ์์
์ค์ธ ํ๋ก์ ํธ์ ๊ณ์ ์ ํํ๋๋ก ์ฌ์ฉ์ ์ ์ํ๊ธฐ๊ฐ ํจ์ฌ ์ฝ์ต๋๋ค.
๋ ๋์ ์ฌ์ฉ์ ์ ์๋ฅผ ์ํด ๋ ๋๋กญํ์ญ์์ค.
์์ด์ ์๊ฐ ์ฐ๋ฆฌ์ antd ์น ์ฑ์ ํ ์คํธํ๊ฒ ํ ํ ๊ทธ๋ค์ ์ฌ๊ฐํ ์ ๊ทผ์ฑ ๊ฒฐํจ์ ํ์ธํ๊ณ ๊ฐ๋ฅํ ์ต์ ์ ๋ฑ๊ธ์ ๋ฐ์์ต๋๋ค. ์ฃผ๋ ์ด์ ๋ฅผ ์กฐ์ฌ ํ ๋ ๋ค์ rc ๊ตฌ์ฑ ์์๋ก ์์ฝ๋ฉ๋๋ค.
antd๊ฐ rc ๊ตฌ์ฑ ์์์ ๋ํด ์ผ๋ง๋ ํฐ ๊ฑฐ๋ฒ๋์ค๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ํ์ด 4.0 ๋ฆด๋ฆฌ์ค์ ๋ํด ์ ์์์ด๋ฅผ ์์ ํ ์ ์์ต๋๊น? ์ ๊ทผ์ฑ์ ํญ์ ์๋์ ์ผ๋ก ์ฐ์ ์์๊ฐ ๋ฎ์ง ๋ง ๊ธฐ์ ์ด ์ง์ / ๊ณ ๊ฐ์๊ฒ ์ก์ธ์ค ๊ฐ๋ฅํ ์ฑ์ ์ ๊ณตํ๋๋ก ๋ฒ์ ์ผ๋ก ๊ตฌ์๋จ์ ๋ฐ๋ผ ์ ๊ทผ์ฑ์ ๋ฌด์ํ๊ธฐ๊ฐ ์ ์ ๋ ์ด๋ ค์์ง๋๋ค.
์คํฌ๋ฆฐ ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ ๋ฌด๊ฑฐ์ด ํ ์คํธ์ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํ ๋ฒค์น๋งํน์์ ์ ๋ฅผ ๋ฏฟ์ผ ์ค ์ ์์ต๋๋ค.
MaterialUI๋ ์ฌ์ฉ์ ์ ์๊ฐ ํจ์ฌ ์ฝ์ต๋๋ค.
@murbanowicz ์์ธํ
@abenhamdine ๋ฌธ์ ์์ด์!
MUI์๋ ์ฑ์ ๋ํํ๋ ThemeProvider
๊ฐ ์์ผ๋ฉฐ TypeScript์ ์
๋ ฅ ๋ JS ๊ฐ์ฒด๋ก ์ ์ฒด ํ
๋ง๋ฅผ ๊ตฌ์ฑํ๋ฏ๋ก ์์
ํ๊ธฐ๊ฐ ๋๋ฌด ์ข์ต๋๋ค.
AntD์์ ์ฌ์ฉ์ ์ ์ํ๋ ค๋ฉด LESS ๋๋ SASS (์ผ๋ถ ํ๋ฌ๊ทธ์ธ ํฌํจ)๋ฅผ ์๋ง์ผ๋ก ๋ง๋ค์ด์ผํ๋ฏ๋ก ๋ค๋ฅธ deps ๋ฑ์ ์ ์งํด์ผํ๋ฉฐ ๊ตฌ์ฑ ์์ ์์ค๋ฅผ ํตํด ํน์ ๊ตฌ์ฑ ์์ ๋ฑ์ ๋ํด ๋ณ๊ฒฝํ๋ ค๋ ๋ณ์๋ฅผ ์ฐพ์์ผํฉ๋๋ค.
๋ํ ์๋ฒ ๋ฑ์์ ์ฝ๊ฒ ์ป์ ์์๋ JS ๊ฐ์ฒด๋ฅผ ์ ํํ๋ ๊ฒ๋ง์ผ๋ก๋ MUI๋ก ์ฝ๊ฒ ๋ฐํ์์์ ํ
๋ง๋ฅผ ๋ณ๊ฒฝํ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก AntD ๋ฐ MUI์ ์ฌ์ฉ์ ์ ์๋ฅผ ์ฐพ์ ๋ MUI์ ๋ํ ์ฌ์ด ์๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค. ์๋ํ๋ฉด ๊ฐ๋จํ๊ธฐ ๋๋ฌธ์ ๋งํ ๊ฒ์ด ์๊ธฐ ๋๋ฌธ์ด์ง๋ง AntD ์ฌ์ฉ์ ์ ์๋ฅผ ์ํด Google์ ๊ฒ์ ํ ๋ ๋ง์ ํดํค ์๋ฃจ์ ๋ฑ์ ์ฐพ์ต๋๋ค.
๋๋ ์์ฑํ๊ณผ ๋ง์ ํ๋ฅญํ ๊ตฌ์ฑ ์์์ ๋ํด AntD๋ฅผ ์ข์ํ์ง๋ง ์ฌ์ฉ์ ์ ์๋ ์ ๋ง ์ข์ง ์์ผ๋ฉฐ ๋ด ๊ฒฝํ๊ณผ ๋ค๋ฅธ ๊ฐ๋ฐ์์์ ๋ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ก๋๋งต์ ํต์ฌ ํฌ์ธํธ ์ค ํ๋ ์ฌ์ผํฉ๋๋ค.
@abenhamdine ๋ฌธ์ ์์ด์!
MUI์๋ ์ฑ์ ๋ํํ๋ThemeProvider
๊ฐ ์์ผ๋ฉฐ TypeScript์ ์ ๋ ฅ ๋ JS ๊ฐ์ฒด๋ก ์ ์ฒด ํ ๋ง๋ฅผ ๊ตฌ์ฑํ๋ฏ๋ก ์์ ํ๊ธฐ๊ฐ ๋๋ฌด ์ข์ต๋๋ค.AntD์์ ์ฌ์ฉ์ ์ ์ํ๋ ค๋ฉด LESS ๋๋ SASS (์ผ๋ถ ํ๋ฌ๊ทธ์ธ ํฌํจ)๋ฅผ ์๋ง์ผ๋ก ๋ง๋ค์ด์ผํ๋ฏ๋ก ๋ค๋ฅธ deps ๋ฑ์ ์ ์งํด์ผํ๋ฉฐ ๊ตฌ์ฑ ์์ ์์ค๋ฅผ ํตํด ํน์ ๊ตฌ์ฑ ์์ ๋ฑ์ ๋ํด ๋ณ๊ฒฝํ๋ ค๋ ๋ณ์๋ฅผ ์ฐพ์์ผํฉ๋๋ค.
๋ํ ์๋ฒ ๋ฑ์์ ์ฝ๊ฒ ์ป์ ์์๋ JS ๊ฐ์ฒด๋ฅผ ์ ํํ๋ ๊ฒ๋ง์ผ๋ก๋ MUI๋ก ์ฝ๊ฒ ๋ฐํ์์์ ํ ๋ง๋ฅผ ๋ณ๊ฒฝํ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.๊ธฐ๋ณธ์ ์ผ๋ก AntD ๋ฐ MUI์ ์ฌ์ฉ์ ์ ์๋ฅผ ์ฐพ์ ๋ MUI์ ๋ํ ์ฌ์ด ์๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค. ์๋ํ๋ฉด ๊ฐ๋จํ๊ธฐ ๋๋ฌธ์ ๋งํ ๊ฒ์ด ์๊ธฐ ๋๋ฌธ์ด์ง๋ง AntD ์ฌ์ฉ์ ์ ์๋ฅผ ์ํด Google์ ๊ฒ์ ํ ๋ ๋ง์ ํดํค ์๋ฃจ์ ๋ฑ์ ์ฐพ์ต๋๋ค.
๋๋ ์์ฑํ๊ณผ ๋ง์ ํ๋ฅญํ ๊ตฌ์ฑ ์์์ ๋ํด AntD๋ฅผ ์ข์ํ์ง๋ง ์ฌ์ฉ์ ์ ์๋ ์ ๋ง ์ข์ง ์์ผ๋ฉฐ ๋ด ๊ฒฝํ๊ณผ ๋ค๋ฅธ ๊ฐ๋ฐ์์์ ๋ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ก๋๋งต์ ํต์ฌ ํฌ์ธํธ ์ค ํ๋ ์ฌ์ผํฉ๋๋ค.
๋ช ํํ๊ณ ์ ํํ ์ค๋ช , thx!
@abenhamdine ๋ฌธ์ ์์ด์!
MUI์๋ ์ฑ์ ๋ํํ๋ThemeProvider
๊ฐ ์์ผ๋ฉฐ TypeScript์ ์ ๋ ฅ ๋ JS ๊ฐ์ฒด๋ก ์ ์ฒด ํ ๋ง๋ฅผ ๊ตฌ์ฑํ๋ฏ๋ก ์์ ํ๊ธฐ๊ฐ ๋๋ฌด ์ข์ต๋๋ค.AntD์์ ์ฌ์ฉ์ ์ ์ํ๋ ค๋ฉด LESS ๋๋ SASS (์ผ๋ถ ํ๋ฌ๊ทธ์ธ ํฌํจ)๋ฅผ ์๋ง์ผ๋ก ๋ง๋ค์ด์ผํ๋ฏ๋ก ๋ค๋ฅธ deps ๋ฑ์ ์ ์งํด์ผํ๋ฉฐ ๊ตฌ์ฑ ์์ ์์ค๋ฅผ ํตํด ํน์ ๊ตฌ์ฑ ์์ ๋ฑ์ ๋ํด ๋ณ๊ฒฝํ๋ ค๋ ๋ณ์๋ฅผ ์ฐพ์์ผํฉ๋๋ค.
๋ํ ์๋ฒ ๋ฑ์์ ์ฝ๊ฒ ์ป์ ์์๋ JS ๊ฐ์ฒด๋ฅผ ์ ํํ๋ ๊ฒ๋ง์ผ๋ก๋ MUI๋ก ์ฝ๊ฒ ๋ฐํ์์์ ํ ๋ง๋ฅผ ๋ณ๊ฒฝํ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.๊ธฐ๋ณธ์ ์ผ๋ก AntD ๋ฐ MUI์ ์ฌ์ฉ์ ์ ์๋ฅผ ์ฐพ์ ๋ MUI์ ๋ํ ์ฌ์ด ์๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค. ์๋ํ๋ฉด ๊ฐ๋จํ๊ธฐ ๋๋ฌธ์ ๋งํ ๊ฒ์ด ์๊ธฐ ๋๋ฌธ์ด์ง๋ง AntD ์ฌ์ฉ์ ์ ์๋ฅผ ์ํด Google์ ๊ฒ์ ํ ๋ ๋ง์ ํดํค ์๋ฃจ์ ๋ฑ์ ์ฐพ์ต๋๋ค.
๋๋ ์์ฑํ๊ณผ ๋ง์ ํ๋ฅญํ ๊ตฌ์ฑ ์์์ ๋ํด AntD๋ฅผ ์ข์ํ์ง๋ง ์ฌ์ฉ์ ์ ์๋ ์ ๋ง ์ข์ง ์์ผ๋ฉฐ ๋ด ๊ฒฝํ๊ณผ ๋ค๋ฅธ ๊ฐ๋ฐ์์์ ๋ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ก๋๋งต์ ํต์ฌ ํฌ์ธํธ ์ค ํ๋ ์ฌ์ผํฉ๋๋ค.
Antd ๋ฅผ ์ฌ์ฉํ ์ฌ์ฉ์ ์ ์๊ฐ ์ฝ๊ฐ ์ง์ ๋ถํด์ง ์ ์๋ค๋ moment
์ ๊ฐ์ ๋ง์ ์ธ๋ถ ์ข
์์ฑ์ผ๋ก ์ธํด ๋ฒ๋ค ํฌ๊ธฐ๊ฐ ์ปค์ง) ),ํ์ง๋ง ์ค๋ซ๋์ MUI๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ Antd๊ฐ ํจ์ฌ ๋ ์ปค์คํฐ๋ง์ด์ง์ด ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ ์๊ฒ๋์์ต๋๋ค.
MUI์ ์ ๋ฆด๋ฆฌ์ค์ ๋ํ ์ต์ ์ ๋ณด๋ ์๋์ง๋ง ๋ง์ง๋ง์ผ๋ก ํ์ธํ์ ๋ ๊ฐ๋ฐ์๊ฐ classNames
์ถ๊ฐํ์ง ์์ ๊ฒฝ์ฐ MUI๊ฐ styled-components
์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์ ์ง์ ํ ์์๋ ๊ตฌ์ฑ ์์๊ฐ ์ผ๋ถ์์์ต๋๋ค classNames
์ด๋์์๋ ๊ตฌ์ฑ ์์์ ์ ํํ className์ ์ ํํ๊ณ ์์ ์ ์คํ์ผ๋ก ์ฌ์ ์ ํ ์๋ ์์ต๋๋ค.
ํ
๋ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ง์ ์ฌ์ฉํ๊ธฐ์๋ ๋ฉ์ง์ง๋ง ๋์์ธ ์์คํ
์ ์คํ์ผ์ ์ ์ฉํ๋ ค๋ ๊ฒฝ์ฐ MUI๊ฐ ๋งค์ฐ ์ง์ ๋ถํ๋ฉฐ ๋๋ก๋ ๋ถ๊ฐ๋ฅํ๊ธฐ๋ํฉ๋๋ค.)
๊ทธ๋ฌ๋ ์ฌ์ ํ antd
๋ ์ฌ์ฉ์ ์ ์ ๊ฒฝํ์ ๋ ์ฝ๊ฒ ๋ง๋ค๊ธฐ ์ํด ์ค์ ๋ก ์ฝ๊ฐ์ ์์
์ด ํ์ํฉ๋๋ค.)
@filipjnc ,
์ ๊ทผ์ฑ์ ํฅ์์ํค๋ rc-select
์ถ์ ์ํ ๋ฒ์ . ๊ทธ๊ฒ์ ํ
์คํธํ๋ ๋ฐ ๋์์ ์ค ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ v4 ์ค๋น ๋ธ๋์น๋ฅผ ์ฌ์ฉํ์ฌ ์๋จ์์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
rc-tabs
์ ๊ฒฝ์ฐ ์ต์ฐ์ ์์๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ๋์ค์ ๊ฐ์ ํ ๊ฒ์
๋๋ค.
@zombieJ ์๊ฒ ์ต๋๋ค . rc-select
์ํ๋ฅผ ์ดํด ๋ณด๊ฒ ์ต๋๋ค.
rc-tabs
์ด ์ฐ์ ์์๋ ์๋์ง๋ง ์ ๊ทผ์ฑ ํ
์คํธ ๊ฒฐ๊ณผ์์ ๊ฐ์ฅ ์ค์ํ ํฌ์ธํธ๋ฅผ ์์ ํ๋ ํ ๋ฆฌํ์คํธ๋ฅผ ํ์ธํด ์ฃผ์๊ฒ ์ต๋๊น?
์ฌ๊ธฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ํ์ฌ ์์ด์ฝ ๋ฆฌํผ ๋ฐฉ์์ ๋ฐ๋ฅด๋ฉด antd ์ปดํฌ๋ํธ ํํ์ ์์ด์ฝ์ด ์๋ค๋ฉด
์์์ด ๋์์ ๋์
๋๋ฉด ๋ณ์นญ ์ค ํ๋๋ง ์ง์ ํ ์ ์์ต๋๋ค.
@zkwolf ์, ์์ด์ฝ ์ด๋ฆ์ ๋ณ๊ฒฝํฉ๋๋ค : https://github.com/ant-design/ant-design-icons/pull/118
cc @vagusX
์ง์์ ์ธ Form re-rendering
https://next.ant.design์์ ๊ตฌ์ฑ ์์๋ ๊ตฌ์ฑ ์์ ์ฌ์ด๋ ๋ฐ์์ ์ํ๋ฒณ์์ผ๋ก ์ ๋ ฌ๋์ง ์์ต๋๋ค.
์์๋ค์ํผ, ant-design์ ์ ๊ทผ์ฑ ์ธก๋ฉด์์ ์ค์ ๋ก ์ ์๋ํ์ง ์์ต๋๋ค. ์ด๊ฒ์ ๋๋ถ๋ถ์ ์ฌ๋๋ค์๊ฒ ํ๋ฉด์ ์ผ๋ก ๋๋ฌด ๋์ ๋์ง ์์ง๋ง ๋ ๊น์ด ์ ์ ํ ๋ ํฐ ๋ฌธ์ ์ ๋๋ค. ant-design์ ์ ์๊ฐ ๋งค์ฐ ๋์๊ฒ ์ฌ๊ธฐ์์ ํ์ธํ์ญ์์ค : https://darekkay.com/blog/accessible-ui-frameworks/
์ข์ ์์์ ์ ๊ฐ ant-design์ ๋ง์ด ์ข์ํ๊ณ ์ํฐํ๋ผ์ด์ฆ ํ๋ก์ ํธ์ ๋ ๋ง์ด ์ฌ์ฉํ๊ณ ์ถ๊ธฐ ๋๋ฌธ์ ์ ๋ชฉํ๋ ๋ชฉ๋ก์ ๋งจ ์์ ์ฌ๋ฆฌ๋ ๊ฒ์ ๋๋ค.
๋ํ์ฌ์์ ๋ ์ผ์ ๊ณ ๊ฐ์ ์ํด ์ํฐํ๋ผ์ด์ฆ ์ฑ ์ค ํ๋๋ฅผ ํ ์คํธํ๋๋กํ์ต๋๋ค (๋๊ธฐ์ ์์๋ ์ ๊ทผ์ฑ์ด ํฐ ์ฃผ์ ์). ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ชจ๋ ์ ๊ทผ์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋จผ์ rc-tabs
์ ์ ํํ์ต๋๋ค. ๊ณง ์ถ์ ๋ ์์ ์
๋๋ค (https://github.com/react-component/tabs/pull/218). ๊ทธ๋ฌ๋ ๊ฐ์ฅ ๊ฑฑ์ ๋๋ ๊ฒ์ rc-select
, ํนํ ์ฝค๋ณด ๋ฐ์ค (์๋ ์์ฑ) ๋ถ๋ถ์
๋๋ค. ์ฝค๋ณด ๋ฐ์ค๋ ํ๋ฉด ํ๋
๊ธฐ ์ ๊ทผ์ฑ์ ๊ฐ์ฅ ๊น๋ค๋ก์ด ์ธก๋ฉด ์ค ํ๋์ด๋ฉฐ ์๋ชป ์ดํดํ๊ธฐ ์ฝ์ต๋๋ค. ๋ชจ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด ์๋ฆฌ์ ์์ฑ์ ๋ํ ์ฝ๊ฐ์ ์กฐ์ ๋ฟ๋ง ์๋๋ผ ๋๋์ ์ธ ์ ๊ฒ์ด ํ์ํฉ๋๋ค.
์คํํ๊ธฐ ์ ์ ์ ํ๋ฆฌ์ผ์ด์
์์ ๋น ๋ฅด๊ฒ ์์ ํ๊ธฐ ์ํด ant-design์ Select ๋ฐ AutoComplete ( rc-select
)๋ฅผ https://github.com/downshift-js/downshift๋ฅผ ๊ธฐ๋ฐ์ผ๋กํ๋ ๋ด ๊ตฌ์ฑ ์์๋ก ๋์ฒดํ์ต๋๋ค
๊ทธ๋์ ๋๋ฐ์ ์ธ ์ง๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค : ๋ ์ธ๊ธฐ ์๊ณ ์์ ํ downshift
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ํด ์ด์ค ์์
์ํ์ง ์๊ณ rc-select
๋ฅผ ๋ ์ด์ ์ฌ์ฉํ์ง ์์๊น์? ํ์์ ์๊ฐ์ ์ ์ฝํ๊ณ ์คํ ์์ค ์์ฅ์์ ์ข์ ๋์์ด์๋ ๋ค๋ฅธ ํต์ฌ ๊ตฌ์ฑ ์์๋ฅผ ์์ฑํ๋ ๋ฐ ์ง์คํ ์ ์์ต๋๋ค.
์ด ์์ด๋์ด๋ @filipjnc ๋์๊ฒ ํ์์ ์ผ๋ก
4.0 ๋ฆด๋ฆฌ์ค์์ ๋ ๋ง์ ์์ ๊ฐ์ ์๋ณด๊ณ ์ถ์ต๋๋ค. ํนํ, ๋ฌธ์์๋ ๋์ ๋ณด๋ ๋ฐ ๊ธฐํ ๋ฐ์ดํฐ๊ฐ ๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋งค์ฐ ์ ์ฉํ "๋ฐ์ดํฐ ์๊ฐํ ์์ ํ (์ถ์ ์์ )"๊ฐ ์ธ๊ธ๋์ด ์์ต๋๋ค. ๋ฐ๋ปํ๊ณ ์ฐจ๊ฐ์ด ํ์์ ๋์ฑ ์์ง๋ ฅ์๋ ์์ ํ๋ ํธ๋ฅผ ๋ง๋๋๋ฐ๋ ๋์์ด๋ฉ๋๋ค. ๋ํ ์ ๊ทผ์ฑ์ ์ํด ์์ ๋๋น๋ฅผ ์์ ํ ์์๋ ์ข์ ๊ธฐํ์ ๋๋ค (@filipjnc์์ ์ธ๊ธ ํจ). ์ข์ ์ผ์ ๊ณ์ํ์ธ์ ๐
์์๋ค์ํผ, ant-design์ ์ ๊ทผ์ฑ ์ธก๋ฉด์์ ์ค์ ๋ก ์ ์๋ํ์ง ์์ต๋๋ค. ์ด๊ฒ์ ๋๋ถ๋ถ์ ์ฌ๋๋ค์๊ฒ ํ๋ฉด์ ์ผ๋ก ๋๋ฌด ๋์ ๋์ง ์์ง๋ง ๋ ๊น์ด ์ ์ ํ ๋ ํฐ ๋ฌธ์ ์ ๋๋ค. ant-design์ ์ ์๊ฐ ๋งค์ฐ ๋์๊ฒ ์ฌ๊ธฐ์์ ํ์ธํ์ญ์์ค : https://darekkay.com/blog/accessible-ui-frameworks/
์ข์ ์์์ ์ ๊ฐ ant-design์ ๋ง์ด ์ข์ํ๊ณ ์ํฐํ๋ผ์ด์ฆ ํ๋ก์ ํธ์ ๋ ๋ง์ด ์ฌ์ฉํ๊ณ ์ถ๊ธฐ ๋๋ฌธ์ ์ ๋ชฉํ๋ ๋ชฉ๋ก์ ๋งจ ์์ ์ฌ๋ฆฌ๋ ๊ฒ์ ๋๋ค.
๋ํ์ฌ์์ ๋ ์ผ์ ๊ณ ๊ฐ์ ์ํด ์ํฐํ๋ผ์ด์ฆ ์ฑ ์ค ํ๋๋ฅผ ํ ์คํธํ๋๋กํ์ต๋๋ค (๋๊ธฐ์ ์์๋ ์ ๊ทผ์ฑ์ด ํฐ ์ฃผ์ ์). ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs 2. Color contrasts in many places 3. Keyboard navigation in some places
๋ชจ๋ ์ ๊ทผ์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋จผ์
rc-tabs
ํ์ต๋๋ค. ๊ณง ์ถ์ ๋ ์์ ์ ๋๋ค ( react-component / tabs # 218 ). ํ์ง๋ง ๊ฐ์ฅ ๊ฑฑ์ ๋๋ ๊ฒ์rc-select
, ํนํ ์ฝค๋ณด ๋ฐ์ค (์๋ ์์ฑ) ๋ถ๋ถ์ ๋๋ค. ์ฝค๋ณด ๋ฐ์ค๋ ํ๋ฉด ํ๋ ๊ธฐ ์ ๊ทผ์ฑ์ ๊ฐ์ฅ ๊น๋ค๋ก์ด ์ธก๋ฉด ์ค ํ๋์ด๋ฉฐ ์๋ชป ์ดํดํ๊ธฐ ์ฝ์ต๋๋ค. ๋ชจ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด ์๋ฆฌ์ ์์ฑ์ ๋ํ ์ฝ๊ฐ์ ์กฐ์ ๋ฟ๋ง ์๋๋ผ ๋๋์ ์ธ ์ ๊ฒ์ด ํ์ํฉ๋๋ค.์คํํ๊ธฐ ์ ์ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋น ๋ฅด๊ฒ ์์ ํ๊ธฐ ์ํด ant-design์ Select ๋ฐ AutoComplete (
rc-select
)๋ฅผ https://github.com/downshift-js/downshift๋ฅผ ๊ธฐ๋ฐ์ผ๋กํ๋ ๋ด ๊ตฌ์ฑ ์์๋ก ๋์ฒดํ์ต๋๋ค๊ทธ๋์ ๋๋ฐ์ ์ธ ์ง๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค : ๋ ์ธ๊ธฐ ์๊ณ ์์ ํ
downshift
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ํด ์ด์ค ์์ ์ํ์ง ์๊ณrc-select
๋ฅผ ๋ ์ด์ ์ฌ์ฉํ์ง ์๊ฒ ์ต๋๊น? ํ์์ ์๊ฐ์ ์ ์ฝํ๊ณ ์คํ ์์ค ์์ฅ์์ ์ข์ ๋์์ด์๋ ๋ค๋ฅธ ํต์ฌ ๊ตฌ์ฑ ์์๋ฅผ ์์ฑํ๋ ๋ฐ ์ง์คํ ์ ์์ต๋๋ค.
๋๋ ๋ค์ด ์ํํธ์ ๋ํด ๊ทธ๋ ๊ฒ ์ด์ฑ์ ์ด์ง ์์ ๊ฒ์
๋๋ค. https://github.com/downshift-js/downshift/issues/730 ์ฐธ์กฐ
์ผ๋ถ ์ฌ์ฉ์์๊ฒ๋ ์ ๊ทผ์ฑ์ด ์ค์ํ์ง๋ง ๋ ๋ง์ ์ฌ์ฉ์์๊ฒ๋ ์ฑ๋ฅ์ด ์ค์ํฉ๋๋ค.
ํ ์ด๋ธ์ด ๋๊ธฐ์ด์ ์์ผ๋ฉฐ ํ์ฌ ๊ฐ์ ๋ชฉ๋ก์์ ์์ ์ค์ ๋๋ค.
์๋
ํ์ธ์, @zombieJ
์์ฝ ๋ฐ๋ฅ ๊ธ์ ์งํ ์ํฉ์ด ์์ต๋๊น?
@ alexchen1875 ,
์ ๋ผ์ดํ ์ฌ์ดํด ์ฝ๋ ์
๋ฐ์ดํธ๋ฅผ ๋ณด๋ฅ ์ค์
๋๋ค. ํ
์ด๋ธ์ ์๋ฃ ํ ๋ค์์
๋๋ค :)
4.0 ์ผ๋ถ ์ํ ๋งค๊ฐ ๋ณ์๋ฅผ ์นด๋ฉ ์ผ์ด์ค๋ก ๋ณ๊ฒฝํ ์ ์์ต๋๊น? ์๋ฅผ ๋ค์ด, Input.TextArea
์์ autosize
์ผ๋ก ๋ณ๊ฒฝ autoSize
?
React์์ ๋ค์ดํฐ๋ธ HTML ํ๊ทธ์ ์ํ์ ๋ชจ๋ <input autoComplete />
์ ๊ฐ์ ์นด๋ฉ ์ผ์ด์ค์
๋๋ค.์ด autosize
ํญ์ ๋ถ์ผ์น ํด ๋ณด์
๋๋ค. . .
3.x์์ ๋ณ๊ฒฝ ๋ ์ ์์ผ๋ฉฐ ์๋ ์ฌ์ฉ์ ํธํ๋๊ณ ํ๊ธฐ ๋ ์ ์์ต๋๋ค. @ jinliming2 PR์ ๊ด์ฌ์ด ์์ต๋๊น?
์ ๊ทผ์ฑ์ +1. ๋ถ๋!
ํด๋ฆฌ์ด ์์ด์ฝ์ ํฌ๊ธฐ ๋ฌธ์ ๋ก ๋งํ๋ฉด ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ์์ด์ฝ์ 12px, datepicker๋ 14px ์ธ ๊ฒ ๊ฐ์ต๋๋ค. datepicker๋ ์์ด์ฝ ์ค์์น๊ฐ 14px์ด๊ธฐ ๋๋ฌธ์ ๋๊น?ํฌ๊ธฐ๋ฅผ ํตํฉ ํ ๊ณํ์ด ์์ต๋๊น?
@zombieJ ๋ ํ ์ด๋ธ์ ๋ค์ค ์ด ์ ๋ ฌ ๊ธฐ๋ฅ์ ์ถ๊ฐ ํ ๊ณํ์ ๋๋ค.
pls๋ ์์ด์ ์ฐ๊ธฐ
๋๋ฌด ํฐ ๋ชจ๋ฉํธ ํฌ๊ธฐ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๊น?
๋๋ฌด ํฐ ๋ชจ๋ฉํธ ํฌ๊ธฐ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๊น?
๋จผ์ dayjs๋ฅผ ์ฌ์ฉํด๋ณด์ญ์์ค
์์ด๋ก ํ ์ ์๋์? ์ธ๊ตญ์ธ์ ๊ฐ์ ์ ๊ณ ๋ คํด๋ณด์ธ์. ์ ๋ ํญ์ ๊ตฌ๊ธ ๋ฒ์ญ์ํฉ๋๋ค. ๋ฌธ๋ฒ์ด ํ์ค์ด ์๋ ๊ฒ์ ์ค์ํ์ง ์์ต๋๋ค. ๋จ์ด๋ ๊ทธ๋ค์๊ฒ ์ดํด ๋ ์ ์์ต๋๋ค.
๋ฟก๋ฟก
์ธ๊ตญ์ธ๋ค์ด์ด ๋ ํฌ๋ฅผ ํ๋ก์ฐํ๊ณ ์๋ค๊ณ ์๊ฐ ํ์
จ๋์? ์ํ๊น๊ฒ๋ Google ๋ฒ์ญ์ ๊ทํ๊ฐ ๋งํ๋ ๋ด์ฉ์ ์ดํดํ๋ ๋ฐ ์ข์ ๋๊ตฌ๊ฐ ์๋๋๋ค. Ant-Design์ ๋๋ถ๋ถ์ ๊ฐ๋ฐ์์ ์ฌ์ฉ์๋ ์ค๊ตญ์ธ์ด๋ผ๋ ๊ฒ์ ์๊ณ ์์ง๋ง ์ค๊ตญ์ธ์ด ์๋ ์ฌ๋๋ ๊ณ ๋ คํ์ญ๋๊น?
๋ฐ๋ผ์ ์ฐ๋ฆฌ ๋ชจ๋๋ฅผ ์กด์คํ๊ธฐ ์ํด ๊ตญ์ ์ธ์ด ๋ฅผ ์ฌ์ฉํ์๊ธฐ ๋ฐ๋๋๋ค.
์๋
ํ์ธ์,
create-react-app ๋ฐ Typescript์ ํจ๊ป Ant Design 4.0์ ์ฌ์ฉํด๋ณด๊ณ ์ถ์์ต๋๋ค.
https://next.ant.design/docs/react/introduce ์ ์ง์นจ์ ๋ฐ๋์ง๋ง ์๋ํ๋ ์ฑ์ ์ป์ ์ ์์ต๋๋ค.
create-react-app์ ๋ํ ๊ธฐ๋ณธ ์ง์นจ ( import Button from 'antd/es/button';
)์ ๋ฐ๋ผ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
๋ชจ๋ antd / es / button์ ์ฐพ์ ์ ์์ต๋๋ค.
react-app-rewired, customize-cra, babel-plugin-import๋ฅผ ์ถ๊ฐํ๊ณ import๋ฅผ import {Button} from 'antd'
๋ณ๊ฒฝํ๋ฉด ์ค๋ฅ ๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค.
๋ชจ๋ 'antd'์ ๋ํ ์ ์ธ ํ์ผ์ ์ฐพ์ ์ ์์ต๋๋ค.
crea-react-app ๋ฐ typescript๋ก antd4๋ฅผ ์๋์ํค๋ ๋ฐฉ๋ฒ์ ๋ํ ์กฐ์ธ์ ์ฃผ์๊ฒ ์ต๋๊น?
@gynekolog ,
node_modules
์ฌ๋ฐ๋ฅด๊ฒ ์ค์น๋์๋์ง ํ์ธํ์ญ์์ค.
@lvlohammadi ์ํ๊น๊ฒ๋ ์ ์ ๊ฐ์ ์ผ๋ถ ์ค๊ตญ์ธ๋ค์ ์์ด๊ฐ ๋ถ์กฑํ์ง๋ง ์ปค๋ฎค๋ํฐ ์ปค๋ฎค๋์ผ์ด์ ์ ์ฐธ์ฌํ๊ธฐ ์ํด ๊ตญ์ ์ธ์ด๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ์ต์ ์ ๋คํ ๊ฒ์ ๋๋ค.
@gynekolog ,
node_modules
์ฌ๋ฐ๋ฅด๊ฒ ์ค์น๋์๋์ง ํ์ธํ์ญ์์ค.
๋ค๊ฐ ์ณ์. ๋ ๋ฌ๋ฆฐ๋ค
yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"
๋์
yarn add "[email protected]"
๋ถ๋๋ฌ์...
๊ฐ์ฌํฉ๋๋ค.
dropdownMatchSelectWidth on Select component break on alpha ๋ฒ์ , ์ด์ ๋ฒ์ ์์ ์ ํจ ํจ
antd๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ค๋ฉด ๋ฒ์ 3 ๋๋ 4 ์ํ๋ฅผ ์ ํ ํ์๊ฒ ์ต๋๊น? ๋ฒ์ 4๋ ์ผ๋ง๋ "์์ฐ ์ค๋น"์ํ์ ๋๊น? ์ฌ์ ํ 4 ๋ถ๊ธฐ ์ถ์๋ฅผ ๋ชฉํ๋กํ๊ณ ์์ต๋๊น?
antd๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ค๋ฉด ๋ฒ์ 3 ๋๋ 4 ์ํ๋ฅผ ์ ํ ํ์๊ฒ ์ต๋๊น? ๋ฒ์ 4๋ ์ผ๋ง๋ "์์ฐ ์ค๋น"์ํ์ ๋๊น? ์ฌ์ ํ 4 ๋ถ๊ธฐ ์ถ์๋ฅผ ๋ชฉํ๋กํ๊ณ ์์ต๋๊น?
Antd 4๋ ์์ง ์์ฐ ์ค๋น๊ฐ๋์ง ์์์ต๋๋ค. antd 3์ผ๋ก ์์ํด์ผํ๋ฉฐ, ์ ํ์ ์ฌ์์ผํฉ๋๋ค (ํนํ codemod๊ฐ ์์๋๋ก ์ ๊ณต๋๋ ๊ฒฝ์ฐ).
๋ก์ง๊ณผ ๋์คํ๋ ์ด๊ฐ ์์ ํ ๋ถ๋ฆฌ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ์ฆ, ํด๋์ค ์ด๋ฆ์ ์กฐ์ํ๋ ๊ฒ ์ธ์ js๋ ๋ทฐ์ ๋ํด ์๋ฌด๊ฒ๋ํ์ง ์์ต๋๋ค. ์๊ฐ์ ๋ชจ์์ ๋ชจ๋ CSS (LESS)๋ก ์ฒ๋ฆฌํด์ผํฉ๋๋ค. ๋ํ React Components ๋์ Web Components๋ฅผ ์ฌ์ฉํ์ฌ React๊ฐ ์๋ ๊ฐ๋ฐ์๊ฐ ๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ก์ง๊ณผ ๋์คํ๋ ์ด๊ฐ ์์ ํ ๋ถ๋ฆฌ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ์ฆ, ํด๋์ค ์ด๋ฆ์ ์กฐ์ํ๋ ๊ฒ ์ธ์ js๋ ๋ทฐ์ ๋ํด ์๋ฌด๊ฒ๋ํ์ง ์์ต๋๋ค. ์๊ฐ์ ๋ชจ์์ ๋ชจ๋ CSS (LESS)๋ก ์ฒ๋ฆฌํด์ผํฉ๋๋ค. ๋ํ React Components ๋์ Web Components๋ฅผ ์ฌ์ฉํ์ฌ React๊ฐ ์๋ ๊ฐ๋ฐ์๊ฐ ๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ชจ๋ ๊ฒ์ ์ ํํ๋ ค๋์ด ์๊ฐ์ ๋ฌด์๋ฏธํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ ์ค์ํ ๊ฒ์ ์ง์คํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
https://react-select.com ๊ณผ ๊ฐ์ด ์๋ ์์ฑ์์ ๋ค์ค ์ ํ์ ๋ํ ๊ณํ์ด
๋ก์ง๊ณผ ๋์คํ๋ ์ด๊ฐ ์์ ํ ๋ถ๋ฆฌ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ์ฆ, ํด๋์ค ์ด๋ฆ์ ์กฐ์ํ๋ ๊ฒ ์ธ์ js๋ ๋ทฐ์ ๋ํด ์๋ฌด๊ฒ๋ํ์ง ์์ต๋๋ค. ์๊ฐ์ ๋ชจ์์ ๋ชจ๋ CSS (LESS)๋ก ์ฒ๋ฆฌํด์ผํฉ๋๋ค. ๋ํ React Components ๋์ Web Components๋ฅผ ์ฌ์ฉํ์ฌ React๊ฐ ์๋ ๊ฐ๋ฐ์๊ฐ ๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ชจ๋ ๊ฒ์ ์ ํํ๋ ค๋์ด ์๊ฐ์ ๋ฌด์๋ฏธํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ ์ค์ํ ๊ฒ์ ์ง์คํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๋ถ๋ฆฌ๋ณด๋ค ๋ ์๊ธํ ๋ฌธ์ ๋ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ํ์์ CSS๋ ์ผ๋ฐ์ ์ผ๋ก ๋์์ด๋๊ฐ ์ฒ๋ฆฌํ๋ ๋ฐ๋ฉด JS๋ ์ผ๋ฐ์ ์ผ๋ก ์ฝ๋๊ฐ ์ฒ๋ฆฌํฉ๋๋ค. ๋ ๋ค ์คํ์ผ์ ์กฐ์ํ๋๋ก ํ์ฉํ๋ฉด ํผ๋๊ณผ ๋ถํ์ํ๊ฒ ๊ฐ๋ฐ ์๊ฐ์ ์๊ฒ๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด ๋ฉ๋ด๋ฅผ ๊ฐ์ ธ ๊ฐ๋ฉด ๊ธฐ๋ณธ ๋๋น์ ๋์ด๊ฐ JS์ ์ํด ์ค์ ๋ฉ๋๋ค. ๋ฌธ์ ๋ ๋๊ตฐ๊ฐ๊ฐ ์ธ๋ถ ๋ํผ์ ๋๋น ๋๋ ๋์ด๋ฅผ ๋ณ๊ฒฝํ๋ ค๊ณ ํ ๋ ๋ฉ๋ด๊ฐ ํ์ด ๋์ค๊ฑฐ๋ ์ฃผ๋ณ์ ๊ฐ๊ฒฉ์ด ์๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ฅผ ์ํด์๋ ๋์์ด๋์ ์ฝ๋๊ฐ ๋ชจ๋ ์์ ํด์ผํ๋ฉฐ ์ด๋ ๋ค์ด ํ์์ ์๋ฏธํฉ๋๋ค.
๋ํ ๊ตฌ์ฑ ์์๋ก์ ์ฝ๋๊ฐ ์ง๋์น๊ฒ ๋ณต์กํ์ง ์๊ณ ๋ถ๋ฆฌ์ ๋ง์ ๋ ธ๋ ฅ์ด ํ์ํ์ง ์์ง๋ง ๊ฒฐ๊ณผ๋ ์ฌ์ฉ์์ ant.design ํ ์์ฒด์ ์ถ์ ํจ์ฌ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
๋ ๋ค๋ฅธ ์์ ๋ฌธ์ ์ธ Icon์ ๊ธฐ๋ณธ ๊ธ๊ผด ํฌ๊ธฐ ์ธ 14px๊ฐ ์๋ 16px๋ก ๊ธฐ๋ณธ ์ค์ ๋์ด์ผํฉ๋๋ค. ์ด๊ฒ์ Icon์ด ํ ์คํธ์ ๋ณ๋๋ก @ default-icon-size, @ icon-size-lg ๋ฑ๊ณผ ๊ฐ์ ๋ณ์๋ฅผ ์ฌ์ฉํด์ผ ํจ์ ์๋ฏธํฉ๋๋ค. ์ด๊ฒ์ ์ค์ ๋ก ๋ฒ๊ทธ๋ ์๋์ง๋ง ๊ธฐ๋ฅ์ด ์์ค๋์์ต๋๋ค.
๋ฟก๋ฟก
์ธ๊ตญ์ธ๋ค์ด์ด ๋ ํฌ๋ฅผ ํ๋ก์ฐํ๊ณ ์๋ค๊ณ ์๊ฐ ํ์ จ๋์? ์ํ๊น๊ฒ๋ Google ๋ฒ์ญ์ ๊ทํ๊ฐ ๋งํ๋ ๋ด์ฉ์ ์ดํดํ๋ ๋ฐ ์ข์ ๋๊ตฌ๊ฐ ์๋๋๋ค. Ant-Design์ ๋๋ถ๋ถ์ ๊ฐ๋ฐ์์ ์ฌ์ฉ์๋ ์ค๊ตญ์ธ์ด๋ผ๋ ๊ฒ์ ์๊ณ ์์ง๋ง ์ค๊ตญ์ธ์ด ์๋ ์ฌ๋๋ ๊ณ ๋ คํ์ญ๋๊น?
๋ฐ๋ผ์ ์ฐ๋ฆฌ ๋ชจ๋๋ฅผ ์กด์คํ๊ธฐ ์ํด ๊ตญ์ ์ธ์ด ๋ฅผ ์ฌ์ฉํ์๊ธฐ ๋ฐ๋๋๋ค.
์ฌ๋๋ค์ ์์ ์ ์ธ์ด๋ฅผ ์ฌ์ฉํ ์๊ฒฉ์ด ์์ผ๋ฉฐ ๊ทธ๋ ๊ฒํ๋ ๊ฒ์ด ํธ์ํด์ผํฉ๋๋ค. ๋ฒ์ญ์ ์ ๊ณตํ์ฌ ์ต๋ํ ๋ง์ ์ฒญ์ค์ ์ฐธ์ฌ์ํค๋ ค๋ ๋ ธ๋ ฅ์ ์กด์คํ๋ ํ, ๋๊ตฌ๋ ์์ ์ด ๊ฐ์ฅ ํธํ ์ธ์ด๋ฅผ ์ฌ์ฉํ๊ธฐ์ํ ๊ฐ์๋ฅผ ๋ฐ์์๋ ์๋ฉ๋๋ค. ๊ด๋ฆฌ์๊ฐ ์์ฌ ์ํต์ ์ดํดํ๋ ๊ฒ. ์ด ํ๋ก์ ํธ์ ์ฃผ์ ๊ธฐ์ฌ์๋ค์ด ๋ค๋ฅธ ์ธ์ด๊ฐ ์ฐ์ํ๋ค๋ ์์ฌ ์ํต์ ์์ ์ ๋ชจ๊ตญ์ด๋ฅผ ์ฌ์ฉํด์๋ ์๋๋ค๋ ์๊ฐ์ ํฐ๋ฌด๋์๋ ๊ฒ์ ๋๋ค. ๋ฒ์ญ์ ์์ฒญํ๋ ๊ฒ์ ๊ด์ฐฎ์ง ๋ง ์กด์คํฉ๋๋ค. ์๋ต์ด ์ค๊ตญ์ด๋ก๋์ด ์๊ธฐ ๋๋ฌธ์ ๋ฐ๋ํ๋ฅผ ๋์ง๋ ๊ฒ์ ๋น์์ฐ์ ์ด๊ณ ์ ์นํฉ๋๋ค.
์ผ, And Design
๋ฒ์ 4.0์๋ CSS ์์ฑ์ ์ํด _Less_ ๋์ JSS๊ฐ ์์ต๋๊น?
์ผ,
And Design
๋ฒ์ 4.0์๋ CSS ์์ฑ์ ์ํด _Less_ ๋์ JSS๊ฐ ์์ต๋๊น?
AFAIK, ์๋. ๊ทธ๋ฌ๋ ์ ์ ๊ฒ ์ธ์๋ ์คํ์ผ์ด ์ง์ ๋ ๊ตฌ์ฑ ์์ (์ :)๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค. @ tomgao365 ๋ , ์ฐธ์กฐํ์ ๋ฌธ์ ๋ฅผ ์์ฑํฉ๋๋ค. ๋ ์์ ํ๊ฒ ์ ๊ฑฐํ๊ณ JSS๋ฅผ ๋์ ์ฌ์ฉํ๊ธฐ ์ํด ํ๋ฅญํ PR์ ๋ง๋ค๊ณ ์ถ์ต๋๋ค. ๋ฒ์ 3์์ ์์ ํ๋ ๊ฒ์ ์ข์ ์๊ฐ์ด ์๋๋๋ค. ๋ง์ ํ๋ก์ ํธ๊ฐ ๋ฒ์ 3์ ์ฌ์ฉํ์ฌ ๋ง๋ค์ด ์ก๊ธฐ ๋๋ฌธ์ ๋ฒ์ 4์์ JSS๋ฅผ ๊ตฌํํ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค.
๋ํ, @abenhamdine ์๊ฒ ์ฝ๊ฐ์ ์ง๋ฌธ์ด ์์ต๋๋ค. Less ๋์ JSS ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋ํด ์ด๋ป๊ฒ ์๊ฐํ์ญ๋๊น?
๋ํ, @abenhamdine ์๊ฒ ์ฝ๊ฐ์ ์ง๋ฌธ์ด ์์ต๋๋ค. Less ๋์ JSS๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋ํด ์ด๋ป๊ฒ ์๊ฐํ์ญ๋๊น?
๋์ ๋ฐ๋ฅด๋ฉด ์ฃผ์ ์ด์ :
์๋ ํ ๊ฐ์น๊ฐ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ๊ทธ๊ฒ์ ์์ ์ด์์ด ์๋๋๋ค.
@abenhamdine ๋ , Discussion
๋ฐฐ์ง๋ฅผ๋ฐ์ ๋ฌธ์ ๋ฅผ ๋จ๊น๋๋ค. # 19181์
๋๋ค.
๊ทธ๋ฆฌ๊ณ JSS ๊ตฌํ์ ์์ํ๊ณ Less๋ฅผ ์๋ตํ๊ณ ์ถ์ง๋ง ์ ๋ฒ์ ์ด ์ถ์ ๋ ์์ ์ด๋ฉฐ ๋ชจ๋ ๋ ธ๋ ฅ์ด ๋ญ๋น ๋ ๊ฒ ๊ฐ์ต๋๋ค.
moment.js๋ฅผ Day.js ๋๋ ๊ธฐ๋ณธ Date Object์ ๊ฐ์ ๋์์ผ๋ก ๋์ฒดํ๋ ๋ฐฉ๋ฒ์ ๋ํ ํ ๋ก ์ ๋ณด๊ฒ๋์ด ๊ธฐ์ฉ๋๋ค https://github.com/ant-design/ant-design/issues/19738
๋ฒ์ 4์์ create-react-app์ ์ฌ์ฉํ์ฌ ์์ ํ ๋ง๋ฅผ ๋ณ๊ฒฝํ๋ ๋ ์ฌ์ด ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
๋ด๊ฐ ๋ ๋ณ์ ์์ ์ ํ์์์ด ํ ๋ง๋ฅผ ๋ฌด์ํ๋ ๊ฒ์ด ์ข์ ๊ฒ์ด๋ผ๊ณ @flashtheman์ ๋์ - ๊ฐ์ ์์ ThemeProvider ๊ฐ์, ์ฆ ๋ญ๊ฐ๋ฅผ : https://emotion.sh/docs/theming
jQuery ์๋์ ํ
๋ง ์ค์ ์ ๋งค์ฐ ์ธ๊ธฐ๊ฐ ์์ผ๋ฉฐ ์ฌ์ฉ์๋์ด๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ดํฉ๋๋ค.
2 ๋
๋๊ฒ ํ๋ก๋์
ํ๊ฒฝ์์ ํ
๋ง๋ฅผ ์ฝ๊ฒ ์์ ํ ์์๋ ๋ฐฉ๋ฒ์ ๊ธฐ๋ค๋ ธ์ต๋๋ค.
์ ๋ฒ์ ์ ์์ด์ฝ ๊ตฌ์ฑ ์์์์ ์์ด์ฝ์ด ๋์ ์ผ๋ก ๊ฒฐ์ ๋๋ฉด ์ ๋ฒ์ ์์๋ ์ด๋ป๊ฒ ์ฒ๋ฆฌํด์ผํฉ๋๊น? ๋น๋ถ๊ฐ์ require + variable ๋ฌธ์์ด ๋ง ์ฌ์ฉํ ์ ์๋ค๊ณ ์๊ฐํ ์ ์์ต๋๋ค. type ์์ฑ ๋ง ๋ณ์๋ก ์ฑ์์ผํฉ๋๋ค. ์ฒ๋ฆฌ ํ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
๊ตฌ๊ธ ๋ฒ์ญ : ์์ด์ฝ ๊ตฌ์ฑ ์์์ ์ ๋ฒ์ ์์ ์์ด์ฝ์ด ๋์ ์ผ๋ก ๊ฒฐ์ ๋๋ฉด ์ ๋ฒ์ ์์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋น๋ถ๊ฐ require + ๋ณ์ ๋ฌธ์์ด ๋ง ์๊ฐํ ์ ์์ผ๋ฉฐ ์๋๋ ์ฑ์ฐ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค. ๋ณ์๊ฐ์๋ ์ ํ ์์ฑ, ๋ค๋ฅธ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ฌด์์
๋๊น?
์ ๋ฒ์ ์ ์์ด์ฝ ๊ตฌ์ฑ ์์์์ ์์ด์ฝ์ด ๋์ ์ผ๋ก ๊ฒฐ์ ๋๋ฉด ์ ๋ฒ์ ์์๋ ์ด๋ป๊ฒ ์ฒ๋ฆฌํด์ผํฉ๋๊น? ๋น๋ถ๊ฐ์ require + variable ๋ฌธ์์ด ๋ง ์ฌ์ฉํ ์ ์๋ค๊ณ ์๊ฐํ ์ ์์ต๋๋ค. type ์์ฑ ๋ง ๋ณ์๋ก ์ฑ์์ผํฉ๋๋ค. ์ฒ๋ฆฌ ํ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
๊ตฌ๊ธ ๋ฒ์ญ : ์์ด์ฝ ๊ตฌ์ฑ ์์์ ์ ๋ฒ์ ์์ ์์ด์ฝ์ด ๋์ ์ผ๋ก ๊ฒฐ์ ๋๋ฉด ์ ๋ฒ์ ์์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋น๋ถ๊ฐ require + ๋ณ์ ๋ฌธ์์ด ๋ง ์๊ฐํ ์ ์์ผ๋ฉฐ ์๋๋ ์ฑ์ฐ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค. ๋ณ์๊ฐ์๋ ์ ํ ์์ฑ, ๋ค๋ฅธ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
React ๋ฌธ์์์ ๊ถ์ฅํ๋ https://github.com/smooth-code/loadable-components๋ฅผ ์ฌ์ฉํด๋ณด์ญ์์ค.
๊ณต์ ๋ฒ์ ์ ์ธ์ ์ถ์ ๋๋์?
4.0 ํ ์ด๋ธ์ ํผ๋ฒ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๊น?
@ afc163- ๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ด ์ฌ๋๋ค์ด ์ ๋ฆด๋ฆฌ์ค์์ ์ํ๋ 1 ์ ๋ฌธ์ ์ธ ๊ฒ ๊ฐ์ต๋๋ค. ์ด ์์ ์ ํ ์ฌ๋์ด ์์ต๋๊น? ์ด ์ผ์ํ๊ณ ๋์์ ๋๋ฆฌ๊ฒ ์ต๋๋ค. ์ด๋ ต์ง ์๊ณ ์ฝ๊ฐ์ ๋ ธ๋ ฅ์ด ํ์ํฉ๋๋ค. ๋๋ ๋ํ Ant Design ์์์ด ๋ฌธ์ ๋ก ๊ณ ํต๋ฐ์ต๋๋ค. ํด๊ฒฐํ๊ณ ์ถ์ต๋๋ค.
๊ตฌ์ฑ ์์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ์ํ ์์
์ด ์์ต๋๊น?
ํ ๋ฒ๋ง : ๊ฐ๋จํ Button
-์ ์ฒด antd.css ํ์ผ์ ๊ฐ์ ธ์์ผํ๋ ์ด์ ๋ ๋ฌด์์
๋๊น ??
๊ตฌ์ฑ ์์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ์ํ ์์ ์ด ์์ต๋๊น?
ํ ๋ฒ๋ง : ๊ฐ๋จํButton
-์ ์ฒด antd.css ํ์ผ์ ๊ฐ์ ธ์์ผํ๋ ์ด์ ๋ ๋ฌด์์ ๋๊น ??
@ avalanche1 https://ant.design/docs/react/introduce#Usage ๋ฅผ
๋ชจ๋ํ ๋ antd ์ฌ์ฉ
๋์๊ฒ ์
๋ก๋ ๊ตฌ์ฑ ์์๋ ํ์ฌ ์ฌ์ฉ์ ์ง์ ๋ชฉ๋ก ๋ ๋๋ง ์ง์์ ์ถฉ๋ถํ์ง ์์ต๋๋ค.
๋ํ ์
๋ก๋ ์งํ๋ฅ ์ ๋ฐฑ๋ถ์จ์ ๋ถ๊ณผํ๋ฉฐ ์ค์๊ฐ ์๋ ํ์๋ฅผ ์ง์ํ๊ธฐ ์ํด ํ์ฅํ๋ ๊ฒ์ ํธ๋ฆฌํ์ง ์์ต๋๋ค.
ํํ
์๋ ํ์๋ฅผ ์ํ๋ ๊ฒฝ์ฐ onChange๋ ์ ๋ก๋ ๋ ํ์ผ์ ๋ฐฑ๋ถ์จ์ ๋ฐํํ์ต๋๋ค. ์ ๋ก๋ ์๋๋ฅผ ๊ณ์ฐํ ์ ์์ต๋๋ค.
@ Z3SA https://caniuse.com/#search = CSS % 20Variables. ์ด๊ฒ์ ๋ชจ๋ IE ์ง์์ ์ค์งํด์ผํฉ๋๋ค. IE11 ์ง์์ ์ค์งํ๋ ๊ฒ์ ๋๋ฌด ๊ธ์ง์ ์ด์ง๋ง ์ ๋ ์ง์ํฉ๋๋ค.
ํด๋ฐฑ ์ง์์ ์ฌ์ฉํ๋ฉด ์ฌ์ ํ์ด ์์
์ ์ํ ํ ์ ์์ต๋๋ค. ์ : color: var(--red, @red);
ํ์ฌ์ ๋ชจ๋ ๋ณ์์ ๋ํ ๊ฐ๋จํ ์ ์ญ ์ฐพ๊ธฐ / ๋ฐ๊พธ๊ธฐ๋ง์ผ๋ก ํด๊ฒฐํ ์ ์์ต๋๋ค.
SASS ๋๋ ๋ค๋ฅธ ๋ ๋์ ์คํ์ผ๋ง ์๋ฃจ์ ์ด v4์ ๋ํด ๊ณ ๋ ค๋๊ณ ์๋์ง์ ๋ํด ๋ ์ ๊ฒ ๋๋กญํ๊ณ ์์ต๋๊น?
์๋
, @murbanowicz, ๊ฐ์ฌ ์๊ฒฌ์ ๋จ๊ฒจ์ฃผ, ๋ด๊ฐ ์ฌ์ฉ์ ๋ํ ๋ฌธ์ ๊ฐ ๋ ๋ JSS
๋์ Less
์ฌ๊ธฐ๋ฅผ,์ด ์ด๋ํ์ง๋ง ํ๋์ ์ผ ์กฐ์น์ ๋ํ ๋ด ์ค๋น ์ํ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
์๋ ํ์ธ์ @zombieJ , Ant Design์ ๋ํ ํ๋ฅญํ ์์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์์ฉ ํ๋ก๊ทธ๋จ์์ ์ด๋์ด ํ ๋ง๋ฅผ ์ ํํ๋ ์ฆ์ ์ฌ์ฉํ ์์๋ ๋ฐฉ๋ฒ์ ์ ๊ณต ํ ๊ณํ์ด ์์ต๋๊น?
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์
๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์
๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์
๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์
๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์
๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์
์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์ ์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
@shengliangli ๋ ์ปคํ ๋ง์ด ๋๋ฌด ๊ฐํ๋ค๊ณ ๋๋๋๋ค. . .
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์ ์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.@shengliangli ๋ ์ปคํ ๋ง์ด ๋๋ฌด ๊ฐํ๋ค๊ณ ๋๋๋๋ค. . .
Form.Item์ Form ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด antd์ ์ํด ์ถ๊ฐ ๋ "์ถ๊ฐ"์ปดํฌ๋ํธ๋ผ๊ณ ์๊ฐํ๋๋ฐ,์ด ๊ตฌํ์๋ ์ด์ ๊ฐ ์์ง๋ง ๊ฒฐ๊ตญ ์ถ๊ฐ๋๋ ๊ฒ์ด ์์ต๋๋ค. ๋ชจ๋ ์ฌ๋๋ค์ด redux์์ ๋๋ฌด ๋ง์ ๋ชจ๋ ์ฝ๋์ ๋ฌธ์ ๋ฅผ ๋นํํ๋ ๊ฒ์ฒ๋ผ ๊ฐ๋ฐ์๋ ์ด๋ฌํ ์์ฑ ๋ฐฉ์์ ์ข์ํ์ง ์์ ์ ์์ต๋๋ค. form.item์ ์ํด ๊ตฌํ ๋ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๊ธฐ๋ฅ์ Input๊ณผ ๊ฐ์ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ํน์ฑ์ผ๋ก ์ดํดํ์ฌ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์ํฌ ์ ์๋ค๋ฉด ๋ ์์ฐ ์ค๋ฝ์ต๋๊น?
๋ํ ์ปคํ ๋ง ๋ฌธ์ ์ ๋ํด์๋ ์๊ฐํ๋๋ฐ ๋ฌธ์ ์ ๊ทผ์์ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ๊ณผ ๋์ ํน์ฑ์ ์ ์ํ๋ ๋ฐฉ๋ฒ์์์ ์ ์์ต๋๋ค.
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์ ์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.@shengliangli ๋ ์ปคํ ๋ง์ด ๋๋ฌด ๊ฐํ๋ค๊ณ ๋๋๋๋ค. . .
Form.Item์ Form ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด antd์ ์ํด ์ถ๊ฐ ๋ "์ถ๊ฐ"์ปดํฌ๋ํธ๋ผ๊ณ ์๊ฐํ๋๋ฐ,์ด ๊ตฌํ์๋ ์ด์ ๊ฐ ์์ง๋ง ๊ฒฐ๊ตญ ์ถ๊ฐ๋๋ ๊ฒ์ด ์์ต๋๋ค. ๋ชจ๋ ์ฌ๋๋ค์ด redux์์ ๋๋ฌด ๋ง์ ๋ชจ๋ ์ฝ๋์ ๋ฌธ์ ๋ฅผ ๋นํํ๋ ๊ฒ์ฒ๋ผ ๊ฐ๋ฐ์๋ ์ด๋ฌํ ์์ฑ ๋ฐฉ์์ ์ข์ํ์ง ์์ ์ ์์ต๋๋ค. form.item์ ์ํด ๊ตฌํ ๋ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๊ธฐ๋ฅ์ Input๊ณผ ๊ฐ์ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ํน์ฑ์ผ๋ก ์ดํดํ์ฌ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์ํฌ ์ ์๋ค๋ฉด ๋ ์์ฐ ์ค๋ฝ์ต๋๊น?
๋ํ ์ปคํ ๋ง ๋ฌธ์ ์ ๋ํด์๋ ์๊ฐํ๋๋ฐ ๋ฌธ์ ์ ๊ทผ์์ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ๊ณผ ๋์ ํน์ฑ์ ์ ์ํ๋ ๋ฐฉ๋ฒ์์์ ์ ์์ต๋๋ค.
ํน๋ณํ ๋์ํ์ง ์์ต๋๋ค. Form.Item์ ์ฃผ๋ก ๊ตฌ์ฑ ์์์ ๋ํ ์ธ๋ผ์ธ์ ์ ํฉํ์ง ์์ ๋ ์ด๋ธ ๋ฐ ์ด๊ณผ ๊ฐ์ ์์ฑ๊ณผ ๊ฐ์ ๊ตฌ์ฑ ์์์ ์ธ๋ถ ํจํค์ง๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์๋
ํ์ธ์ @zombieJ
๋ฒ์ 4๊ฐ ์ธ์ ์ถ์๋๋์ง ์๊ณ ์ถ์ผ์ญ๋๊น?
๋ต๋ณ์ ๊ธฐ๋ค๋ฆฌ๊ฒ ์ต๋๋ค.
๋์์ธ์ ์ด๋ป๊ฒ ๊ธฐ์ฌํฉ๋๊น?
๋๊ตฐ๊ฐ์ ์๊ฒฌ์ ๋ฃ๊ณ
beta.0 ๋ฒ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฌ์ฉํ ์ ์๋ค๋ ์๋ฏธ์ ๋๊น?
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์ ์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
์ฐ์ ๋ด์ฅ ์ฌ๋ถ์๋ ๋ฌด๊ดํ๋ค๋ ์ฌ์ค์ ์์์ผํฉ๋๋ค. ์์ ๋ด์ฅ ๋ถํ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ฌ๊ณ ๋ผ๊ณ ํ ์ ์์ต๋๋ค.
getFieldDecorator
๋ ์์ ๊ตฌ์ฑ ์์์ ์
๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฐ๊ฒฐํ๋ ๋ธ๋ฆฌ์ง์
๋๋ค. Form.item์ value
๋ฐ onChange
๋ ์์ฑ์ผ๋ก ์ ๋ฌ ๋ ๋ค์ ๋ํ ๋ ๊ตฌ์ฑ ์์๊ฐ value
์ ๋ฌํฉ๋๋ค onChange
์ด ๋ ์ธํฐํ์ด์ค ๋ฉ์๋๋ ์ธ๋ถ ์ธ๊ณ์ ์ํธ ์์ฉํฉ๋๋ค. ์ฆ, value
๋ฐ onChange
๊ฐ ๊ตฌํ๋๋ ํ ๋ชจ๋ ๊ตฌ์ฑ ์์๋ getFieldDecorator
์ ๋งค๊ฐ ๋ณ์๊ฐ ๋ ์ ์์ต๋๋ค.์ด๊ฒ์ program to interface
์ ์ผ๋ฐ์ ์ธ ์์ด๋์ด์
๋๋ค.
์ถ์ : ๋๋ ์์ค ์ฝ๋๋ฅผ ์ฝ์ง ์์์ต๋๋ค. ์์ ๋ชจ๋ ๊ฒ์ ๋ฌธ์๋ฅผ ์ฝ์ ํ ๋ด ์ถ์ธก์ ๋๋ค.
Form.Item
์ด ๊ธฐ๋ณธ Component
์ ์ํธ ์์ฉํ ์์๋ ์ด์ ๋ ๋๊ตฐ๊ฐ๊ฐ ์์ํ๋ '๋น๋ ์ธ'๋ฉ์ปค๋์ฆ๊ณผ๋ ์๋ฌด ๊ด๋ จ์ด ์์ต๋๋ค. ํ๋ก๊ทธ๋๋ฐ ์ธ๊ณ์์ program to interface
๋ผ๋ ์ผ๋ฐ์ ์ธ ์์์์
๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก Form
๊ตฌ์ฑ ์์์ ๊ธฐ๋ณธ ๊ตฌ์ฑ ์์๋ value
๋ฐ onChange
๋์ํฉ๋๋ค. ๊ทธ๋ค์ ์์ฌ ์ํต์ ์ํด ๋ ์ธ๊ณ ์ฌ์ด์ ์ธํฐํ์ด์ค ์ญํ ์ํฉ๋๋ค. ๋์ปคํ๋ง์ ๋ชฉ์ ์ผ๋กํ๋ ์ข์ ๋์์ธ์
๋๋ค.
@dancerphil ์๋ง๋ ๊ณต์ ๋ฌธ์์์ ์์ด๋์ด๋ฅผ ๋ ๋ช ํํ๊ฒ ์ค๋ช ํ ์ ์์ต๋๋ค.
์๋ ํ์ธ์. v4 ๋ฒ ํ๊ฐ ์ถ์๋์์ต๋๋ค. API๋ ์ด์ ์์ ์ ์ด๋ฏ๋ก ์ค์ํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ง ์๋ ํ API์ ํฐ ๋ณํ๊ฐ ์์ต๋๋ค. ๋ฒ ํ ๋ฒ์ ๋์ ๋์์ด๋๋ UI ์๊ฐ์ ๋์์ธ ์กฐ์ ์ ๊ณ์ํ ๊ฒ์ด๋ฉฐ ๋ฒ๊ทธ ์์ ์ ์ง์คํ ๊ฒ์ ๋๋ค. ๋ถ๋ด์์ด ์ฌ์ฉํด๋ณด์ธ์. ๋ถ ๋ฒ๋ ๋ฅผ ๋๊ฑฐ๋ ํผ๋๋ฐฑ์์ฃผ์ธ์.
์ฝ๋ฉ๊ณผ ์๋์ ์ฐธ์ฌ ํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ์ฌ๋ฌ๋ถ์ ๋์์ ๋ง์ ๊ฒ์ ์๋ฏธํฉ๋๋ค :)
์๋ ํ์ธ์ ์ฌ๋ฌ๋ถ, ๋ฒ ํ ๋ฒ์ ์ด ์ถ์๋์์ต๋๋ค. API์ ์ฃผ์ ๋์์ธ ๋ฌธ์ ๊ฐ์๋ ๊ฒฝ์ฐ ๋ ์ด์ ๋ณ๊ฒฝ๋์ง ์์ต๋๋ค. ๋ฒ ํ ๋ฒ์ ์์๋ ๋์์ด๋๊ฐ v4์ UI ์คํ์ผ ์กฐ์ ์ ์ง์ํ๊ณ ๋ฒ๊ทธ ์์ ์ ์ค์ ์ ๋ ๊ฒ์ ๋๋ค. ๋ฒ๊ทธ๋ฅผ ์ฐพ๊ฑฐ๋ ๋ค๋ฅธ ํผ๋๋ฐฑ์ด์๋ ๊ฒ์ ํ์ํฉ๋๋ค.
๊ฐ๋ฐ ๋ฐ ์๋ฒ ์์ ์ ์ฐธ์ฌํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๊ทํ์ ๋์์ ๋งค์ฐ ์๋ฏธ๊ฐ ์์ต๋๋ค.)
์ฐธ์กฐ : http://new-issue.ant.design/
๋์์ธ์ ์ด๋ป๊ฒ ๊ธฐ์ฌํฉ๋๊น?
๋๊ตฐ๊ฐ์ ์๊ฒฌ์ ๋ฃ๊ณ
@ ekeminimarkk001 ์๋ง๋ ์ฐธ์กฐ : https://ant.design/docs/react/contributing
@zombieJ ๋ฌธ์ ์ ๋์ด๋ ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ด ๋ฒ ํ ๋ฒ์ ์์ ๊ตฌํ ๋์์ต๋๊น?
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์ ์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.์ฐ์ ๋ด์ฅ ์ฌ๋ถ์๋ ๋ฌด๊ดํ๋ค๋ ์ฌ์ค์ ์์์ผํฉ๋๋ค. ์์ ๋ด์ฅ ๋ถํ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ฌ๊ณ ๋ผ๊ณ ํ ์ ์์ต๋๋ค.
getFieldDecorator
๋ ์์ ๊ตฌ์ฑ ์์์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฐ๊ฒฐํ๋ ๋ธ๋ฆฌ์ง์ ๋๋ค. Form.item์value
๋ฐonChange
๋ ์์ฑ์ผ๋ก ์ ๋ฌ ๋ ๋ค์ ๋ํ ๋ ๊ตฌ์ฑ ์์๊ฐvalue
์ ๋ฌํฉ๋๋คonChange
์ด ๋ ์ธํฐํ์ด์ค ๋ฉ์๋๋ ์ธ๋ถ ์ธ๊ณ์ ์ํธ ์์ฉํฉ๋๋ค. ์ฆ,value
๋ฐonChange
๊ฐ ๊ตฌํ๋๋ ํ ๋ชจ๋ ๊ตฌ์ฑ ์์๋getFieldDecorator
์ ๋งค๊ฐ ๋ณ์๊ฐ ๋ ์ ์์ต๋๋ค.์ด๊ฒ์program to interface
์ ์ผ๋ฐ์ ์ธ ์์ด๋์ด์ ๋๋ค.์ถ์ : ๋๋ ์์ค ์ฝ๋๋ฅผ ์ฝ์ง ์์์ต๋๋ค. ์์ ๋ชจ๋ ๊ฒ์ ๋ฌธ์๋ฅผ ์ฝ์ ํ ๋ด ์ถ์ธก์ ๋๋ค.
๋ต์ฅ์ ์ฝ์ ํ antd์ ํผ ์ปดํฌ๋ํธ์ ๋ํ ์ ์ ์์ ๋๋ฌด ์ฑ์ํ์ง ์๋ค๊ณ ๋งํด์ผํ๋๋ฐ, ๋ฐ๋ฉด์์ด ์ ์์ ๋ง๋๋ ๊ฒ์ ์ผ๋ฐ ์ฌ์ฉ์์ ๊ด์ ์์ ๋ฌธ์ ์ ๋ํด ์์ ํ ์๊ฐํ๋ ๊ฒ์ ๋๋ค. ์ฌ์ฉ ๊ฐ๋๊ฐ ๋์ ๊ตฌ์ฑ ์์์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ฐ ์ฌ์ฉ์ด ๋ ํธ๋ฆฌํ๊ณ ์ฝ๋๋ฅผ ์ ๊ฒ ์์ฑํ๊ณ ๋ ๋ช ํํ๊ณ ์์ฐ์ค๋ฌ์ด ํํ์ ์ฌ์ฉํ๋ ๊ฒ์ด antd์ ๋ํ ์ด๋ ฌํ ๊ธฐ๋์ ๋๋ค.
์ฌ์ฉ์์ ๊ด์ ์์ ๋ณด๋ฉด antd๋ ์ด๋ฏธ ๋งค์ฐ ํ๋ฅญํ๋ฉฐ ๋๋ถ๋ถ์ ๊ตฌ์ฑ ์์๋ ์ฌ์ฉํ์๋ง์ ์ฌ์ฉํ ์ ์๊ณ ๋ค ์ฌ์ฉํ๋ฉด ์์ด ๋ฒ๋ฆฝ๋๋ค. ์ด ํจ๊ณผ๋ฅผ ๋ฌ์ฑํ๋ ์ด์ ๋ ์ข์ API ๋์์ธ ๋ฐ ๊ตฌ์ฑ ์์์ ํจํค์ง๊ณผ ๋ถ๋ฆฌ ํ ์ โโ์์ง๋ง ์ผ๋ถ ๊ตฌ์ฑ ์์ (์ : from, table)์ ๋ํ ์ฌ์ฉ ์๋๋ฆฌ์ค๊ฐ ์์ผ๋ฉฐ ๋ ๋์ ๊ฐ์ ์ ์ฌ์ง๊ฐ ์์ต๋๋ค.
Antd๋ ํ๋ก์ ํธ์ ๋๊ตฌ ๊ตฌ์ฑ ์์ ์ผ๋ฟ์ ๋๋ค. ์์ฒด ๊ตฌํ ๋ฉ์ปค๋์ฆ์ ๋ ธ์ถํ๊ฑฐ๋ ์ธ๋ถ API์์ ๊ตฌํ ๋ฉ์ปค๋์ฆ์ ๊ต๋ฌํ๊ฒ ์จ๊ธฐ๊ณ ๋ํํ์ง ์๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค. ์ฌ์ฉ์๋์ด ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ธฐ๋ฅผ ์ํ๊ณ ๊ฐ์ฅ ํธ๋ฆฌํ๊ณ ์์ฐ์ค๋ฌ์ด ํํ๋ก ์ฌ์ฉํ๊ธฐ๋ฅผ ์ํ๋ฉฐ ๋๊ตฌ ๊ตฌ์ฑ ์์์ ๋ํ ์ ๋ฌธ๊ฐ๊ฐ๋๊ธฐ๋ฅผ ์ํ์ง ์์ต๋๋ค.
ํผ ์ปดํฌ๋ํธ๋ก ๋์๊ฐ์, ํ์ฌ 3.x api์์ ๋๋ ์ค์ ๋ก Ali์ uform์ ๋ ๊ธฐ๊บผ์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค .antd ํผ์ ๋นํด uform์ ๋ ์ ์ ์ฝ๋๋ฅผ ์์ฑํด์ผํ๊ณ ๋ ์์ฐ์ ์ ๋๋ค. ๋ฌผ๋ก uform์ antd์ ํ์๊ณผ๋ ๋งค์ฐ ๋ค๋ฅด๋ฉฐ ์ฐธ์กฐ ํ ๊ฐ์น๊ฐ ๋ง์ง ์์ ์ ์ธ์ ์์ฑ ๋ฐฉ์๊ณผ ๋น์ทํฉ๋๋ค.
๊ฐ๋ฏธ ํํฐ๋ก์ ๋๋ฌด ๋ง์ ์๊ตฌ ์ฌํญ์ ๋ฌป๋ ๊ฒ์ด ์กฐ๊ธ ๋นํฉ ์ค๋ฝ์ง๋ง ์ฌ๋์ผ๋ก ์ธํด ๋ ์ข๊ธฐ๋ฅผ ๋ฐ๋ผ๋ฉฐ ํ๋ก์ ํธ ํ์ด ์ดํดํ๊ธฐ๋ฅผ ๋ฐ๋ผ๋ฉฐ ๊ตฌ์ฑ ์์์ ๊ฐ๋ฐ ๋ฐ ์ฌ์ฉ ๊ฒฝํ์ ๋์ฑ ์ต์ ํํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ์ ์ ํ ๋ฒ์ ์์.
์ด์ ํด์. ๋๋ Icon์ ์ ํ ์ฌ์ฉํ์ง ์์์ง๋ง ๋ชจ๋ icons-svg๋ฅผ ํจํค์งํ์ต๋๋ค.
๋ฒ์ ๋ฒํธ : 4.0.0-beta.0. Babel-plugin-import ๋ฐ tree-shaking์ด ์ฌ์ฉ๋์ง๋ง ์ธ๋ชจ๊ฐ ์์ต๋๋ค.
์ด์ ํด์. ๋๋ Icon์ ์ ํ ์ฌ์ฉํ์ง ์์์ง๋ง ๋ชจ๋ icons-svg๋ฅผ ํจํค์งํ์ต๋๋ค.
๋ฒ์ ๋ฒํธ : 4.0.0-beta.0. Babel-plugin-import ๋ฐ tree-shaking์ด ์ฌ์ฉ๋์ง๋ง ์ธ๋ชจ๊ฐ ์์ต๋๋ค.
์ด ๊ตฌ์ฑ ์ฌ์ฉ
{
test: /\.js?$/,
include: [/node_modules[\\\\/]antd/],
use: [
{
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-syntax-dynamic-import',
[
'import',
{
libraryName: 'antd',
style: true,
libraryDirectory: 'es',
},
'ant',
],
[
'import',
{
libraryName: '@ant-design/icons',
customName: name => {
const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');
return `@ant-design/icons/lib/icons/${formatName}`;
};
},
'@ant-design/icons',
],
],
},
},
],
},
์ด์ ํด์. ๋๋ Icon์ ์ ํ ์ฌ์ฉํ์ง ์์์ง๋ง ๋ชจ๋ icons-svg๋ฅผ ํจํค์งํ์ต๋๋ค.
๋ฒ์ ๋ฒํธ : 4.0.0-beta.0. Babel-plugin-import ๋ฐ tree-shaking์ด ์ฌ์ฉ๋์ง๋ง ์ธ๋ชจ๊ฐ ์์ต๋๋ค.์ด ๊ตฌ์ฑ ์ฌ์ฉ
{ test: /\.js?$/, include: [/node_modules[\\\\/]antd/], use: [ { loader: 'babel-loader', options: { plugins: [ '@babel/plugin-syntax-dynamic-import', [ 'import', { libraryName: 'antd', style: true, libraryDirectory: 'es', }, 'ant', ], [ 'import', { libraryName: '@ant-design/icons', customName: name => { const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), ''); return `@ant-design/icons/lib/icons/${formatName}`; }; }, '@ant-design/icons', ], ], }, }, ], },
๋ต์ฅ์ ๋ณด๋ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.ํ์ง๋ง ๊ตฌ์ฑ์ ๋ฐ๋ผ ์๋ํ์ง ์์์ต๋๋ค.
๋ฒ์ : 4.0.0-beta.0
๋ฌธ์ : ๋ณด์ด๋ ๋ชจ๋ฌ ๊ตฌ์ฑ ์์๊ฐ ์ ํ๋๋ฉด ํ์ด์ง๊ฐ ๋กค์ค๋ฒ๋์ด ์ฃผ์๋ฅผ ์ฌํํฉ๋๋ค.
@xiaoxintang ๋ง์คํฐ ๋ธ๋์น์์ ์์ ๋์ด ๋ณํฉ์ ๊ธฐ๋ค๋ฆฌ๊ณ ์์ต๋๋ค.
@ afc163 antd4.0 ๋ฒ ํ๋ฅผ ์ด๋ป๊ฒ ์ค์นํฉ๋๊น?
https://next.ant.design/ ๋์์ต๋๋ค
@ afc163 antd4.0 ๋ฒ ํ๋ฅผ ์ด๋ป๊ฒ ์ค์นํฉ๋๊น?
npm install antd@next
๋๋
yarn add antd@next
๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ฌ์ดํธ๊ฐ ๋ง๊ฐ์ง ๊ฒ ๊ฐ์ต๋๋ค. ํ์ด์ง๋ฅผ ์ฐพ์ ์ ์์ ์ค๋ฅ ๋ง ํ์๋ฉ๋๋ค.
์์ ๊ตฌ์ฑ ์์์ ๋ํ ์ ์ :
์๋ก์ด 4.0 ๋ฒ์ ์์ ์์ ๊ตฌ์ฑ ์์๊ฐ ๊ฐ๋ฐ์์๊ฒ ๋ ์น์ํ๋ค๋ ๊ฒ์ ์๊ฒ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ์๋ก์ด ์์ ๋ฅผ ๋ณด์์ต๋๋ค. Form ๊ตฌ์ฑ ์์ ์๋์ Form.Item ๊ตฌ์ฑ ์์๋ ๋ ์ด์ getFieldDecorator๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋งค์ฐ ์ข์ ๊ฐ์ ์ด์ง๋ง ์ข ๋ ๊ธ์ง์ ์ธ ์ ์์ด ์์ต๋๋ค. Form.Item ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋ ์์ฑ ํ๊ฒฝ์ ๋์ฑ ์ต์ ํํ๊ณ ์ฝ๋ฉ์ ๋ ์๋ก ๊ณ ์นฉ๋๋ค. Form.Item ๊ตฌ์ฑ ์์์ ์๋ ๊ธฐ๋ฅ์ ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์ (์ : Input, DataPick ๋ฑ)๋ก ์ง์ ์ ์ก๋ฉ๋๋ค.
์ด๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ ์์์ด antd์ ๋ด์ฅ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ ฅ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ํฅ์์์ผ Form.Item ๊ตฌ์ฑ ์์์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์์๋ ์กฐ๊ฑด์ ๊ฐ์ง๊ณ ์์์ ๊ณ ๋ คํ๊ธฐ์ํ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ง ํน์ํ ๊ฒฝ์ฐ (์ : ์ฌ์ฉ์ ์์ฒด ์ ์ ๊ตฌ์ฑ ์์, ํน์ ์ ๋ ฅ ๊ตฌ์ฑ ์์๋ Form์ ๋ฐ์ธ๋ฉ๋์ง ์์) ์ง์นจ์ ๋ํ ํน์ ํจํค์ง ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณต ํ ์ ์์ต๋๋ค.
antd์ ๋ํ ์ฐ๊ตฌ๋ ๊น์ง ์๊ณ ์ผ๋ฐ ์ฌ์ฉ์์ ์ ์ฅ์์๋ง ํธ์ ์ ์์ ํ ์ ์๋๋ก ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
์ด๊ฒ์ ์๋ํด ๋ณผ ์ ์์ต๋๋ค : https://github.com/aweiu/ant-modifier
๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ๋ํ ์ต์ ํ๊ฐ ์์ต๋๊น?
๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ๋ํ ์ต์ ํ๊ฐ ์์ต๋๊น?
Antd๋ ์ ๋์ฌ๊ฐ์๋ ๊ฒ ๊ฐ์ง๋ง ์ค์ผ์ด ์๋๋๋ค.์์ ์ ํ๋ก์ ํธ CSS ์ฝ๋๋ CSS ๋ชจ๋์ ์ฌ์ฉํ์ฌ ์ง๊ตฌ ์ค์ผ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ๋ํ ์ต์ ํ๊ฐ ์์ต๋๊น?
Antd๋ ์ ๋์ฌ๊ฐ์๋ ๊ฒ ๊ฐ์ง๋ง ์ค์ผ์ด ์๋๋๋ค.์์ ์ ํ๋ก์ ํธ CSS ์ฝ๋๋ CSS ๋ชจ๋์ ์ฌ์ฉํ์ฌ ์ง๊ตฌ ์ค์ผ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
๊ธ์์, ์ ๋์ด ์ ๋์ฌ๋ฅผ ์๊ณ ์์ต๋๋ค. ์ ์ธ๊ณ CSS ์ฌ์ค์ ๋ถ๋ถ์ ์ค์ผ์ ์๋ฏธํฉ๋๋ค. ์ด๋ ๋ ๊ฑฐ์ ํ๋ก์ ํธ์์ antd ๋ฐ CSS ์ฌ์ค์ ์ ๋์ ํ์ฌ ์ผ๊ธฐ ๋ ์ค์ผ ๋ฌธ์ ์ ๋๋ค.
๊ธ๋ก๋ฒ ์คํ์ผ ์ค์ผ์ ๋ํ ์ต์ ํ๊ฐ ์์ต๋๊น?
Antd๋ ์ ๋์ฌ๊ฐ์๋ ๊ฒ ๊ฐ์ง๋ง ์ค์ผ์ด ์๋๋๋ค.์์ ์ ํ๋ก์ ํธ CSS ์ฝ๋๋ CSS ๋ชจ๋์ ์ฌ์ฉํ์ฌ ์ง๊ตฌ ์ค์ผ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
์์ธํ ๋ด์ฉ์ ๊ณต์ ์น ์ฌ์ดํธ ๋งํฌ์ ๋ฌธ์ ํ ๋ก ์ ์ฐธ์กฐํ์ญ์์ค : https://ant.design/docs/react/faq-cn#antd-% E8 % A6 % 86 % E7 % 9B % 96 % E4 % BA % 86 % E6 % 88 % 91 % E7 % 9A % 84 % E5 % 85 % A8 % E5 % B1 % 80 % E6 % A0 % B7 % E5 % BC % 8F % EF % BC % 81
Antd Pro 4.0์์ Antd Pro 4.0 ๋ ์ด์์์ ๋ง์ด๊ทธ๋ ์ด์
ํ ๊ณํ์ด ์์ต๋๊น?
์ง์ ํ๋ก์ ํธ๋ฅผ ๋ง์ด๊ทธ๋ ์ด์
ํ ๋ pro-layout์์ SiderMenu.js Icon.createFromIconfontCN ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. pro-layout์ ์ข
์์ฑ์ ์์ง v3 ๋ฒ์ ์ด๋ฏ๋ก ์ข
์์ฑ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ์๋ ์ฌ๋์ด ๊ฐ๋ฅด์ณ ์ค ๊ฒ์
๋๋ค.
Antd Pro 4.0์์ Antd Pro 4.0 ๋ ์ด์์์ ๋ง์ด๊ทธ๋ ์ด์ ํ ๊ณํ์ด ์์ต๋๊น?
์ง์ ํ๋ก์ ํธ๋ฅผ ๋ง์ด๊ทธ๋ ์ด์ ํ ๋ pro-layout์์ SiderMenu.js Icon.createFromIconfontCN ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. pro-layout์ ์ข ์์ฑ์ ์์ง v3 ๋ฒ์ ์ด๋ฏ๋ก ์ข ์์ฑ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ์๋ ์ฌ๋์ด ๊ฐ๋ฅด์ณ ์ค ๊ฒ์ ๋๋ค.
์์ด์ฝ์ด 4.0์์ ๋ถ๋ฆฌ ๋์๊ธฐ ๋๋ฌธ์ ๊ฐ์ ธ ์ค๊ธฐ๋ฅผ ์์ ํด์ผํฉ๋๋ค. next.ant.design์์ ํ์ฌ ์์ด์ฝ์ api ๋ฌธ์๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
v4 ๋ฒ์ ์ ๋ํ ๋ชจ๋ ๊ธฐ์ฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. 4.0.0-rc.0
๋ฒ์ ์ถ์ ์ดํ ์ข
๋ฃ : ref # 20661
StrictMode๊ฐ ๋ชฉํ์ ๋๊น? ๋ ๊ฑฐ์ ์ปจํ ์คํธ๋ฅผ ๋ง์ด๊ทธ๋ ์ด์ ํด์ผ ํจ https://github.com/ant-design/ant-design/issues/9870
antd3์ antd4๋ฅผ ์ ์ฅ์์ ๋ ๋ค ์ ์งํ ์ ์์ต๋๊น? ๋ฆฌํฌ์งํ ๋ฆฌ๊ฐ ๋๋ฌด ์ปค์ ๋ชจ๋ ๊ณณ์์ ๋ณ๊ฒฝํ ์ ์์ผ๋ฉฐ ์์ ํ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๊ฑฐ์ ๋ค์ ์์ฑํ ๊ฒ์
๋๋ค.
๋ํ ๊ทธ๋ ๋ค๋ฉด antd3 CSS๋ฅผ ์ ์ญ์ ์ ์งํ๊ณ antd4 CSS๋ฅผ ์ผ๋ถ ํด๋์ ํ์ ํด๋์ ์ ์งํ ์ ์์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
15311
๋ฒ์ 4์์ Moment.js๋ฅผ ๋์ฒด ํ ์์ ์ ๋๊น?