React - useRef 변수 선언하기

목록

• Introduction
• useRef
• Conclusion

📌 Introduction

안녕하세요. 오늘은 useRef로 변수를 선언하는 것에 대해서 알아보겠습니다. 값을 선언할때 react에서는 두가지 방식이 있어요. 하나는 useState를 사용하는 방식이고 하나는 useRef를 사용하는 방식입니다. 두개의 차이점은 useState는 값이 변경이 될때 rerendering이 이루어 지고 useRef는 값이 변경이 되어도 rerendering이 이루어지지 않습니다. 또한 component가 re-rendering될때에도 값을 기억하고자 할때 useRef
를 사용하게 됩니다. 그럼 기본적인 문법과 사용하는 예제를 알아보겠습니다.

📌 useRef

  const nextId = useRef(4); // component가 re rendering 될때에도 4로 기억이 됩니다.

  const onCreate = () => {
    console.log(nextId.current);  // 4로 찍히게 됩니다.
    nextId.current += 1;
  }

위의 코드에서 눈치를 채셨겠지만 useRef에 접근을 할때는 current로 접근을 하게되고 값을 바꾸는 방법은 current의 값을 직접적으로 바꿔주면 됩니다.

📌 Conclusion

안녕하세요. 이렇게 useRef에 대해서 알아보았습니다. 그럼 다음 포스팅을 기다려주세요~~! 안녕!