[React] 입력 그룹 / InputGroup, InputGroupAddon

Input을 받을 때 form 양식 컨트롤을 확장하는
InputGroup/InputAddon

 

그냥 일반적인 Input을 사용하여 입력을 받을 수 있지만,

입력의 앞/뒤에 텍스트나 버튼 등 다른 양식을 추가하여 입력 폼을 확장할 수 있는데,

예를들어 이메일을 입력 받거나, 어떠한 그룹 안에서 선택 후 검색을 해야 하는 등에 활용이 가능하다

 

[InputGroup.js]

import {InputGroup, InputGroupAddon, InputGroupText, Input, InputGroupButtonDropdown, DropdownMenu, DropdownItem, Button, DropdownToggle} from 'reactstrap';
import {useState} from 'react';

function InputGroupStrap(){
    const [open, setOpen] = useState(false);
    return(
        <>
        // (1)
        <InputGroup>
			// (2)
			<InputGroupAddon addonType="prepend"> @ </InputGroupAddon>
            <Input placeholder='username'/>
        </InputGroup>
        <br/>
        <InputGroup>
            <InputGroupAddon addonType='prepend'>
               // (3)
                <InputGroupText>
                    <Input addon type='checkbox' aria-label='Checkbox for following text input'/>
                </InputGroupText>
            </InputGroupAddon>
            <Input placeholder='Check it out'/>
        </InputGroup>
        <br/>
        <InputGroup>
            <Input placeholder='username'/>
            <InputGroupAddon addonType='append'>@example.com</InputGroupAddon>
        </InputGroup>
        <br/>
        <InputGroup>
            <InputGroupAddon addonType='prepend'>$</InputGroupAddon>
			// (4)
			<Input placeholder='Amount' type='number' step="1"/>
            <InputGroupAddon addonType='append'>.00</InputGroupAddon>
        </InputGroup>
        <br/>
        <InputGroup>
            <InputGroupButtonDropdown addonType='prepend' isOpen={open} toggle={()=>setOpen(!open)}>
                <DropdownToggle caret>Split outline</DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header> Header</DropdownItem>
                    <DropdownItem disabled> Action </DropdownItem>
                    <DropdownItem>Another Action </DropdownItem>
                    <DropdownItem divider/>
                </DropdownMenu>
            </InputGroupButtonDropdown>
            <Input/>
        </InputGroup>
        </>
    )
}

export default InputGroupStrap;

(1) InputGroup : 하나의 입력을 위해 묶는 group

(2) addonType="prepend / append" : 2개의 옵션 선택이 가능하며, 입력의 앞(prepend)에 붙일 것인지 뒤(append)에 붙일 것인지 결정이 가능

(3) InputGroupText : InputGroupAddon 안에 Input을 넣기 위해서 사용하며, Input을 넣음에도 InputGroupText를 사용하지 않을 경우 레이아웃이 깨질 수 있음

(4) step을 통해 숫자를 위아래로 증감시키는 버튼을 추가할 수 있으며, step에서 설정한 값만큼 증감함