React를 이용해서 개발하다보면 특정 HTML Element에 접근해야 하는 경우가 있습니다. React 엘리먼트 접근/제어 방법인 ref 사용법을 살펴보도록 하겠습니다.
목차
React 엘리먼트 접근을 위한 ref property
React로 개발하면서 엘리먼트에 직접 접근하거나 제어해야 하는 경우에 useRef를 사용할 수 있습니다.
const ref = useRef();보통 Javascript에서는 document.getElementById()와 같은 메서드를 활용해서 객체에 직접 접근하고 제어합니다만, React에서는 useRef()를 이용해서 해당 엘리먼트에 접근합니다.
예제: 보이지 않는 Input 엘리먼트에 접근하기
파일을 업로드하기 위해서 <input type=”file”> HTML 태그를 이용하는 경우가 있습니다. 그런데 해당 태그가 보여지는 모습은 파일이름과 파일 선택 버튼 2개로 구성되어 있습니다. 이런 인터페이스가 마음에 들지 않는 경우에 해당 태그는 보이지 않게(invisible) 설정을 하고, 해당 엘리먼트에 접근해서 기능을 수행하게 해야 할 때가 있습니다.
간략히 작성한 App.js 입니다.
import './App.css';
import {useRef, useState} from "react";
function App() {
const selectFileRef = useRef();
const [filename, setFilename] = useState(null);
const onClickSelectFile = () => {
selectFileRef.current.click();
};
const onChangeFile = (e) => {
setFilename(e.target.files[0].name);
};
return (
<div className="App">
<input type="file" ref={selectFileRef} onChange={onChangeFile}/>
<div>
파일이름: {filename}<br/>
<button onClick={onClickSelectFile}>업로드할 파일 선택하기</button>
</div>
</div>
);
}
export default App;아래의 업로드할 파일 선택하기 버튼을 눌렀을 때 위에 있는 Choose File 버튼을 눌렀을 때와 동일하게 파일 선택창이 열리게 했습니다. 그리고 선택한 파일 이름을 가져와서 보여주는 것까지 간단히 처리해 보았습니다.
위의 코드에서 기존 input type=”file” 엘리먼트를 보이지 않게 처리하면, 자신만의 새로운 인터페이스로 파일 선택 화면을 꾸밀 수 있게 됩니다.
스타일시트를 별도로 분리하면 좋겠지만, 지금은 단순히 코드 이해를 위해 스타일시트를 그냥 코드로 다 넣었습니다. 위의 코드와 다른 것이라면, input type=”file” 엘리먼트를 보이지 않게 한 것과 button 엘리먼트에 스타일시트를 일부 적용한 것입니다.
return (
<div className="App">
<input type="file" ref={selectFileRef} onChange={onChangeFile} style={{display: "none"}}/>
<div style={{width: 500, height: 300}}>
선택한 파일이름: {filename}<br/>
<button onClick={onClickSelectFile} style={{border: "1px solid gray", backgroundColor: "#880088", color: "white", borderRadius: 5, width: 200, height: 35, fontSize: 18, cursor: "pointer"}}>업로드할 파일 선택하기</button>
</div>
</div>
);
이와 같은 방식으로 자신만의 파일선택 UI/UX를 구성할 수 있습니다.
관련 자료
React의 docs의 useRef 페이지를 참고했습니다.