인프런 커뮤니티 질문&답변

안녕하세요 강사님!

강의에서 useRef는 값이 변경되었을 때 리렌더링을 발생시키지 않으므로 값이나 DOM 요소를 참고하고 싶을 때 사용한다고 하셨는데요.

1)

강의 예제 중, 수정이 일어난 횟수를 countRef에 담기도록 하셨는데, 이 때 값이 변경되어 'onChange 함수에서 setInput 함수를 호출함으로써 리렌더링이 발생하는 것이고, countRef.current++는 리렌더링이 발생함과 동시에 값이 증가 되는 것 뿐이다'라고 이해하면 되는 것일까요? 1번 코드 참고하시면 됩니다!

2)

위처럼 이해를 하다가 문득 궁금한 것이 생겼는데, 2번 코드처럼..

useState의 input 객체에 count 프로퍼티를 추가하여 0으로 초기화 해주었습니다.

그리고 onChange 함수에서 setInput으로 count를 +1 시켜주었는데요.

1번 예제처럼 수정할 때 마다 count가 +1 되는 것을 의도하였는데,

이 때 textarea에서 ㄱ을 입력했다면,
setInput 함수는 한 번 호출되며 textarea 수정과 count 증가가 동시에 발생하고 'textarea 수정 + count 증가' 이렇게 리렌더링이 한 번 발생하는 걸까요?

3) 만약 2번 질문의 답이 '결국 setInput 함수가 한 번 호출되며 작동하는 것이므로 리렌더링은 한 번이다.' 라면, 1번과 2번 코드는 '리렌더링이 발생할 때 마다 count 증가'라는 점에서 같은 결과인 걸까요..?

질문이 좀 복잡하지만.. 답변해주시면 감사하겠습니다..!

1) useRef 사용하여 count

import { useRef, useState } from "react";

export default function Test() {
  const [input, setInput] = useState({
    name: "",
    bio: "",
  });
  const countRef = useRef(0);

  console.log(input);
  console.log(countRef.current);

  const onChange = (e) => {
    countRef.current++;

    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };
  
  return (
    <div>...</div>
  )
}

2) useState로 count

import { useState } from "react";

export default function Test() {
  const [input, setInput] = useState({
    name: "",
    bio: "",
    count: 0,
  });

  console.log(input);

  const onChange = (e) => {
    setInput({
      ...input,
      [e.target.name]: e.target.value,
      count: input.count + 1,
    });
  };
  
  return (
    <div>...</div>
  )
}