여러개의 Input 상태 관리 하기

벨로퍼트와 함께하는 모던 리액트를 참고하여 작성하였습니다.

---

const [inputs, setInputs] = useState({
    userId: "",
    userPw: "",
  });
const { userId, userPw } = inputs;
//객체 분해 할당을 사용하여 값을 추출해준다.

  const onChange = (e) => {
    const { name,value } = e.target;
    // 마찬가지로 name과 value를 객체분해할당해줌
    setInputs({ ...inputs, [name]: value }); 
  };
//기존의 inputs를 복사해준뒤, 객체니까 {name:value}를 onChange 되는 값을 설정해준다. 왜 name에는 대괄호가 붙는건가? userId,userPw를 key값으로 가지니까 배열이 필요한것?
-> 고민해결 : ??

동일한 태그가 여러 개일 경우 useState나 onChange를 여러 개 만드는 것은 좋지 않습니다. 각 태그에 name값을 설정해주고 이벤트가 발생하였을 때 이를 참조하여 상태 값을 관리하는 것이 좋습니다. 그리고 여러 개의 state를 관리하기 때문에 useState 함수는 객체 형태로 받아야 합니다.

리액트 상태에서는 객체를 직접 수정해주어선 안된다. 그 대신 새로운 객체를 만들어서 새로운 객체에 변화를 주고 이를 상태로 사용해주어야 합니다.

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

불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행됩니다. 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않는다

리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 됩니다.

---

헷갈렸던 것

• 키값의 name에 대괄호가 이해가 안갔는데 es6 이후에 추가된 계산된 속성명이라는 것을 알았고 객체의 속성명이 최초에 결정되는 것이 아니라 동적으로 결정되는 것으로 이해했다.
  html도 신경써서 공부해야겠구나를 느꼈다..