[React] TextArea 컴포넌트 외부 입력

이전글에서 TextArea 의 딜레이 차이 때문에 
useState 함수를 한페이지에 담지 않고, 컴포넌트로 나눠서 담는 것으로 변경했었다. 

그렇게 처리를 했더니 문제가.. onChange에 직접 입력하는 게 아닌 다른 글을 TextArea 로 복사하는 기능이 동작을 안했다. 

<TextArea ref={personalityTraitRef} value={personalityTrait} placeholder={PLACEHOLDER['personalityTrait']} maxLength={300} rows={6} onChange={handlePersonalityTraitChange}/>
<ExampleBottomSheet
    id="PERSONALITY_TRAIT"
    onSelect={handlePersonalityTraitChange}
/>

이런식으로 외부 바텀 시트의 내용을 TextArea 에 입력하고 시도 했으나, 직접 입력하는 건 내부 변수를 직접 변경하니깐 적용이 잘되는데, 외부에서 저렇게 onChange 에 넣어봤자 동작을 안한다. 
정확히는 내부 함수 렌더링을 하지 되지 않았다. 

일반적으로 컴포넌트로 TextArea 를 만들고, TextArea 내부에 외부로 받은 파라메터 함수를 실행시키는 입장이였는데. 
이번에는 반대로 TextArea 컴포넌트 내부 함수를 외부에서 호출해야되는 상황이 생긴것이다. 

고민과 AI의 상담 끝에 해결했다.

useRef

 

한번도 컴포넌트 내부 함수를 외부에서 호출한 적이 없었던거 같다.

export interface TextAreaRef {
    setTextValue: (value: string) => void;
}
export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(({value, placeholder, maxLength, rows, onChange}, ref) => {
    const [localValue, setLocalValue] = useState(value);

    useImperativeHandle(ref, () => ({
        setTextValue: (newValue: string) => {
            if (newValue.length <= maxLength) {
                setLocalValue(newValue);
                onChange(newValue);
            }
        }
    }));

이런 느낌을 TextAreaRef 를 코딩해서 내부와 외부를 연결하고, 

<TextArea ref={personalityTraitRef}

const personalityTraitRef = useRef<TextAreaRef>(null);
const handleSelect = (content: string) => {
    personalityTraitRef.current?.setTextValue(content);
};

외부에서는 이런식으로 특정 컴포넌트 내부 함수를 실행시킨다.

다음에도 쓸일이 분명히 있을 거 같다.

 

---

 

 

이전글

2025.02.06 - [REACT/TROUBLE SHOOTING] - TextArea Input 딜레이 처리

TextArea Input 딜레이 처리