[TIL]22.02.22 - useRef여러개, 카운트업, 정규표현식으로 하이픈 자동입력

실력부족

상당히 많은 시간을 할애했음에도 불구하고 자바스크립트로 온전하게 카운트롤링 애니메이션을 구현하지 못하고

결국 라이브러리의 도움을 받았다.

리액트 조금 할줄아는것뿐 아직 부족한점이 너무많다.

특히 자료구조와 알고리즘은 지식이 바닥을 보이는수준ㅜㅜㅜ

하루에 한문제라도 풀어보도록 시간을 할애해야겠다.

 

오늘 한일

• 콘핀스튜디오 작업

오늘 배운것

 

• 카운트 롤링 애니메이션
  
  자바스크립트로 구현한다면 0부터 끝낼숫자를 end point로 두고, setinterval을 통해 시간이 변할때마다 시작숫자에서 표기할 숫자로 변하는 함수를 콜백인자로 넣어주고 리턴되는 숫자상태를 queryselector로 해당 Dom에 입히면 간단히 해결될거라 생각했지만, useRef로 여러개의 창을 변화시키려는 시도가 막혀 좌절...ㅜㅜ
  결국 react-countup이라는 라이브러리를 사용하여 아주 손쉽게(?)구현했다.https://github.com/glennreyes/react-countup#installation

GitHub - glennreyes/react-countup: 💫 A configurable React component wrapper around CountUp.js

• useRef 여러개 관리
  
  

  const inputRef = useRef([]);  // 여러개의 input을 관리할수 있다

  <Input ref={(item) => (inputRef.current[0] = item)} />
  <Input ref={(item) => (inputRef.current[1] = item)} />
  <Input ref={(item) => (inputRef.current[2] = item)} /> // current의 인덱스로 한번에 조작이 가능함

  
  정규표현식을 통한 예외처리를 위해 여러개의  input 타입들에 접근해 값을 뽑아내려고 했는데
  useRef안에 배열을 담아서 사용하면 다중처리가 가능하다.
  
  
  
• 연락처 입력창에 바로 하이픈('-') 적용하기
  
  ※ 에러처리 : 상태값을 input에 넣어주었더니 아래와 같은 에러가 생겼고 undefined일경우 처리할 수 없다는 에러라 아래 코드와 같이 처리했다
  `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
  https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro

A component is changing an uncontrolled input of type text to be controlled error in ReactJS

const [phoneNumber, setPhoneNumber] = useState(null);

...

useEffect(() => {
    if (phoneNumber === null) { //기본상태 null
      return;
    }
    if (phoneNumber.length === 10) {
      setPhoneNumber(phoneNumber.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3'));
    }
    if (phoneNumber.length === 13) {
      setPhoneNumber(
        phoneNumber
          .replace(/-/g, '')
          .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
      );
    }
  }, [phoneNumber]);
  
  ...
  
  <input  maxLength="13" value={phoneNumber || ''} />

 

 

내일 할일

• 스튜디오 페이지 완료(api연동 및 반응형작업)
• 웹 소스코드 구조화작업
• 공식문서 + 리액트 네이티브 다루는 기술 기반 학습
  
• Node.js학습