[React]리액트에서 여러 input 태그 다루기-배열 비구조화 할당

배열 비구조화 할당

const user = ['hi', 'jy'];
// user 배열 안에 있는 값을 userOne과 userTwo에 담는 일반적인 방법
const userOne = user[0];
const userTwo = user[1];
// 배열 비구조화 할당을 사용한 방법
const [userOne, userTwo] = user;

리액트의 useState에서의 비구조화 할당

const [word, setWord] = useState('');

useState 함수의 인자에는 상태의 초기값이 들어간다. 타입은 어느 것이든 상관없다. 함수를 호출하면 배열이 반환된다. 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 Setter 함수다. 배열 비구조화 할당을 통해 이름은 자유롭게 정할 수 있다.

input 여러 개 다루기

 

function InputSample (){
	const [inputs, setInputs] = ({
		name : '',
  		nickname : '',
 	})
  
 	const {name , nickname} = inputs; // 비구조화 할당을 통해 값 추출
  
  	const onChange (e) =>{
 		const {name, value} = e.target; // 우선 e.target 에서 name 과 value 를 추출
  		setInputs({
    		...inputs, // 기존의 input 객체를 복사한 뒤
        	[name] : value;  // name 키를 가진 값을 value 로 설정
    	    })
   	 };
    
        const onReset = () => {
        setInputs({
          name: '',
          nickname: '',
        })
      };

    
 	retrun (
  		<div>
 		 <input name = "name" onChange = {onChange}  value={name}/>
    		 <input name = "nickname" onChange = {onChange}  value={nickname} />
   		 <button onClick={onReset}>초기화</button>
  		</div>
 	 </div>
  )
  }

 

input 태그가 많을 때, input 값을 state에 넣기 위해 여러 개의 메서드를 만들어도 되지만,  더 좋은 방법은 input에 name 이라는 값을 설정하고 event가 발생했을때 이값을 참조 해주는것

usestate에서는 여러개의 문자열을 가지고있는 객체 형태의 상태를 관리 해줄 것

 

리액트 상태에서 객체를 수정해야 할 때에는,

inputs[name] = value;

이런식으로 직접 수정하면 안됨

그 대신에, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 합니다.

setInputs({
  ...inputs,
  [name]: value
});

spread 문법을 사용해서 기존의 상태를 한 번 복사하고 거기에다 특정 값을 덮어 씌우고 그것을 새로운 상태로 설정해주고 있다. 이렇게 해주는 것을 '불변성을 지킨다'라고 한다.

불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트됐음을 감지할 수 있고 이에 따라 필요한 렌더링이

발생하게 된다.

 

💛객체 상태를 업데이트 할때에는 '...' spread 문법을 사용해서 객체를 복사하고 나서 특정 값을 덮어 씌워 상태를업데이트해줘야 한다는 것을 기억하자.💛

 

다음으로 각 input에서 name을 설정해 준 것을 확인할 수 있다. name을 설정함으로써 각 input을 쉽게 컨트롤 할 수 있다. 여러 개의 input을 관리해야 할 때는 위 코드 처럼 name 값을 설정해주는 것을 기억!!