[React] textarea의 높이를 가변적으로 설정하기

라이징 테스트에서 원티드를 클론코딩하던 도중 이력서 작성 페이지에서 이슈가 발생했다. 실제 원티드에서는 textarea에 내용을 입력하면 라인수에 따라 textarea 영역이 늘어난다. 즉 아래 요소들이 아래로 밀린다. 그러나 나의 경우, textarea의 height는 고정돼있고 스크롤에 의해 글 내용이 보여졌다. 이를 해결하기 위해 useRef 훅과 onKeyUp, onKeyDown을 사용했다.

const ref = useRef();

...
                        
<textarea
	ref={ref}
	onKeyDown={() => {
		autoResizeTextarea(ref);
	}}
	onKeyUp={() => {
		autoResizeTextarea(ref);
	}}
	className="detail"
	name="detail"
	placeholder="세부사항"
	onChange={handleInput}
	defaultValue={awardList[idx].detail}
/>

onKeyDown은 키보드를 눌렀을 때, onKeyUp은 키보드를 눌렀다가 뗐을 때 발생한다. 즉 textarea에 내용을 입력하는 동안 autoResizeTextarea 함수가 실행되도록 했다. autoResizeTextarea 함수는 아래와 같다.

const autoResizeTextarea = (ref) => {
    ref.current.style.height = "auto";
    let height = ref.current.scrollHeight;
    ref.current.style.height = `${height + 8}px`;
};

ref가 관찰하는 요소의 scrollHeight를 감지하여 높이를 설정했다. scrollHeight는 스크롤되는 요소 전체, 즉 textarea의 글 전체의 높이로 계산된다. 전체 높이가 height가 되므로 스크롤바가 생기지 않고 원하는 대로 동작이 된다.