input 변경시 재렌더링

강의를 듣고 혼자 프로젝트하다가 막혀서 질문드립니다.

문제가 되는 부분은 저기에 Editor 컴포넌트(이 컴포넌트는 코드가 길어서 올린지는 못했으나 

const Editor = memo((props) => { 생략} 이렇게 memo를 써서 렌더링 한번만 되도록 하였습니다.)

 Editor 컴포넌트는 참고로 react-quill 에디터 컴포넌트로 글을 작성하는 컴포넌트입니다.

여기에다(input입력) 글을 쓰면 렌더링이 되어서 커서가 그대로 있는 게 아니라 맨 앞으로 이동해버려서

useEffect return 에다가 함수 넣고 배열은 [] 이렇게 하면 unmount될 때 한 번만 실행한다는 생각으로 아래와 같이 적었습니다.


function WritePage() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  useEffect(() => {
    return () => {
      handleContent;
    };
  }, []);
  console.log("render");

function handleContent(value) {
    console.log(value);
    setContent(value);
  }

  return (
    <div >
      <div >
        <input
          className="title_input"
          placeholder=" 제목을 입력하세요"
          value={title}
          onChange={(e) => {
            setTitle(e.target.value);
          }}
        />
        <Editor value={content} onChange={handleContent} />

하지만 똑같이 글자를 입력하면 이 WritePage가 다시 렌더링되어 버리는 이슈가 남아있어서

렌더링을 막을 수 있는 방법을 여쭈어보고자 글을 남깁니다.

 + useState대신에 useRef를 적는게 좋을까요??? useRef 쓰려고 시도는 해보았으나 useState의 setter함수를 어떻게 대체해야할지 
조금 어려워서 못했습니다. ㅠㅠ