김민태의 데브캠프 2기 - useRef를 이용해서 변수 관리하기

useRef란 
1. 변수 관리
2. 특정 DOM을 선택
const ref = useRef(value);

{current: value }

ex)

const ref = useRef("안녕하세요 .");
{current: "안녕하세요 .'}

ref.current === '안녕하세요'

[변수 관리]
state를 사용해서 state가 변하면 컴포넌트가 다시 랜더링 되지만 ref를 사용하면 랜더링되지 않는다.
(생명주기 동안 ref 값은 유지가 된다)

 

다음의 코드를 통해 Ref와 State, let의 차이를 알아보자 

 

  const [count, setCount] = useState(0);
  const countRef = useRef(0);
  let countVariable = 0;
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
  });

  const increaseRef = () => {
    countRef.current +=1;
  }

  const increaseState = () => {
    setCount(prev => prev + 1);
  }

  const increaseVariable = () => {
    countVariable+=1;
  }
  <p>Ref { countRef.current</p> // 0
  <p>State {count</p> //0
  <p>Variable {count} </p>
  <p>I rendered {renderCountRef.current} times</p>

  <input onChange={(e) => setValue(e.target.value)} value = {value}/>

    <button onClick={increaseRef}>Ref +</button>
    <button onClick={increaseState}>State + </button>
    <button onClick={increaseVariable}>Variable +</button>

 

1. Ref는 버튼을 눌러 값을 증가시키지만, 그때마다 화면에 랜더링 되지 않는다(생명주기 동안 ref 값은 유지)

2. State는 버튼을 눌러 값을 증가시키면 그때마다 화면에 랜더링되어 값이 출력된다.

3. Variable은 버튼을 눌러 값을 증가시키면, 값은 증가되지만 리랜더링되면 값은 초기화된다.