[React] Day 12 - 여러개의 input 상태 관리하기

초기 상태

MultiInput.js 추가

import React, {useState} from 'react';

function MultiInput () {

  const onChange = () => {

  }

  const onReset = () => {

  }

  return(

    <div>

      <input></input>

      <input></input>

      <button onClick={onReset}>초기화</button>

      <div>

        <b>값: </b>

        이름(닉네임)

      </div>

    </div>

  );

}

export default MultiInput;

 

➡️두 개의 input이 존재하고, 이름과 닉네임을 입력하면 이름(닉네임)이라는 형식으로 출력이 되도록 구현하기.

 

 

📌비 구조화 할당

 

=> 원래 배열을 선언하고 이 배열의 값을 하나하나 변수에 넣어주어야 했다.

//배열선언

const animalList = ['CAT', 'DOG', 'TIGER'];

//각각 변수담기

const cat = animalList[0];

const dog = animalList[1];

const tiger = animalList[2];

=> 하지만 비 구조화 할당을 통해서 길었던 코드를 한줄로 줄여서 변경이 가능하다. 이것이 비 구조화 할당이다. 

//비구조할당방식을 이용하면 네 줄을 한 줄 코드로 변경 가능

const [cat1, dog1, tiger1] = ['CAT', 'DOG', 'TIGER'];

📌그리고 기본 배열값을 변수에 한번에 할당할 수도 있다.

 

방법

const [변수명1, 변수명2, 변수명3] = 배열명;

ex)

const { name, nickname } = inputs;

 

📌... : 확산연산자

 => 객체에게 다른 객체로 열거 가능한 프로퍼티들을 조금 더 간결하게 복사할 수 있다.

 

ex)

setInputs({

      ...inputs

    });

---

MultiInput.js

import React, { useState } from 'react';

function MultiInput() {

  const [inputs, setInputs] = useState({

    name: '',

    nickname: ''

  });

  const { name, nickname } = inputs;

  const onChange = (e) => {

    const { value, name } = e.target;

    setInputs({

      ...inputs,

      [name]: value

    });

  };

  const onReset = (e) => {

    setInputs({

      name: '',

      nickname: ''

    })

  };

  return (

    <div>

      <input name="name" placeholder='이름' onChange={onChange} value={name}></input>

      <input name="nickname" placeholder='닉네임' onChange={onChange} value={nickname}></input>

      <button onClick={onReset}>초기화</button>

      <div>

        <b>값: </b>

        {name}({nickname})

      </div>

    </div>

  );

}

export default MultiInput;

 

결과사진