Ref
- ์ฐธ์กฐ(reference)์ ์ค์๋ง๋ก, React์์ DOM ์์๋ ํด๋์ค ์ปดํฌ๋ํธ ์ธ์คํด์ค์ ๋ํ ์ง์ ์ ์ธ ์ฐธ์กฐ๋ฅผ ์์ฑํ๊ณ , ์ ์ฅํ๋ ๋ฐ ์ฌ์ฉ๋๋ ๊ฐ์ฒด ์
๋๋ค.
์ฌ์ฉ ๋ชฉ์
- DOM ์์์ ๋ํ ์ฐธ์กฐ
๐ Ref๋ฅผ ์ฌ์ฉํ์ฌ DOM ์์๋ฅผ ์ง์ ์กฐ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ํฌ์ปค์ค ์ค์ , ํ
์คํธ ์ ํ, ์ ๋๋ฉ์ด์
๋ฑ์ ๊ตฌํํ ๋ ์ ์ฉํฉ๋๋ค.
๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ id๋ฅผ ์ฌ์ฉํ๋ฉด ์๋๋ ์ด์ !!!
๐ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ์์์๋ id๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. JSX ์์์ DOM์ id๋ฅผ ๋ฌ๋ฉด ํด๋น DOM์ ๋ ๋๋ง ํ ๋ ๊ทธ๋๋ก ์ ๋ฌ ๋ฉ๋๋ค. ํ์ง๋ง ํน์ํ ๊ฒฝ์ฐ๊ฐ ์๋๋ฉด ์ฌ์ฉ์ ๊ถ์ฅํ์ง ์์ต๋๋ค. ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ๋ฒ ํธ์ถํ๋ ๊ฒฝ์ฐ ์ ์ผํด์ผ ํ id๊ฐ ์ค๋ณต id๋ก ๋ง๋ค์ด์ง๊ฒ ๋ฉ๋๋ค.
useRef
- React Hook ์ค ํ๋๋ก, ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ๊ณ ์ ์งํ ๋ ์ฌ์ฉํฉ๋๋ค.
- ์ด ๊ฐ์ฒด๋ .current ์์ฑ์ ๊ฐ์ง๋ฉฐ, ์ด ์์ฑ์ ์ด๊ธฐ๊ฐ์ผ๋ก ์ค์ ๋๊ณ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค.
- ์ปดํฌ๋ํธ์ ๋ ๋๋ง ์ฌ์ด์์ ๊ฐ์ ์ ์งํ๊ณ ์ ํ ๋ ์ฌ์ฉ๋๋ฉฐ, ์ฃผ๋ก ํน์ ์์์ ํฌ์ปค์ค๋ฅผ ์ค์ ํ๊ฑฐ๋ ์ ๋๋ฉ์ด์
์ ์ ์ฉํ ๋ ์ ์ฉํ ์ ์์ต๋๋ค.
ํฌ์ปค์ค ์ค์
import React, { useRef } from 'react';
function App() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</div>
);
}