[작성중] 6-1. Custom Form Input 컴포넌트 만들기

# What? 이게 뭔데?

- select, input text, textarea, checkbox, file(첨부파일), image(이미지 업로드)를 만들필요 없이 커스텀 컴포넌트로 만들어놓고 재활용하는법

 

# Why? 왜 쓰는데?

- 매번 위 input들을 만들어서 쓰려면 비효율적임. 미리 입력세트를 만들어놓고 간편하게 쓰기

 

# How? 어떻게 쓰는데?

1. 커스텀 입력 컴포넌트 만들기

@ compoents/form/InputSelect.js

-> props로 옵션 목록을 받고, 그 옵션을 클릭했을 때 해당 데이터를 전달하는 메소드 짜기

function InputSelect({value, options, onChange}){
    return (
        <select name="" id="" onChange={onChange(value)} defaultValue={value}>
            {options.map(option => <option value={option.value} key={option.value}>{option.label}</option>)}
        </select>
    )
}
export default InputSelect;

 

2. 만든 커스텀 태그에 옵션목록과 값을 클릭했을 때 할 행동 정의하기

@ Pages/Test.js

import inputSelect from "../components/form/InputSelect";
import {useState} from "react";

function Test(){
    const [value, setValue] = useState(null);

    return (
        <inputSelect options={
            [
                {
                    label: "test",
                    value: 1,
                },
                {
                    label: "test",
                    value: 1,
                }
            ]
        } value={value} onChange={setValue} />
    )
}
export default Test;

# Practice 연습

1. Checkbox 만들어보기

@ InputCheckbox.js

//

2. InputImages 만들어보기

@ InputImages.js

//

3. InputFiles 만들어보기

@ InputFiles.js

//

 

 

# Problem 과제

1. InputFiles 만들어보기

2. InputRadio 만들어보기

 

* 코드참고: