계산된 속성명 (Computed property names)

계산된 속성명은 자바스크립트 객체 프로퍼티 이름을 동적으로 설정할 수 있도록 해주는 ES6의 기능

로그인 & 회원가입 계산된 프로퍼티명으로 리팩토링

const [inputValues, setInputValues] = useState({
    id: '',
    password: '',
  });

  const handleInput = (e) => {
    const { name, value } = e.target;
    setInputValues({ ...inputValues, [name]: value });
    activeLogin();
  };
  
  const activeLogin = () => {
    return inputValues.id.includes('@') && inputValues.password.length >= 5
      ? setActive(true)
      : setActive(false);
  };
  
  <div id="id_pw_window">
          <input
            name="id"
            className="id"
            type="text"
            value={inputValues.id}
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={handleInput}
            onKeyUp={enter}
          />
          <input
            name="password"
            className="pw"
            type="password"
            value={inputValues.password}
            placeholder="비밀번호"
            onChange={handleInput}
            onKeyUp={enter}
          />
          <button
            type="button"
            className="login_btn"
            onClick={handleClick}
            disabled={active ? false : true}
          >
          로그인
          </button>

id input value 값, password input value 값 따로따로 state를 관리해줄 필요 없이,
계산된 속성명과 객체 구조 할당을 통해 중복된 코드를 줄일 수 있ㄸㅏ! 🥹

useState 하나만 사용할 수 있다.
inputValue 의 초기값으로 id와 password key 값이 담긴 객체를 설정해준다.

const [inputValues, setInputValues] = useState({
    id: '',
    password: '',
  });

  const handleInput = (e) => {
    const { name, value } = e.target;
    setInputValues({ ...inputValues, [name]: value });
    activeLogin();
  };

handleInput 함수로,
객체 구조 할당을 해준다 !
( 이 부분에 이해가 좀 필요했다. 👇🏻 참고!)

let obj = {a: 1, b: 2};
let {a, b} = obj;

console.log(a) // 1

기본 객체구조할당 코드이다.
obj 라는 객체에 a의 값이 1이기에, 1이 출력된건데
간결해진만큼 기본 지식으로 과정 이해가 필요하다.

{a, b} 로 객체 구조 할당을 해서 obj 로 지정을 해주었다. 이는,
obj.a = 1
obj.b = 2
의 형식으로 볼 수 있다!

이 기초를 가지고 내 코드를 다시 보면,

const { name, value } = e.target;
    setInputValues({ ...inputValues, [name]: value });

e.target 은 개발자도구를 열어보면 객체이다.
객체구조할당으로 담아주는 name 과 value 는 e.target 과 이렇게 연동된다. 👇🏻
name 은 e.target.name
value 는 e.target.value
-> 일일히 e.target.name 과 e.target.value 를 어떠한 변수나 스테이트로 관리해주지 않아도 된다.

input 태그의 수많은 프로퍼티 중 name 과 value 가 속해있다.
내가 사용할 input 태그에 name 속성값을 정해주고, value는 내가 input 창에 채우는 값임.


그럼 setInputValues 에 담기는 값은,
복사되는 초기값(inputValues)과
[name] = e.target.name 을 key값으로 [] 대괄호를 사용하여 동적으로 할당시킴
value = e.target.value 값을 key 값의 value 값으로 !


➕ inputValues 를 input 태그에 지정해줄 때는, 객체 접근 방식으로!
inputValues state 의 초기값으로 객체를 할당했기 때문!
예를 들어, 유효성검사를 할때, 아이디 인풋 창의 값을 검사하는 것이기 때문에, inputValues.id 이런식으로 접근해야 값을 볼 수 있다.

계산된 속성명을 공부하기 전까지는

const [idState, setIdState] = useState('');
const [pwState, setPwState] = useState('');

function saveUserId(e) {
    setIdState(e.target.value);
    activeLogin();
  }

  function saveUserPw(e) {
    setPwState(e.target.value);
    activeLogin();
  }

두번씩 썼어야 했쥐 ~
이제는 구러케 안해 ~

😇 👉 비구조화할당 공부하기 !!!!!!!!