11. React로 간단한 설문조사 Form 만들기

아래 그림과 같이 동작하는 설문조사 Form에 대해 생성해봅시다.

 

 

요구사항 정의

 

- 이름, 나라, 지역을 입력할 수 있는 인풋 박스가 있다.

- 나라는 한국, 중국, 일본, 러시아, 미국 5개의 나라로 구성되어있다.

- 한국을 선택했을 때만 지역을 입력할 수 있는 인풋 박스가 생성된다.

- 이름과 사는 곳을 입력해야만 저장 버튼이 활성화가 된다.

 

 

파일명 - index.css

* {
  font-size: 22px;
}
html,
body {
  padding: 0;
  margin: 0;
}

.App {
  display: flex;
  height: 100vh;
  background: #ffebe9;
  justify-content: center;
  align-items: center;
}

.form {
  background: #fff;
  padding: 20px 35px;
  border-radius: 10px;
  box-shadow: 0px 0px 40px -10px #0000007d;
  min-width: 300px;
}

.form-item {
  padding: 10px;
  margin-bottom: 20px;
}

.form-item h1 {
  margin-bottom: 10px;
  font-size: 0.8em;
  color: #142663;
}

.form-item input[type='text'] {
  padding: 8px 10px;
  outline: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #666;
  box-sizing: border-box;
  width: 100%;
}

.form-item select {
  padding: 8px 5px;
  outline: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #666;
  box-sizing: border-box;
  width: 100%;
}

.button-group {
  text-align: center;
  margin-top: 35px;
}
.button-group button {
  padding: 10px 38px;
  border: none;
  border-radius: 100px;
  background-color: #32478a;
  color: #fff;
  font-size: 0.9em;
}
.button-group button:disabled {
  background-color: #56669a87;
}

 

 

파일명 - TextInput.jsx

function TextInput({value, setValue}) {
    return (
        <input type="text" value={value} onChange={(e) => {
            setValue(e.target.value);
        }}/>
    );
}

export default TextInput;

 

 

파일명 - Select.jsx

function Select({value, setValue, options = [] }) {
    return (
        <select value={value} onChange={(e) => {
            setValue(e.target.value);
        }}>
            <option value="" disabled>
                지역을 선택해주세요.
            </option>
            {options.map((item) => (
                <option key={item} value={item}>
                    {item}
                </option>
            ))}
        </select>
    );
}

export default Select;

 

 

파일명 - App.jsx

import { useState } from 'react';
import TextInput from './component/TextInput'
import Select from './component/Select'

const contryOptions = [
    '한국',
    '중국',
    '일본',
    '러시아',
    '미국'
];

function App() {
    const [formValue, setFormValue] = useState({
        name: '',
        contry: '',
        address: ''
    });

    console.log('[App] formValue', formValue);

    return (
        <div className="App">
            <div className="form">
                <div className="form-item">
                    <h1>1. 이름이 무엇인가요?</h1>
                    <TextInput
                        value={formValue.name}
                        setValue={(value) => {
                        setFormValue((state) => ({
                            ...state,
                            name: value
                        }));
                    }}/>
                </div>
                <div className="form-item">
                    <h1>2. 사는 곳은 어딘가요?</h1>
                    <Select
                        value={formValue.contry}
                        setValue={(value) => {
                            setFormValue((state) => ({
                                ...state,
                                contry: value
                            }));
                        }}
                        options={contryOptions}
                    />

                </div>
                {formValue.contry === "한국" ? (
                <div className="form-item">
                    <h1>2-1. 한국 어디에 사시나요?</h1>
                    <TextInput
                        value={formValue.address}
                        setValue={(value) => {
                            setFormValue((state) => ({
                                ...state,
                                address: value
                            }));
                        }}
                    />
                </div>
                ) : null
                }
                <div className="button-group">
                    <button
                        onClick={() => {
                            alert('저장되었습니다.');
                            setFormValue({
                                name: "",
                                contry: "",
                                address: ""
                            });
                    }}
                    disabled={formValue.name === "" || formValue.conrty === ""}
                > 저장</button>
                </div>
            </div>
        </div>
    )
}

export default App;

 

 

출처 - https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%A4%EB%AC%B4%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard