Today’s Trouble
textarea의 contents가 늘어나면 자동으로 textarea의 높이가 조절되는 것이 아니라 textarea 내에 스크롤이 생기는 문제 발생, 아래에 업로드 이미지가 들어가야 하므로 textarea의 height값을 고정시킬 수는 없음
문제 해결
1. height값 자동 조절
export function PostUploadForm() {
const textRef = useRef(null);
const handleResizeHeight = () => {
textRef.current.style.height = `${textRef.current.scrollHeight}px`;
};
return (
<S.ContentInput onInput={handleResizeHeight} ref={textRef} />
)
}
JavaScript
복사
useRef를 통해 textarea를 가리키는 DOM을 찾은 후,
input 이벤트가 트리거 될 때마다 current.style.height를 current.scrollHeight로 재설정 해주도록 한다.
Element.scrollHeight
- 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함
- 수직 스크롤바를 사용하지 않고 요소의 콘텐츠를 모두 나타낼 때 필요한 최소 높이값과 동일
위와 같은 로직 작성 시에
백스페이스바(지우기)를 눌렀을 때에는 textarea의 높이가 줄어들지 않는 문제가 발생한다.2. backspace 눌렀을 때에도 높이 자동 조절
export function PostUploadForm() {
const textRef = useRef(null);
const handleResizeHeight = () => {
textRef.current.style.height = 'auto';
textRef.current.style.height = `${textRef.current.scrollHeight}px`;
};
return (
<S.ContentInput onInput={handleResizeHeight} ref={textRef} />
)
}
JavaScript
복사
높이값이 처음으로 초기화 되지 않기 때문에 발생하는 오류이므로 auto값으로 초기화를 해 주면 해결할 수 있다.
위와 같은 로직 작성 시에
자동으로 높이 조절은 되는데 한 줄~두 줄 작성 시에 아래에 여백이 생기는 문제 발생, height로 조절을 해 주어도 조절이 되지 않는다.3. textarea 하단 여백 해결
export const ContentInput = styled.textarea.attrs({
placeholder: '게시글 입력하기...',
rows: '1',
})``
JavaScript
복사
textarea의 rows값이 명시되어있지 않기 때문에 발생하는 문제이다.
textarea는 rows라는 속성을 가지고 있고, rows는 텍스트 입력 영역 중 보이는 영역의 라인 수를 명시한다. 기본값이 2이기 때문에 속성을 따로 지정해 주지 않으면 항상 2줄의 텍스트를 보여주게 된다.
따라서 rows 속성에 1을 지정해 주면 해결할 수 있다.
이렇게만 한다면 문제해결 완료
