[React] Login 함수 (handleId와 handlePw) 합치기

2022년 12월 30일 작성

 

위스타그램 Login.js에는 id와 pw를 각각 저장하는 handleId와 handlePw 함수가 있다. handleId와 handlePw 함수는 Input에 변화가 있을 때마다 id 또는 Pw 변수에 event.target.value 가 저장되도록 하는 함수이다. 지난 번에 멘토님께서 내 코드를 쓱 보시더니 '두 가지 함수를 하나로 합칠 수 있겠네요?' 라고 말씀하셔서 한 번 합쳐보았다. 두 함수를 합치기 전에 handleId와 handlePw 함수를 한 번 더 살펴보자!

const handleId = event => {
    const value = event.target.value;    - 1
    setInputValues({ ...inputValues, id: value });
  };

  const handlePw = event => {
    const { value } = event.target;    - 2
    setInputValues({ ...inputValues, pw: value });
  };

	<input
            type="text"
            id="id_input"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={handleValue}
	 />
	 <input
            type="password"
            id="pw_input"
            placeholder="비밀번호"
            onChange={handleValue}
	 />

여기에서 const value = event.target.value와
const {value} = event.target 은 같은 뜻이다.
const {value} = event.target 도 구조분해할당을 통해 event.target.value를 변수 value에 저장한다고 한다.

구조분해할당이 가능하다고 하는걸보니 event.target은 객체인걸까? 잠깐 살펴보고 handleId와 handlePw 함수를 합치는 데 필요한 input의 name 속성까지 알아보자!

event.target

event.target 은 이벤트가 발생한 실제 대상이다. 앞에서 event.target 을 구조분해할당하여 value를 가져왔으니 당연히 event.target은 객체라고 생각했다. 그리고 객체가 나오길 기대하면서 console.log(event.target)을 했더니 출력된 결과는 ?

뚜둥!! input 태그 그 자체가 나왔다. 나는 너무 이해가 안갔다. 객체의 형태가 아닌데 왜 구조분해할당이 가능한걸까? 고민하다 멘토님께 질문을 했는데, event.target 자체는 객체가 맞다고 답변을 들었다. 실제로 typeof event.target 을 하면 ojbect가 나온다. event.target 이 어떻게 구성되어 있는지 실제로 보고 싶은데 console.log()로는 한계가 있는듯하다.

• 2022.01.10 추가
  console.log(event)를 하면 event 객체 안에 target이 들어있다는 걸 확인할 수 있다! 그리고 event.target 은 event 객체 내에 있는 target 에 접근하기 위해 점 표기법을 쓰는 것이니 event.target은 객체라는 걸 알 수 있다.
  

  

input 의 name 속성

로그인 창을 만들 때 필수로 사용하는 input 태그에는 name 속성이 있다. input에 name 속성을 주는 이유는 무엇일까? name 속성은 서버로 전달되는 이름을 정하는 속성이다. 여기서는 event.target이 id인지 pw인지에 따라 useState로 키값을 바꿔주기 위해 input에 name을 부여해야 한다.

함수를 합쳐주기 위해서 우선 useState에 id와 pw를 담아준다. 신기하게도 useState의 초기값에 객체를 넣어줄 수 있다! 그 다음에는 event.target 의 name과 value 를 각각의 변수로 담아주고, [name]: value 로 inputValues에 새로운 객체로 담기도록 만들어주면 된다. 여기서 [ ] 는 자바스크립트의 문법이라고 하니 그냥 외우는 수밖에 없다. 객체 접근법 중 bracket notation과 관련이 있는 게 아닐까 싶다.

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

  const handleValue = event => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };
  
  --------------------------------------------------
  	<input
            type="text"
            id="id_input"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            name="id"
            onChange={handleValue}
	 />
	 <input
            type="password"
            id="pw_input"
            name="pw"
            placeholder="비밀번호"
            onChange={handleValue}
	 />

name 속성은 id, class처럼 태그를 식별하기 위해 필요한 속성이다. 나는 이번에 처음 알았는데, 찾아보니 form에서 자주 쓰는 개념인 듯하다. 저번부터 한 번 form을 써봐야지~ 하고 있어서 조만간 한 번 form 을 이용해봐야겠다! 끝~!