2가지 스타일의 Enter 입력 처리

Imnottired·2023년 5월 9일
1
post-thumbnail

2개의 프로젝트를 진행하면서 검색창을 구현할 때 2가지 다른 방법으로 구현하였다.

1번은 onChage & Enter를 onkeyup 활용하여 체크하는 검색창(자동완성)
2번은 onChage & Enter를 Form 활용하여 체크하는 검색창이었다(자동완성 x)

디자인적인 이유로 다시 만들게 되었는데 구현하면서 2번이랑 같은 방식으로 구현하였지만
의문이 들었다.

어떤 방식으로 활용한 것이 더 좋은 코드일까?라는 생각이었다.
그래서 이번에 둘의 쟁점을 정리하고 비교해보아야겠다.




1번 onChage & onkeyup 검색창

1번 같은 경우에는 onChange를 이용하였고, onKeyDown으로 Enter를 인식하여서 처리하였다.


  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };
  
  const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
 if (e.key === "Enter" ) {
      setInputValue(zone[selected]);
}
  };

(내용과 관계 없는 코드는 삭제하였다)

1번 검색창은 2번 검색창과 다르게 자동 완성 기능이 있어서 Change를 바로 사용하는 경우라서 약간의 차이가 있다. 포인트는 엔터를 처리하는 방식이다.

1번 검색창은 onChange이후 enter를 치면 onkeyup으로 이벤트를 처리한다.


2번 onChage & Form 검색창

   
         <form
          onSubmit={handleSearch}
      >
  
        <input
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </form>

(내용과 관계 없는 코드는 삭제하였다)

두번째 같은 경우에는 값을 저장하고 트리거하는 형식이라서 약간 다르지만
여기서는 중요한 포인트가 아니다. 엔터를 처리하는 방식이 중요하다

1번과 다르게 onchange 값을 저장했다가 엔터를 누르면 form 이벤트가 발생하면서 저장하는 방식을 취했다.

     const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();//화면 이동 막음
     setSearch("&keyword=" + trimmedSearchTerm);

  };

결론

고민해보았을 때 html 태그를 더 쓰는 것보다는 덜 쓰는게 좋아보인다.
그래서 1번이 더 좋다고 생각한다.
또한 다른 문제점이 있다. 부모에게 이벤트를 할당해야한다. 직접적으로 이벤트를 갖고 있는 것이 버블링을 쓰는 것보다 좋다 생각한다.

대신 1번은 onkeyup이어서 다른 이벤트도 인식하고 if문을 검증하지만 성능적으로 큰차이가 없고,
if문을 쓰는 만큼 form 이벤트에서는 이벤트를 막아주기때문에 onkeyup이 더 좋은 코드라는 결말이 났다.

정리하자면

  • onkeyup이 html 태그를 덜 쓴다.
  • form은 부모가 이벤트를 갖고 onkeyup은 input에 이벤트가 있다.
  • onkeyup은 다른 이벤트가 들어올 수 있는 만큼 form도 화면 이동을 막아주어야한다.



마무리

오늘 글을 써보면서 느낀점은 쟁점을 정리하는 것이 어려웠다.
둘다 역할(자동완성, 일반 검색창)이 달랐기 때문에 쟁점인 enter 위주로만 정리하는 것이 까다로웠다.

그래도 한가지 방식이 아닌 2가지 방식으로 해보았기때문에, Form에 대한 고민과 onkeyup에 대해 고민해볼 수 있었고 차이점에 대해 명확히 알 수 있었다.

profile
새로운 것을 배우는 것보다 정리하는 것이 중요하다.

4개의 댓글

comment-user-thumbnail
2023년 5월 14일

하나의 기능인데 여러 방법으로 적용해보고 차이점 분석하는 게 정말 멋지십니다 ... 꾸벅

답글 달기
comment-user-thumbnail
2023년 5월 14일

오호.. onkeyup 이벤트에서 엔터를 인식하느냐 form에서 엔터를 인식하느냐 문제군요 흥미롭습니다!

답글 달기
comment-user-thumbnail
2023년 5월 14일

한가지만 적용하고 끝낸 제 자신 오늘도 반성 ... 👍🏻

답글 달기
comment-user-thumbnail
2023년 5월 14일

이 논쟁 거의 깻잎 논쟁에 버금가네요. 딱 봤을 땐 API 호출을 위한 엔터키는 2번을 쓰는 게 나을 거 같고, 뭐 다음단계로 넘어간다든가 간단한 이벤트는 1번을 쓰는 게 나을 거 같네용

답글 달기