document.getElementById 류를 사용하지 않고
왜 useRef의 별도의 방법을 제공할까?
비효율이 나 올수있다. React가 알아서 useRef로 DOM을 관장하고 있다.
element이외에도 별도의 저장공간으로도 사용 할수있다.
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<!-- 바벨 컴파일러 불러오기 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<!-- 바벨이 읽을 수 있게 만들어 준다. -->
<!-- 바벨은 자바스크립트 컴파일러! JSX표현을 자바스크립트가 이해할 수 있는 표현으로 바꾸어준다. -->
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const inputRef = React.useRef();
const divRef = React.useRef();
React.useEffect(() => {
inputRef.current.focus();
setTimeout(() => {
divRef.current.style.backgroundColor = "pink"
}, 1000);
}, []);
return (
<>
<input ref={inputRef} />
<div ref={divRef} style={{height : 100, width : 300, backgroundColor : "brown"}}
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</body>
</html>
잠실사는 주니어 개발자