[개발일지]햇빛 눈이 부신 날에 상태관리해봤니 (ref말고 useRef...)

 

문제상황 : Editor 인풋값을 변경하면 useState 값이 변해서 컴포넌트가 계속 재렌더링이 되어 글자 한개 입력할 때마다 커서가 앞으로 가버리는 문제

 

해결 : useState 대신 useRef 로 UI 재렌더링을 막음

 

과정 :

 

공식문서에서 useRef를 읽었음에도 useState 훅의 setter함수처럼 값 상태관리를 useRef에서 어떻게 해야하는 지 몰라서 헤매다가 다시 공식문서를 찬찬히 읽어봄

 

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

 

공식문서에 이렇게 변수이름 뒤에 .current 붙이고 변수에 새로 할당할 값 넣어주면 된다고 나와있어서 

 

이걸 보고 해결함 ㅎㅎ

 

 

- useRef  가 뭘까???

const ref = useRef(initialValue)

 

렌더링이 필요없는 값을 참조하도록 하는 리액트 훅 이라고 공식문서에 나와있다.

useState와 비슷하다고 생각이 들었는데 차이가 꽤 크다!

 

★ Changing a ref does not trigger a re-render.

해석 : 리렌더링 발생 안시킴!

 

- useRef 사용 예시 (리액트 공식 문서에 있는 내용)

 

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

 

위의 코드에서 useRef는

{

current: 0 // The value you passed to useRef

}

 

이러한 값을 리턴한다.

 

위의 코드에서 ref.current로 현재값을 변경하고 있다.

 

리액트에서 상태값이 변경되면 UI 등 렌더링이 다시 이루어지는데 (useState로 관리하는 상태값 변경시에는 렌더링이 다시 이루어짐)  useRef는 렌더링을 일으키지 않는다는 것이 가장 중요한 차이점~!!!

보통의 경우에는 useState를 많이 사용한다고 한다.

 

useState와 useRef의 차이를 예시로 보자면 아래의 예시가 있다.

 

- useState  숫자 카운트 버튼 (공식문서에서 버튼 누를 수 있음)

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You clicked {count} times
    </button>
  );
}

 

-useRef 숫자 카운트 버튼

import { useRef } from 'react';

export default function Counter() {
  let countRef = useRef(0);

  function handleClick() {
    // This doesn't re-render the component!
    countRef.current = countRef.current + 1;
  }

  return (
    <button onClick={handleClick}>
      You clicked {countRef.current} times
    </button>
  );
}

 

 

렌더링 시점을 컨트롤 하고 싶을 때는 useEffect(html다 보여준다음 렌더링), useMemo(렌더링 시점에 같이) 도 있다.