Compound Components Pattern
์กฐํฉ ์ปดํฌ๋ํธ ํจํด์ ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ๊ฐ์ง ์งํฉ์ฒด๋ก ๋ถ๋ฆฌํ ๋ค, ๋ถ๋ฆฌ๋ ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ์ชฝ์์ ์กฐํฉํด ์ฌ์ฉํ๋ ํจํด์ด๋ค. ์ด๋ props drilling์ผ๋ก ์ธํด ๋ฐ์ํ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋์์ฑ ์ผ๋ก ์์ฉํ ์ ์๋ค. Prop drilling์ React ์ปดํฌ๋ํธ ํธ๋ฆฌ์์ ํ์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ผ๋ก, ์ ์ญ ๋ณ์๋ฅผ ์ค์ ํ๋ ๋์ prop drilling์ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ์ถ์ ํ๊ธฐ๊ฐ ์ฝ๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ช ์์ ์ผ๋ก ์ฃผ๊ณ ๋ฐ์ ์ ์๋ค. ๊ทธ๋ฌ๋ prop drilling์ด ์ผ์ผํฌ ์ ์๋ ๋ฌธ์ ๋ ์กด์ฌํ๋ค. ์๊ตฌ ์ฌํญ์ด ๋ณต์กํด์ง๊ณ ๋ค์ํ ์ํฉ์ ๊ณ ๋ คํด์ผ ํ ๋, ์ปดํฌ๋ํธ์ ๊ณ์ธต์ด ๋ณต์กํด์ง๋ฉด ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์ ๋ฌํด์ผ ํ๋ props๋ ๋ง์์ง๋ฉฐ ์ด๋ ์ํ ๊ด๋ฆฌ์ ์ ์ง๋ณด์๋ฅผ ์ด๋ ต๊ฒ ํ ์ ์๋ค. ๋ฐ๋ผ์ ์กฐํฉ ์ปดํฌ๋ํธ๋ฅผ ์ ์ ํ ํ๋จํ์ฌ ์ฌ์ฉํด์ผ ํ๋ค. ์ด ํจํด์ ํตํด ๊ด์ฌ์ฌ๋ฅผ ๋ถ๋ฆฌํ ์ ์๊ณ , ํ ๊ฐ์ง์ ๊ธฐ๋ฅ์ ์ฑ ์์ง๋ ์ปดํฌ๋ํธ ์กฐ๊ฐ๋ค๋ก ๋๋์ด ์๋ฏธ ์๋ ๊ฒฐ๊ณผ๋ฅผ ๋ง๋ค์ด ๋ผ ์ ์์ผ๋ฉฐ, ์ด๋ ๋ณต์ก์ฑ์ ํด๊ฒฐํ๊ณ ์ง๊ด์ ์ธ ํ์ ๊ณผ ๊ฐ๋ ์ฑ์ ํฅ์์ํค๋ฉฐ ๋ณํ์ ์ ์ฐํ๊ฒ ๋์ฒํ ์ ์๋ค.
Compound Form Components
Compound Form Component ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ๊ทผ๊ฑฐํด์ผํ๋ค. form์ ์ ๋ ฅ๋๋ ๋ฐ์ดํฐ๊ฐ์ ์์กด์ฑ์ ๋ฎ์ถ๋ค. ์ด๋ค ๋ฐ์ดํฐ๊ฐ ๋ค์ด์ค๋ ์ง ๊ทธ์ ๊ทผ๊ฑฐํ์ง์๊ณ ์ฒ๋ฆฌํ ์์๋ค. ์์กด์ฑ์ ๋ฎ์ถ๋ฉด ๋๋ฉ์ธ๊ณผ์ ๊ฒฐํฉ๋๊ฐ ๋ฎ์์ง๊ธฐ ๋๋ฌธ์ ๋ฒ์ฉ์ ์ผ๋ก form์ด ํ์ํ ๋ชจ๋ ๊ณณ์ customํด ์ฌ์ฉํ ์์๊ฒ๋๋ค. Form Component์ ๊ฒฝ์ฐ ์ฑ ์์ form์ ๊ธฐ๋ฅ, ์ฃต๋ฅ์ ๋ฐ๋ผ ๋๋์์๋ค. ์ ์ ํ ์ปดํฌ๋ํธ ๋จ์๋ก ๋๋๋๊ฒ์ด ์ค์ํ๋ฐ, ์ด๋ํ ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํด์ ๋ฐ๋ผ ๋ฌ๋ผ์ง์์๋ค. ํ์ฌ ์ฌ์ฉํ๋ ant design ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด - input - text area - checkbox - button - select - upload - modal ๋ฑ UI ๋จ์๋ก ๋๋์์๋ค.
๊ตฌํ
-
์๋ธ ์ปดํฌ๋ํธ ๊ตฌํ
- antd์ UI๋ฅผ ๊ธฐ์ค์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋ธ๋ค.
-
input component
function CustomInput({
label, name, rules, disabled, ...args
}: FormItemProps & InputProps) {
return (
<S.FormItem label={label} name={name} rules={rules}>
<S.StyledInput disabled={disabled} {...args} />
</S.FormItem>
);
}
- checkbox component
function CustomCheckbox({
name,
children,
disabled,
}: CheckboxProps) {
return (
<S.FormItemCheckbox name={name} valuePropName="checked">
<Checkbox disabled={disabled}>
{children}
</Checkbox>
</S.FormItemCheckbox>
);
}
- button component
function CustomButton({
children,
danger,
icon,
onClick,
htmlType,
}: ButtonProps) {
return (
<S.FormItem>
<S.StyledButton
htmlType={htmlType}
type="primary"
danger={danger}
icon={icon}
onClick={onClick}
>
{children}
</S.StyledButton>
</S.FormItem>
);
}
- ์๋ธ์ปดํฌ๋ํธ๋ฅผ ๋ฌถ์ด export ํ๊ธฐ
- ์๋ธ ์ปดํฌ๋ํธ๋ค์ CutomForm์ ๊ฐ์ฒด๋ก ์ง์ ํด์ฃผ์ด export ํ๋ค.
- ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๊ฐ CustomForm์ผ๋ก ํต์ผ๋๊ธฐ๋๋ฌธ์ ๊ฐ๋ ์ฑ์๋ ๋์์ ์ค์์๋ค.
//exapmle
const CustomForm = Object.assign(Form, {
GridRow,
Button: CustomButton,
Input: CustomInput,
InputNumber: CustomInputNumber,
TextArea: CusctomTextArea,
MultipleUpload: CustomMultipleUpload,
SingleUpload: CustomSingleUpload,
Checkbox: CustomCheckbox,
Select: CustomSelect,
Switch: CustomSwitch,
Modal: CustomModal,
});
export default CustomForm;
- Usage
- ์ง๊ด์ ์ผ๋ก
CustomForm์ผ๋ก ํต์ผ๋์ด ์ผ๊ด์ฑ์๊ฒ ์งค์์์ - ์ค๊ฐ์ ์ถ๊ฐ๋ฅผ ํด์ผํ๋ค๋ฉด ์ถ๊ฐํ๊ธฐ์ ์ฉ์ดํจ.
- ์ง๊ด์ ์ผ๋ก
<CustomForm>
<CustomForm.Input label="๋ฐฉ์ด๋ฆ" name="name" />
<CustomForm.GridRow gridColumns="1fr 1fr">
<CustomForm.Input label="๋ฐฉ์ข
๋ฅ" name="room_type" />
<CustomForm.InputNumber label="๋ฐฉํฌ๊ธฐ" name="size" />
</CustomForm.GridRow>
<CustomForm.GridRow gridColumns="1fr 1fr">
<CustomForm.InputNumber label="์๋" name="latitude" />
<CustomForm.InputNumber label="๊ฒฝ๋" name="longitude" />
</CustomForm.GridRow>
<CustomForm.Input label="์ฃผ์" name="address" />
<CustomForm.TextArea
label="์ค๋ช
"
name="description"
maxLength={200}
/>
<Divider orientation="left" style={{ marginTop: '40px' }}>
์ต์
</Divider>
<S.CheckboxWrap>
{ROOM_OPTION.map(
(optionData) => (
<CustomForm.Checkbox
key={optionData.name}
name={optionData.data}
>
{optionData.name}
</CustomForm.Checkbox>
),
)}
</S.CheckboxWrap>
<Divider orientation="left">์ฌ์ง</Divider>
<S.UploadWrap>
<CustomForm.MultipleUpload domain="lands" name="image_urls" form={form} />
</S.UploadWrap>
<CustomForm.Button icon={<UploadOutlined />} htmlType="submit">
์๋ฃ
</CustomForm.Button>
<CustomForm.Button danger icon={<DeleteOutlined />} onClick={deleteRoom}>
์ญ์
</CustomForm.Button>
</CustomForm>
conclusion
- ํจ์ฑ ์ปดํฌ๋ํธ ํจํด์ ์ด์ฉํ๋ฉด
- ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ ์์๋ค.
- ๋ณด๋ค ์ ์ฐ์ฑ์ด ๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋ผ์์๋ค.