useRef 정말 간단히 알아보기

useRef는 프로젝트 중 사용했는데 왜 사용했는지 정확히 알지 못하고 사용했다. 이번 기회에 첨부 블로그들을 보며 간단히 알아봤다.

핵심 :

• useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 리엑트 Hook

즉 자바스크립트에서 querySelector나 getElement~같이 DOM에 접근해야할 때 쓰는 리엑트에서의 훅을 이야기 하는 것이라고 생각하고 넘어가면 사실 끝...? 같음. 하지만 더 알아보면..

state와의 차이

• 렌더링되면서 컴포넌트 내부의 변수들을 초기화하지 않고 렌더링 되지 않으면서 변수들의 값이 유지되어야 할 때 사용

state는 렌더링이 되면서 값이 바뀌고 하는데 ref는 렌더링 되지 않으면서 변수의 값은 유지됨. 그래서 실제로 코드를 짜본 뒤 ref가 바뀌는 값을 막 버튼을 눌러봐도 렌더링 되지 않으며 state와 연결된 것을 렌더링 해야만 합쳐지면서 변화되거나 함. 이건 참고 블로그를 통해 봄.(참고 샌드박스)

대표적인 예

• input 요소를 클릭하지 않고 바로 포커싱할 때, 즉 로그인 화면 등에서 바로 input이 선택되게 하는 것이 가능

정리 : useState랑 좀 차이가 있는 것 확인. 내가 프로젝트에서 채팅에서 썼던 이유도 채팅창에 바로 포커싱 되기 위해 썼던 것으로 확인.

내 코드에선 어떻게 썼었지?

...
...
  //enter시 메시지 보냄
  const scrollRef = useRef();

  useEffect(() => {
    if (scrollRef) {
      scrollRef.current.scrollIntoView({
        behavior: "smooth",
        block: "end",
        inline: "nearest",
      });
    }
  }, [listReducer]);
  //채팅창 치면 맨 밑으로 내려감.
...
...