TEXTAREA에 마지막 한 글자가 남아있는 현상 해결

[june0216]

문제

이렇게 "안녕"이라고 보내고 마지막 글자인 "녕"이 TextArea에 남아있는 문제

원인

React 상태(setMessage(""))가 즉시 반영되지 않을 수 있어, 비동기 onSend 함수와 상태 초기화 간에 타이밍 충돌이 발생할 가능성이 있습니다.
초기화와 메시지 전송이 동시에 처리되면, 의도하지 않은 상태가 렌더링될 수 있습니다.
React 상태(setMessage)와 DOM 조작(textareaRef.current.value) 간의 충돌

좋은 질문이에요! React에서 setMessage("")를 호출할 때 발생할 수 있는 "충돌"은 주로 React 상태 업데이트와 DOM 직접 조작의 비동기 타이밍 차이에서 비롯됩니다. 이 문제를 정확히 이해하려면 React의 상태 관리와 DOM 렌더링의 작동 방식을 알아야 합니다.

---

1. 문제의 원인: React 상태 업데이트와 DOM 이벤트 간의 비동기 처리

React에서 상태를 업데이트하는 setState 함수(setMessage 등)는 비동기로 작동합니다. 즉, setMessage("")를 호출해도 상태 값이 즉시 변경되지 않고, React는 다음 렌더링 사이클에서 상태를 업데이트합니다.

상황

• setMessage("")를 호출해 입력창을 비우려고 할 때, React는 내부적으로 상태를 비동기로 업데이트합니다.
• 동시에, onChange 이벤트는 사용자가 입력한 값을 계속 DOM에서 가져와 상태를 업데이트하려고 시도합니다.

결과

1. 사용자가 입력 중:
   • 사용자가 마지막 글자를 입력할 때, onChange가 setMessage를 호출하며 새로운 값을 업데이트합니다.
2. React 상태 초기화:
   • setMessage("")로 상태를 초기화하려고 하지만, React와 DOM 간의 동기화가 끝나기 전에 onChange가 다시 발생하여 마지막 입력 값이 상태에 반영됩니다.

이러한 타이밍 충돌로 인해 입력 창에 마지막 글자가 남아 있는 것처럼 보입니다.

---

2. 왜 React 상태와 DOM을 직접 조작하면 문제가 생기나?

React는 상태를 기반으로 UI를 관리하므로, 상태와 DOM 간의 일관성이 매우 중요합니다. 그러나 아래와 같은 상황에서는 문제가 발생합니다:

2.1 React 상태와 DOM을 동시에 조작할 때

• React 상태(message)와 DOM (textareaRef.current.value)를 동시에 조작하면, React의 상태 업데이트 타이밍과 DOM 조작이 서로 다른 순서로 실행될 수 있습니다.
• 예를 들어:

  setMessage(""); // 상태 초기화 요청
  textareaRef.current.value = ""; // DOM 직접 초기화

  여기서 React가 렌더링을 완료하기 전에 DOM 이벤트(onChange)가 발생하면, 마지막 글자가 상태에 반영됩니다.

2.2 React 상태 업데이트는 비동기적으로 동작

React의 setState는 요청된 상태 업데이트를 즉시 적용하지 않고, 다음 렌더링 사이클에서 반영합니다. 이로 인해 상태와 DOM 간의 데이터 불일치가 생길 수 있습니다.

---

3. 해결 방법: React 상태를 단일 진실 소스로 사용

이 문제를 해결하려면 다음 두 가지 원칙을 따라야 합니다:

3.1 React 상태를 UI의 단일 진실 소스로 사용

• DOM 조작(textareaRef.current.value)을 하지 않고, 항상 React 상태(message)를 기준으로 입력 창을 제어합니다.
• 예:

  value={message} // 상태와 UI 연결
  onChange={(e) => setMessage(e.target.value)} // 상태 업데이트

3.2 상태 초기화를 전송 후로 지연

• 전송 완료 후에만 상태를 초기화함으로써, React 상태와 DOM 간의 데이터 불일치를 방지합니다.
• 초기화는 다음 렌더링 사이클에서 안전하게 처리됩니다.

---

4. 정리: 충돌의 원인

• setMessage("")와 DOM 조작(textareaRef.current.value)이 동시에 발생하여 React 상태와 DOM 간의 비일관성이 생깁니다.
• onChange 이벤트가 마지막 입력 값을 상태로 업데이트하면서 비동기 상태 초기화와 충돌합니다.
• React의 상태 업데이트는 비동기적이므로, 초기화 시점을 잘못 설정하면 이러한 문제가 발생할 수 있습니다.

---

5. 최종 권장 해결 방법

• 항상 React 상태(message)를 기준으로 UI를 렌더링하고, DOM 조작을 피합니다.
• 상태 초기화는 네트워크 요청(전송 작업)이 완료된 후에만 수행하여 충돌을 방지합니다.

해결 1

textarea에 한 글자가 남아있는 문제는 React 상태 업데이트(setMessage), DOM 조작(textareaRef.current.value), 그리고 이벤트(onChange) 간의 동기화 문제 때문입니다. 이 문제를 해결하기 위해 상태와 DOM의 값을 완벽히 동기화해야 합니다.

최종적으로 수정된 해결 코드

아래 코드는 onChange와 handleSend 간의 상태 업데이트 문제를 해결하여 마지막 글자가 남지 않도록 만듭니다.

---

수정 코드

const handleSend = async () => {
    if (!message.trim() || isProcessing) {
        console.log("handleSend skipped: either empty message or already processing.");
        return;
    }

    console.log("handleSend executed");
    setIsProcessing(true);

    const currentMessage = message.trim();

    try {
        // 비우기 전에 메시지 전송
        await onSend(currentMessage);

        // 입력창과 높이 즉시 초기화 (React 상태와 DOM 동기화)
        setMessage(""); // React 상태 초기화
        if (textareaRef.current) {
            textareaRef.current.value = ""; // DOM 텍스트 초기화
            textareaRef.current.style.height = "auto"; // 높이 초기화
        }
    } catch (error) {
        console.error("Message send failed:", error);
    } finally {
        setIsProcessing(false); // 전송 상태 초기화
    }
};

const handleInputChange = (e) => {
    const inputValue = e.target.value;
    setMessage(inputValue); // 상태 업데이트
    if (textareaRef.current) {
        const { scrollHeight, style } = textareaRef.current;
        style.height = "auto"; // 높이 초기화 후
        style.height = `${scrollHeight}px`; // 새로운 높이 설정
    }
};

---

핵심 변경점

1. textareaRef.current.value와 setMessage의 동기화:

   • 메시지를 전송한 후, setMessage("")와 textareaRef.current.value = ""를 모두 호출하여 React 상태와 DOM의 값을 동시에 초기화합니다.

2. 전송 후에 초기화:

   • onSend 호출 후 초기화하도록 순서를 명확히 설정했습니다.

3. 높이 초기화 추가:

   • textareaRef.current.style.height = "auto"를 사용하여 높이도 제대로 초기화합니다.

---

코드 전체

"use client";
import { useState, useRef } from "react";

const ChatInput = ({ onSend = () => Promise.resolve() }) => {
    const [message, setMessage] = useState("");
    const [isProcessing, setIsProcessing] = useState(false);
    const textareaRef = useRef(null);

    const handleInputChange = (e) => {
        const inputValue = e.target.value;
        setMessage(inputValue); // 상태 업데이트
        if (textareaRef.current) {
            const { scrollHeight, style } = textareaRef.current;
            style.height = "auto"; // 초기화 후
            style.height = `${scrollHeight}px`; // 새로운 높이 설정
        }
    };

    const handleSend = async () => {
        if (!message.trim() || isProcessing) {
            console.log("handleSend skipped: either empty message or already processing.");
            return;
        }

        console.log("handleSend executed");
        setIsProcessing(true);

        const currentMessage = message.trim();

        try {
            // 비우기 전에 메시지 전송
            await onSend(currentMessage);

            // 입력창과 높이 즉시 초기화 (React 상태와 DOM 동기화)
            setMessage(""); // React 상태 초기화
            if (textareaRef.current) {
                textareaRef.current.value = ""; // DOM 텍스트 초기화
                textareaRef.current.style.height = "auto"; // 높이 초기화
            }
        } catch (error) {
            console.error("Message send failed:", error);
        } finally {
            setIsProcessing(false); // 전송 상태 초기화
        }
    };

    const handleKeyDown = (e) => {
        if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            if (!isProcessing && message.trim()) {
                handleSend();
            }
        }
    };

    return (
        <div className="flex items-center px-4 py-1 mb-8 bg-white w-[360px] mx-auto rounded-full border border-gray-300">
            <textarea
                ref={textareaRef}
                className="flex-1 bg-transparent border-none px-3 py-2 focus:outline-none focus:ring-0 resize-none overflow-hidden text-gray-600 placeholder-gray-400"
                placeholder="오늘도 저속노화 하셨나요?"
                value={message}
                onChange={handleInputChange}
                onKeyDown={handleKeyDown}
                rows={1}
                style={{ height: "auto" }}
            />
            <button
                onClick={() => {
                    if (!isProcessing) {
                        handleSend();
                    }
                }}
                className={`ml-2 bg-transparent p-2 hover:opacity-80 ${
                    isProcessing ? "opacity-50 cursor-not-allowed" : ""
                }`}
                disabled={isProcessing}
            >
                {isProcessing ? (
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="animate-spin h-5 w-5 text-gray-600"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                    >
                        <circle cx="12" cy="12" r="10" strokeLinecap="round" />
                    </svg>
                ) : (
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-5 w-5 text-gray-600"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                    >
                        <path strokeLinecap="round" strokeLinejoin="round" d="M22 2L11 13" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M22 2L15 22L11 13L2 9L22 2Z" />
                    </svg>
                )}
            </button>
        </div>
    );
};

export default ChatInput;

---

테스트 결과

• 입력창 초기화(setMessage(""))와 textareaRef.current.value = ""가 완벽히 동기화되어 마지막 글자가 남지 않습니다.
• 텍스트 입력과 높이 초기화가 안정적으로 동작합니다.

하지만 입력 텍스트가 빠르게 없어지지 않아 UX적으로 별로임