리액트의 useRef 기능 두가지

useRef의 기능 두가지

첫번째,

저장 공간으로서의 기능을 한다.

리액트에서 값을 바꾸거나 UI를 렌더링할 때 상태관리(useState)를 한다.

useRef는 변수처럼 값을 저장할 필요가 있는 변수로 사용되고, UI에 보일 필요가 없는 경우에 사용된다.

간단하게 예제를 들겠다.

 

검색을 하는데 같은 검색어를 입력하여 검색할 경우 불필요한 호출이 일어날 수 있다.

그렇기 때문에 useRef를 사용하여 이전에 검색한 값을 prevInputValueRef에 담아주고,

그 값과 동일한 검색어로 검색할 경우 호출이 일어나지 않게 하는 방법이다.

const Search = () => {
    const [inputValue,setInputValue] = useState("")
    const prevInputValueRef = useRef("")

//입력된 검색어에 맞는 데이터를 호출한다.
    const fetchSearch = () => {
      console.log("호출 시작")
    }
    
//검색 버튼을 클릭하면 인풋창에 입력된 내용을 검색한다.
    const handleSearch = (e) => {
        e.preventDefault()
        if(prevInputValueRef.current !== inputValue && inputValue !== ""){
          fetchSearch()
          prevInputValueRef.current = inputValue
        }
    }

  return (
    <form onSubmit={handleSearch}>
    <input value={inputValue} onChange={e => setInputValue(e.target.value)}></input>
    <button>검색</button>
    </form>
  )
}

export default Search

 

두번째,

DOM요소를 선택하는 기능을 한다.

자바스크립트를 사용할 때 document.elementById와 같이 DOM요소에 접근을 할수 있는데,

리액트 JSX문법 사용하면서 필요가 없어졌다. 하지만 가끔 사용할 때가 있는데 대표적으로 Input요소를

클릭하지 않아도 focus를 줄때 사용한다. 간단한 예제를 들겠다.

const FocusInput = () => {
  const [inputValue, setInputValue] = useState("");
  const focusRef = useRef(null);

  const handleSearch = (e) => {
    e.preventDefault();
    //검색 버튼 클릭시 input에 focus되도록 한다.
    focusRef.current.focus();
  };

  return (
    <form onSubmit={handleSearch}>
      <input
      //input요소에 접근
        ref={focusRef}
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      ></input>
      <button>검색</button>
    </form>
  );
};

export default FocusInput;