React - useRef()

hyo·2022년 10월 28일
0

REACT

목록 보기
4/6
post-thumbnail

useState 와 useRef 비교

useState()

import { useState } from "react";

const StateTest = () => {
  const [count, setCount] = useState(0); // 상태값
  let num = 0; // 함수내부의 변수
  const counterState = () => { // num변수의값을 1씩증가, count state의 값을 변경 시킬 함수
    num = num + 1;
    setCount(count + 1);
  };
  console.log(`state의 값 : ` + count);
  console.log(`num :` + num);
  console.log("렌더링!");

  return (
    <div>
      <Div>state : {count}</Div>
      <Btn onClick={counterState}>+</Btn>
      // 버튼클릭시 함수실행
    </div>
  );
};

export default RefTest;

위의 코드를 브라우저에 띄워보면

이렇게 나온다.

저기서 버튼을 클릭하면 count 상태의 값은 1씩증가 될것이다.
하지만 num의 값도 1씩 추가될까??
아니다! state의 값은 변경될때마다 렌더링되며
리렌더링이 될때마다 함수가 다시 불려와지는거기 때문에
함수내부의 변수의 값이 다시 초기화된다.

버튼을 세번 눌렀을때 화면 ->

위와같이 num의 값은 그대로 0으로 초기화시켜서 나온다.


useRef()

useRefuseState와 같이 값을 저장하는 공간, 즉 저장소이다.

위의 state를 사용했을때 state값이 변경될때마다 리렌더링이 될때 생길수 있는 문제점을 해결하기 위해 useRef를 사용한다.

useRef()
-> ref안의 값이 변경되어도 -> No 렌더링 (불필요한 렌더링을 막음)
-> component 아무리 렌더링이 되어도 ref안에 저장되어있는 변수들의 값이 변하지 않고 유지된다!
-> 변경시 렌더링이 발생하지 않게 하고싶을때 편리함!

import {useRef} from "react";

const TestRef = () => {
  const countRef = useRef(0);
  
  console.log(countRef) // ref에 저장하면 어떤식으로 나오는지 찍어본다.
  
  return (
    <div>
      
    </div>
  )
}

위의 코드를 출력하면
countRef의 값은 콘솔에 {current: 0} 이라고 출력된다.
ref는 하나의 object이고 ref안에는 current라는 키가있고 값으로는 내가 설정한 초기값이 들어온다!
-> ref안의 값에 접근하고 싶다면 -> countRef.current

import { useState } from "react";

const StateTest = () => {
  const [count, setCount] = useState(0); // 상태값
  const countRef = useRef(0);
  
  const counterState = () => { // count state의 값을 변경 시킬 함수
    setCount(count + 1);
  };
  
  const counterRef = () => {
    countRef.current = countRef.current + 1;
  };
  
  console.log(`state의 값 : ` + count);
  console.log("렌더링!");
  console.log(countRef.current);

  return (
    <div>
      <Div>state : {count}</Div>
      <Btn onClick={counterState}>+</Btn>
      <Div>Ref : {countRef.current}</Div>
      <Btn onClick={counterRef}>+</Btn>
    </div>
  );
};

위의 코드로 브라우저에 열어보면

위와 같은 화면이 나온다.
여기서 state에 있는 버튼을 누르면 아까 보았듯이 리렌더링되며 state값이 변경된다.
하지만 Ref에 저장된 값이 변경되게끔 Ref에 있는 버튼을 계속 누르면 어떻게될까??
값이 변해도 리렌더링 되지 않는다 했다.

아래는 Ref 버튼을 5번 눌렀을때 출력된 모습이다.

아무 변화가 없다. -> 렌더링이 되지 않았기때문에!
그럼 정말 아무변화가 없던걸까??
아니다! 렌더링이 되지 않을뿐 Ref의 값은 변경되었다.
어떻게 확인해볼까? 렌더링이 되지않아 console.log() 가 다시 불려와지지 않는다.
-> 렌더링이 되게끔 state값을 변경해주면 리렌더링이 된다.

State 버튼을 한번 눌러보자.

-> 처음에 Ref버튼 5번 누르고 State버튼을 1번 눌렀으므로 아래와 같이 출력되는걸 볼 수 있다.

profile
개발 재밌다

0개의 댓글