react: input값이 여러개일때 각각 제어하기

 <input
    id="company"
    name="compeny"
    type="text"
    className="input-default"
    onChange={onChangeHandler}
    value={compeny || ''}
    required
    >
</input>

🍎 회사 홈페이지 견적문의 작업을 하면서 input 값을 처리하는 과정을 적어보려고 한다.

---

 

🌈 구현해야할 로직

1.  인풋은 회사소속/성함/연락처/이메일/문의분야/문의내용 이고 각 입력한 value 의 값을 가져와야 한다.

2.  문의분야는 select_box 로 선택한 값만 가져와 value에 넣어줘야 한다.

3. 제출하기를 눌렀을때 인풋에 값이 없으면 전송되지 않는다.

4. 이메일과 전화번호 유효성 검사를 거친후 맞지 않으면 제출하기가 비활성화가 된다.

 

---

<input
  id="company"
  name="compeny"
  type="text"
  className="input-default"
  onChange={onChangeHandler}
  value={compeny || ''}
  required
>
</input>

 <input
   id='fname'
   name="user_name"
   type="text"
   className="input-default"
   onChange={onChangeHandler}
   value={user_name || ''}
   required
>
</input>

.... > 만들고자 하는 갯수와 맞게

 ★ 여기서 주의할점은 value 값에 내가 만든 state의 변수이름을 적어야 한다는 것이다.

 

• input의 값을 가져오기 위해선 onChange 를 통해 함수를 만들어 주어야 한다. 
• input 의 value 값을 저장하기 위한 useState 를 생성해준다. => Content, setContent

const [Content, setContent] = useState({
    compeny : '',
    user_name : '',
    user_phoneNumber : '',
    user_email : '',
    select_box : '',
    selectProduct : '',
    message : '',
  });
  
    const {compeny, user_name, user_phoneNumber,user_email, select_box ,message } = Content;

 

• input 이 여러개 임으로 해당 값을 오브젝트로 담아준다.
  • compeny : '' , user_name = ''  이런식 으로  초기값을 담아준다.
•  해당 값을 변수로 꺼내와 사용하기 편리하게 아래와 같이 코드를 짜준다.

const {compeny, user_name, user_phoneNumber,user_email, select_box ,message } = Content;

 

• onChangeHandle 함수를 통해 해당 값들을 event 값으로 해서 불러온다.

const onChangeHandler=(e)=>{
    const {name,value} = e.target;
    const nextValue = {
      ...Content,
      [name] : value,
    }
    setContent(nextValue);

•  const { name,value } = e.target 을 통해 name 과 value 값을 꺼내온다.
• 여러개 Input을 담을 변수를 하나 만든다. nextValue 
• 변수 안에 기존에 있던 Content 값이 아닌 복사본 ...Content 값을 만든다.
• [ name ] : value 로 해당 값을 만들게 되면 { compeny : '입력한값 '}  으로 나오게 된다.
• nextValue 안에 담긴 값들을 setContent 안에 담아주면 입력한 값이 업데이트가 된다.

 

 

<select
  id="category"
  className="input-default"
  name="select_box" 
  onChange={onChangeHandler}
  value={select_box || ''}
  required
>
  <option name="product" value="product" ></option>
  <option nmae="ipt" value="ipt">IPT</option>
  <option name="Network" value="network">NETWORK</option>
  <option name='WLan' value="wlan">WLAN</option>
  <option name="보안" value="security">보안</option>
  <option name="개발" value="r&d">개발</option>
</select>
<input type='text'name="selectProduct" style={{display:"none"}} onChange={onChangeHandler} value={select_box || ""} required></input>

• select box 같은경우 option을 선택하여 값을 불러와야한다. value 값에 각각의 값을 입력해준다.
• email.js 를 사용할 경우 input의 name 값을 가져와 사용하게 되는데 select 같은경우 값을 가져오기가 힘들기 때문에 
• 임의의 값을 넘겨줄 수 있는 input 을 만들었다. ( 스타일은 display : "none") 을 해준뒤 넘어오는 값을 저장해준다.