mrh
145
2021-07-29 19:47:35
4
122

리액트에서 input 질문


input 으로 입력을 받으면 한글자 쓰거나 지울때마다 렌더링을  도는데

입력이 끝난 후에 input에서 벗어나면 체크하는 방법이 없을까요?


예를들어 12a 입력할때 onChange 로 하면 

1

12

12a 이런식으로 계속 렌더링을 하는데


12a 하고 입력을 끝내면 한번만 렌더링 하도록

0
  • 답변 4

  • Flex 해서 샀다
    236
    2021-07-29 22:48:22

    input 에 value + onChange 대신에

    initialValue + onChange 쓰시면 됩니다

  • 나후나
    312
    2021-07-30 00:35:45

    blur

  • LostStarz
    174
    2021-07-30 01:08:04 작성 2021-07-30 01:09:50 수정됨

    결국 상태를 언제 업데이트 시키냐에 따라 랜더링이 됩니다.


    1. input에서 벗어났을 때, 상태를 업데이트 시키는 방법

    -> input 태그에 value를 리액트 state와 연결시키지 않고, onBlur이벤트 발생했을 때 state setter를 통해 업데이트


    import { useState } from "react";
    
    function App() {
      const [state, setState] = useState("");
    
      // input에서 벗어났을 때, state 업데이트
      const handleBlur = (e) => {
        setState(e.target.value);
        console.log("setState");
      };
      return (
        <div>
          <input type="text" onBlur={handleBlur}></input>
          <div>{state}</div>
        </div>
      );
    }
    
    export default App;
    


    2. input에서 마지막 입력 후, 상태를 업데이트 시키는 방법

    -> input 태그에 value를 리액트 state와 연결시키지 않고, onChange에 디바운싱 기법 적용해서 마지막 입력 후 특정시간 후에 state setter를 통해 업데이트


    import { useState } from "react";
    // npm lodash 패키지에서 디바운싱, 쓰로틀링 기법이 이미 구현된 함수 제공
    import _ from "lodash";
    function App() {
      const [state, setState] = useState("");
    
      // 마지막 입력 1초후에 state 업데이트
      const handleChange = _.debounce((e) => {
        setState(e.target.value);
        console.log("setState");
      }, 1000);
      return (
        <div>
          <input type="text" onChange={handleChange}></input>
          <div>{state}</div>
        </div>
      );
    }
    
    export default App;


  • mrh
    145
    2021-07-30 22:11:55

     다들 감사합니다!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.