리팩토링 : 4주차 플젝 input 창 텍스트 길이 제한

📍  오늘 고칠 문제

✔ 장소에 해당하는 제목의 길이를 제한했지만 적용되지 않은 에러

 

--> 사진을 저장할 때 해당 사진과 장소를 묶어 제목을 정할 수 있게 설계하였다.

이 제목은 태그의 느낌으로 짧게 짓도록 유도하기 위해 텍스트의 길이를 제한해놨었다.

input 태그에 max-length 속성을 넣어 13으로 설정했는데 적용이 안되는 문제 발생.

 

--> 분명 설정 당시에 작동이 되는 걸 알고 넘어갔는데, 

리팩토링하면서 보니까 안되더라 😂 가끔 적용이 안된다고는 하는데 흠 ...

언제나 동작하게 함수를 만들어 해결하자 !!!

 

😨  BEFORE

 

 

분명 저는 max-length 속성을 넣어놓은 상태구요 .. 동작 안하구요 .. ㅎㅎ

이렇게 되면 사이드바에 탭이 추가될 때 글자가 넘쳐 UI가 무너지는 문제가 발생한다.

사이드바 뿐 아니라 마이페이지에서 해당 루트를 조회할 때도 문제가 생기고 ^__^

 

🙌  해결 방법

 

해결 방법을 찾으면서 많은 분들이 input 태그에 oninput 이벤트 핸들러를 사용한다는 사실을 알게됐다.

난 onchange 이벤트 핸들러를 사용했는데 ... 둘의 차이가 뭐지 ?-?

 

oninput : <input>, <select>, <textarea> 한정 적용가능한 이벤트 핸들러
onchange : HTML 태그의 변화를 감지하는 이벤트 핸들러

📍 oninput vs onchange
• oninput : HTML element value 의 모든 변화에 대응해 발생한다.
• onchange : HTML element value 의 모든 변화를 감지하지만, 대응하진 않는다. (ex. Enter를 눌렀을 때만 발생)

 

MDN의 예시를 보면 알겠지만, oninput 동작 방식은 React에서의 onchange 동작 방식과 같다. (인식 오류 🤨)

onchange 이벤트 핸들러의 본래 특성을 알았다면 oninput 핸들러를 사용했을텐데, 

리액트에서는 왜 문제 없이 동작하는 걸까 ?

---

📍 리액트의 Controlled Componenets

 

" In most cases, we recommend using controlled components to implement forms. "

리액트는 form을 실행시킬 때 controlled components 를 사용하길 권고한다.

리액트의 상태 관리 방식을 적용한 form 태그들을 controlled component 라고 부른다.

--> useRef 등 DOM을 직접 조작하는 방식으로 동작하는 태그는 uncontrolled component 라고 한다.

 

controlled component 의 대표적인 종류로는 input, textarea, select box 태그가 있다.

독특한 점은 기존의 HTML과 달리 모든 태그가 value 속성을 가지고 있고,

이는 form 태그에 입력되는 정보를 담는 용도로 사용한다.

그리고 name 속성도 모든 태그가 가질 수 있고, 태그별로 구분하는 데 쓰일 수 있다. 😉

---

리액트는 상태가 변할 때마다 재렌더링이 발생하는데, 이 점때문에 onchange 이벤트 핸들러가 oninput 처럼 동작하는 것이었다 !-!

 

• HTML 에서 oninput 사용법

 

<input type="text" maxlength="13" oninput="maxLengthHandler(event)"/>

 

function maxLengthHandler (event) {
  const maxLength = event.max.length;
  // 태그의 max-length 속성보다 입력된 텍스트의 길이가 길때
  // slice 메서드 사용해 잘라준다
  if(event.value.length > maxLength){
    event.value = event.value.slice(0, maxLength);
  }
};

 

• REACT 에서 onchange 사용법

 

function input (){
  const [pinTitle, setPinTitle] = useState(null);

  const handleText = (event: any, maxLength: number) => {
    setPinTitle(event.target.value.substr(0, maxLength));
  };

  return (
    <input onChange={(event) => handleText(event, 13)}/>
  );
};

 

난 두번째 인자로 길이를 전달해주는 방식을 택했지만,

위 방식처럼 max-length 속성에 원하는 길이를 할당한 후에 event 객체에서 꺼내 쓰는 방식도 좋은 것 같다.

slice 대신 substr 이라는 string 객체에 할당된 메서드를 사용했다는 것도 포인트 ! 😊

 

😊  AFTER

 

 

일정 길이 이상 입력되지 않는 걸 확인하실 수 있습니다. 정상동작합니다 !

 

🤨  더 알아 볼 것

 

현재는 한글을 기준으로 13으로 잡아놨다.

영어나 독일어 등 다른 언어를 기준으로 한다면 제한 글자 수를 바꿔야한다.

입력되는 텍스트의 국적을 판별할 방법을 찾는 것 ..? 

언어별로 텍스트 제한 수를 다르게 두어 활용도를 높이면 너무 좋을 것 같다. !!

 

📍 input 텍스트의 언어별 특징 구분짓기