useRef inputRef.current값이 무조건 bio로만 ... - 인프런

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

5.10) useRef로 컴포넌트의 변수 생성하기

useRef inputRef.current값이 무조건 bio로만 나오는 현상이 있습니다.

해결된 질문

작성

const inputRef = useRef()

const onSubmit = () => {
        if(input.name === "" ){
            console.log(inputRef.current)
            inputRef.current.focus()
        }
    }


return (
        <div>
            <div>
                <input 
                ref={inputRef} 
                name="name" 
                value={input.name} 
                onChange={onChange} 
                type="text"/>
                
            </div>
            <div>
                <input 
                ref={inputRef} 
                name="birth" 
                value={input.birth} 
                onChange={onChange} 
                type="date" />
            </div>
            <div>
            </div>
            <div>
                <textarea 
                ref={inputRef} 
                name="bio" 
                value={input.bio} 
                onChange={onChange} >
                </textarea>
            </div>

            <button onClick={onSubmit}>제출</button>
        </div>
    )

위와같은 코드에서 onSubmit함수내 console.log(inputRef.current)를 해보면 무조건 bio만 출력됩니다. 또한 포커스도 어떤 경우에서든 bio가 있는 textarea쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

레퍼런스 객체는 한번에 하나의 DOM만 참조할 수 있습니다.

질문주신 코드에서는 inputRef 라는 레퍼런스 객체를 이용해 name <input>과 birth <input> 그리고 bio <textarea>를 모두 참조하고 있는데요 이는 잘못된 사용입니다. 이렇게 될 경우 의도와 다르게 동작할 수 있습니다.

만약 각각의 <input>을 참조하는 레퍼런스 객체가 필요하시다면 <input> 별로 하나씩 다 만들어주셔야 합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 양진영님!

문제를 설명해 주셔서 감사합니다. 현재 겪고 계신 문제는 useRef를 여러 개의 요소에 동일하게 사용했기 때문입니다. useRef는 하나의 DOM 요소만을 참조할 수 있으며, inputRef는 마지막에 할당된 요소인 textarea만을 가리키게 됩니다. 그래서 모든 상황에서 bio만 출력되며, focus도 textarea로만 가게 됩니다.

각각의 input과 textarea에 대해 하나의 useRef를 사용해야 합니다. 각 요소에 대해 별도의 ref를 생성하면 문제를 해결할 수 있습니다. 예를 들어:

const nameInputRef = useRef();
const birthInputRef = useRef();
const bioInputRef = useRef();

const onSubmit = () => {
    if (input.name === "") {
        console.log(nameInputRef.current);
        nameInputRef.current.focus();
    }
    // 추가적인 조건에 맞춰 다른 ref들에 접근할 수 있습니다.
}

return (
    <div>
        <div>
            <input
                ref={nameInputRef}
                name="name"
                value={input.name}
                onChange={onChange}
                type="text"
            />
        </div>
        <div>
            <input
                ref={birthInputRef}
                name="birth"
                value={input.birth}
                onChange={onChange}
                type="date"
            />
        </div>
        <div>
            <textarea
                ref={bioInputRef}
                name="bio"
                value={input.bio}
                onChange={onChange}
            />
        </div>
        <button onClick={onSubmit}>제출</button>
    </div>
)

이와 같이 각각의 요소에 대해 별도의 ref를 할당하여 사용하시면, inputRef.current로 인해 발생한 문제를 해결할 수 있습니다. 추가적인 정보를 필요로 하시면 아래의 링크를 확인해 주세요:

useRef와 useState의 사용 기준: 이 게시물에서는 useRef와 useState의 차이점과 사용 시기를 설명하고 있습니다.
useRef 사용할 때 current는 this와 같나요?: 리액트에서 useRef 사용법과 current의 의미를 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

useRef inputRef.current값이 무조건 bio로만 나오는 현상이 있습니다.