자바스크립트 ES6 문법을 통한 입력값 주기 Feat. React

최근 프로젝트를 하며 알게 된 내용 중 하나를 공유하고자 합니다

React에서 input 태그의 입력값을 구해와야 할 때 일일이 한 개의 input 태그의 입력값을 구해왔던 분들이 있을 겁니다

물론 저도 지금까지 그래 왔습니다 예를 들어 클릭 이벤트를 발생시킬 때 함수를 한 개씩 만들었던 것처럼 말이죠

 

한 개의 함수로도 쉽게 여러 개의 input값을 가져올 수 있습니다

예시와 함께 바로 보도록 하겠습니다

 

const onPostChange = (event) => {
	const {
    	target: { value, name },
    } = event;
}

onPostChange라는 함수 안에 파라미터로 event를 받고 있습니다

함수안 객체를 선언후 프로퍼티로 target이라는 이름의 키값과 객체 value, name을 선언을 할당해 주었습니다

이렇게만 보면 이해가지 않지만 다음을 보며 이를 어떻게 사용할 수 있을지 보겠습니다

 

const onPostChange = (event) => {
    const {
      target: { value, name },
    } = event;
    if (name === "comment") {
      setAddUserComment(value);
    } else if (name === "top") {
      setAddUserTopInfo(value);
    } else if (name === "bottom") {
      setAddUserBottomInfo(value);
    } else if (name === "sns") {
      setAddUserSns(value);
    } else if (name === "outer") {
      setAddUserOuter(value);
    } else if (name === "shoes") {
      setAddUserShoes(value);
    }
  };

<input type="text" name="top" value="top" />

input tag에 name을 top이라고 부여했다면 위와 같은 조건식으로 top이라는 이름과 일치할 경우에만 거기에 해당하는 input value 값을 줄 수 있습니다 input 태그에 value 값으로는 react경우 사용하고 싶은 State값을 useState를 만들어 넣어주시면 됩니다