[react] useState 사용해서 input 입력값 로컬스토리지에 저장하기 (debounce)

아래처럼 코드를 작성하고 실행해 봤더니

input에 사용자 이름을 받을 때 마지막 글자가 저장이 되지 않는다는 문제점을 발견했다.

ex) 정상적으로 '안녕'을 입력했지만 로컬스토리지에 저장된 내용은 '안녀'

import { useState } from "react";
import { Link } from "react-router-dom";


function Main(){
  const [userName, setUserName] = useState();
  
  const getName = (e) => {
    let $username_input = e.target.value;
    e.preventDefault();

    setUserName($username_input);
    localStorage.setItem('username', userName);
  }

  const lengthCheck = (e) => {
    if(!userName){
      e.preventDefault();
      alert('이름을 입력해 주세요 :)');
    }
  }

  return(
    <div>
      <h1>이름을 입력하세요.</h1>
      <form>
        <input type="text" 
          placeholder="What's your name?" id="username_input"
          onChange={getName}
        ></input>
        <Link to='/main/todo' onClick={lengthCheck}>
        <button>확인</button>
        </Link>
      </form>
    </div>
  )
}

export default Main;

 

커뮤니티에 질문 후 얻은 답변으로 해결했다!

  const getName = (e) => {
    let $username_input = e.target.value;
    e.preventDefault();

    setUserName($username_input);
    localStorage.setItem('username', e.target.value);
  }

이유는 useState가 비동기라서 다음 마운트에 반영되어서 그렇다는 것이었다.....

역시 비동기는 어렵다 ㅠ_ㅠ

 

그리고 이런 코드에서 input 값을 입력할 때

로컬스토리지에 'ㅇ', '아', '안', '안ㄴ', '안녀', '안녕' 이런 식으로 매번 입력돼서

성능에 좋지 않다는 사실도 알게 되었다.

 

그래서! Debounce와 Throttle에 대해 알아보려고 한다.

다음 포스팅에서 제대로 알아보자!

 

디바운스 적용해서 수정한 코드

import { useState } from "react";
import { Link } from "react-router-dom";
import { debounce } from 'lodash';


function Main(){
  const [userName, setUserName] = useState();

  const getName = debounce((e) => {
    let $username_input = e.target.value;
    e.preventDefault();

    setUserName($username_input);
    localStorage.setItem('username', e.target.value);
  }, 300);


  const lengthCheck = (e) => {
    if(!userName){
      e.preventDefault();
      alert('이름을 입력해 주세요 :)');
    }
  }

  return(
    <div>
      <h1>이름을 입력하세요.</h1>
      <form>
        <input type="text" 
          placeholder="What's your name?" id="username_input"
          onChange={(e) => getName(e)}
        ></input>
        <Link to='/main/todo' onClick={lengthCheck}>
        <button>확인</button>
        </Link>
      </form>
    </div>
  )
}

export default Main;

입력값이 0.3초동안 변화가 없을 때 그 값이 로컬스토리지에 저장된다.