[TIL] 0323

MonthSub Refactoring

특정 지점에서 스크롤이 위로 튕기는 버그 수정
→ onKeyUp에는 이벤트를 안걸어주었더니 해결됐다 (정확히 어떤 이유 때문인지는 모르겠다..)

const autoResizeTextarea = () => {
    const textarea = textRef.current;

    if (textarea) {
      textarea.style.height = 'auto';
      const height = textarea.scrollHeight;
      textarea.style.height = `${height + 24}px`;
    }
  };
  return (
    <StyledSection {...props}>
      <StyledInput
        ...
      />
      <Line />
      <StyledTextArea
        textRef={textRef}
        width="100%"
        height={`${textAreaHeight}px`}
        name="contents"
        value={value.contents || ''}
        onInput={handleInputChange}
        disabled={disabled && disabled}
        placeholder="내용을 입력해주세요"
        maxlength="5000"
        onKeyDown={autoResizeTextarea}
        // onKeyUp={autoResizeTextarea} 삭제
      />
    </StyledSection>
  );

하지만 위 방법을 적용했더니 새로운 버그가 생겼다..

textarea의 높이가 늘어날 때 'auto'로 잠시 바뀌면서 윗부분이 가려지는 버그 수정
→ textarea의 value가 변할 때마다 높이를 scrollHeight로 설정해주는 방법 사용

const ArticleEditor = ({ value, onChange, disabled, title, ...props }) => {
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const textRef = React.createRef();
  const handleInputChange = e => {
    onChange && onChange(e);
  };

  const resetTextAreaHeight = () => {
    const height = textRef.current.scrollHeight;
    textRef.current.style.height = `${height}px`;
  };

  const autoResizeTextarea = () => {
    if (textRef.current) {
      textRef.current.style.height = 'auto'; 
      // 이 부분 때문 
      // 'auto'로 재설정해주는 이유는 텍스트 영역에 0보다 큰 패딩이있는 경우 무한히 쌓이지 않도록하기 위한 것
      resetTextAreaHeight();
    }
  };

  useEffect(() => {
    setTextAreaHeight(textRef.current.scrollHeight);
  }, [textRef.current]);

  useEffect(() => {
    resetTextAreaHeight();
  }, [value.contents]);
  // autoResizeTextarea함수 실행 후와 다음 렌더링 전에 실행됨

참고 링크

하지만 텍스트를 입력할 때마다 textarea의 가장 밑으로 스크롤이 이동하는 부분은 해결하지 못했다. textarea의 특성인 것 같아서 아예 div의 contenteditable을 사용하는 방법으로 전체적인 수정을 해야할 것 같다.