useRef에 대한 이해와 주기함수들

황준·2023년 2월 8일

개발 공부

3줄 요약

1.useState vs useRef

2.렌더링 변화량 측정

3.setTimeout, setInterval 함수

취준으로 할게 너무 많은데,, 궁금한게 많다보니 계속해서 개발관련된 자료를 찾게된다.

그전까지 useRef에 대해 이해도가 낮았기때문에, useRef에 대해 사용하지 않았다.
다른 프로젝트를 뜯어보니 useRef를 효율적으로 사용한 분들이 있어서 궁금증이 생겼고,
이를 토대로 조사해보았다.

1.useState vs useRef

https://medium.com/humanscape-tech/react-usestate-vs-useref-4c20713f7ef

usestate와 useRef는 아래의 식으로 요약할 수 있다.

1번식


import React, {useState} from 'react';

const Test = () => {
  const [letter, setLetter] = useState('');
  const onClick = () => {
    setLetter('Humanscape!');
  };

  return (
    <div>
      <button onClick={onClick}>Humanscape?</button>
      <b>{letter}</b>
    </div>
  );
};

export default Test;

2번식

import React, {useRef} from 'react';

const Test2 = () => {
  const letter = useRef('');

  const onClick = () => {
    letter.current = 'Humanscape!';
    console.log(letter.current);
  };
  
  return (
    <div>
      <button onClick={onClick}>Humanscape?</button>
    </div>
  );
};

export default Test2;

usestate는 값이 업데이트가 되면 리렌더링 되서 화면에 값이 출력 되지만,
useRef는 리렌더링이 되지 않기때문에 letter라고 써놓아도 값이 변하지 않는다.
만약에 useRef letter을 써놨다면 초기값이 남아있을 것이다.

2.렌더링 변화량 측정

구체적인 예시도 몇개 더 보면 좋을거 같아서 조금 더 찾아보았다.

https://velog.io/@skawnkk/useState-vs-useRef

1번식

function SignUp() {
  const [mail, setMail] = useState<string>('');
  const [result, setResult] = useState<string>('');

  console.log('render');

  const onSubmit = useCallback((e) => {
    e.preventDefault();
    setResult(result);
  }, []);
  return (
    <div id="container">
      <Form onSubmit={onSubmit}>
        <Label id="email-label">
          <span>이메일 주소</span>
          <div>
            <Input type="email" id="email" name="email" value={mail} onChange={(e) => setMail(e.target.value)} />
          </div>
        </Label>
        <span>결과: {result}</span>
        <Button type="submit">회원가입</Button>
      </Form>
    </div>
  );
}
export default SignUp;

2번식

function SignUp() {
  const mailRef = useRef<HTMLInputElement | null>(null);
  const [mail, setMail] = useState<string | null>('');

  console.log('render');

  const onSubmit = useCallback((e) => {
    e.preventDefault();
    const { current } = mailRef;
    if (!current) return;
    else setMail(current.value);
  }, []);
  return (
    <div id="container">
      <Form onSubmit={onSubmit}>
        <Label id="email-label">
          <span>이메일 주소</span>
          <div>
            <Input type="email" id="email" name="email" ref={mailRef} />
          </div>
        </Label>
        <span>결과: {mail}</span>
        <Button type="submit">회원가입</Button>
      </Form>
    </div>
  );
}
export default SignUp;

극적인 변화다...

Input type="email" id="email" name="email" value={mail} onChange={(e) => setMail(e.target.value)}

Input type="email" id="email" name="email" ref={mailRef}

usestate를 썼을 경우엔 onchange를 사용해 글자를 입력할 때마다 렌더링이 되었지만,
ref로 바꿔 선언한 경우에는 렌더링 횟수가 극적으로 줄어서 보기 좋았다.
usestate를 react.memo, usememo, usecallback으로 컨트롤 할 생각만 했었는데,
극적인 변화를 만들 수 있는 것을 보고 놀랐다.