3์ฃผ ๋ธ๋ก๊น ์ฑ๋ฆฐ์ง~~๐ป โ๏ธ
๋ฆฌ์กํธ์ ์ฃผ์ ํน์ง ์ค ํ๋๋ ๊ฐ์๋์ ์ฌ์ฉํ๋ค๋ ๊ฒ์ด๋ค. react-dom ํจํค์ง๋ ์ฑ์ ์ต์์ ์์ค์์ ์ฌ์ฉํ ์ ์๋ค. ๋ฆฌ์กํธ๋ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ตฌ์ฑํ๋ค. ํ์ง๋ง ๋ธ๋ผ์ฐ์ ๋ CSS, HTML ๊ทธ๋ฆฌ๊ณ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ ์ ์๋ค. ๋ฆฌ์กํธ๋ฅผ ๋ณด๋ฉด ์์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ค๋ฅธ ๋ฌธ๋ฒ์ ๋ณผ ์ ์๋ค. ์ด๋ฌํ ๋ค๋ฅธ ๋ถ๋ถ์ Babel์ ํตํด ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํ๋์ด์ผ ํ๋ค. HTML ๊ณผ ์ฐ๊ฒฐํ๋ ์์ ์ด ํ์ํ๋ฐ ๊ทธ ์์ ์ React-Dom์ด ํ๊ฒ๋๋ค.
๊ฐ์๋์ด๋, ์ค์ DOM์ ๋ฉ๋ชจ๋ฆฌ์ ๋ณต์ฌํด์ค ๊ฒ์ด๋ผ ์๊ฐํ๋ฉด ๋๋ค.
๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด ๊ฐ์๋์ ๋ ๋๋ง๋๊ณ ์ด์ ์ ์๊ธด ๊ฐ์๋๊ณผ ๋น๊ตํด์ ๋ฐ๋ ๋ถ๋ถ๋ง ์ค์ ๋์ ์ ์ฉ์์ผ์ค๋ค. ๋ฐ๋ ๋ถ๋ถ์ ์ฐพ์์ ๋ฐ๊ฟ์ฃผ๋ ๊ณผ์ ์ Diffing์ด๋ผ๊ณ ๋ถ๋ฅด๋ฉฐ, ๋ฐ๋ ๋ถ๋ถ์ ์ค์ ๋์ ์ ์ฉ์์ผ ์ค๋ค. ์์๊ฐ ์ฌ๋ฌ๊ฐ ๋ณํ์๋๋ผ๋ ํ๋ฒ์ ๋ฌถ์ด์ ์ค์ ๋ ์์ ์ ํด์ฃผ๊ธฐ ๋๋ฌธ์ ์๊ฐ๊ณผ ๋น์ฉ์ด ์ ์ฝ๋๋ ํจ๊ณผ๊ฐ ์๋ค
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./app";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
์์ฒ๋ผ ReactDOM.render()๋ฅผ ํตํ์ฌ ์ฐ๊ฒฐํ ์ ์๋ค.index.js์์ ์ต์์ root์ ์ฐ๊ฒฐํ๋ ์ฝ๋๋ฅผ ๋ณผ ์ ์๊ณ , ์ฐ๋ฆฌ๋ <App>
์ปดํฌ๋ํธ๋ถํฐ ์์ํด์ ์ปดํฌ๋ํธ๋ค์ ์์ฑํ์ฌ App์ ๋ง๋ค ์ ์๋ค.
HTML์ ์์ฑํ ๋, div ๋ฑ์ DOM ์์์ ์ด๋ฆ์ ๋ฌ ๊ฒฝ์ฐ <div id="my-id">
์ ๊ฐ์ด id๋ฅผ ์ฌ์ฉํ๋ค. ์ด๋ ๊ฒ ํ๋ฉด ํน์ ํ id์ ํด๋นํ๋ DOM ์์์๋ง ์คํ์ผ์ ๋ฐ๋ก ์ ์ฉํ๊ฑฐ๋, ์๋ฐ์คํฌ๋ฆฝํธ์์ ํด๋น DOM ์์์ ์ ๊ทผํ์ฌ ์ฌ๋ฌ ๊ฐ์ง ์์
์ ํ ์ ์๋ค. HTML์ ์์ฑํ ๋ ์ด๋ ๊ฒ id๋ฅผ ๋ถ์ด๋ ๊ฒ์ฒ๋ผ, ๋ฆฌ์กํธ์์๋ DOM์ ์ ํํด ์ง์ ์ ๊ทผํ๊ธฐ ์ํด ref๋ฅผ ์ฌ์ฉํ๋ค.
const ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ = useRef(์ฐธ์กฐ์๋ฃํ)
// ์ด์ ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ ๋ณ์์ ์ด๋ค ์ฃผ์๊ฐ์ด๋ ๋ด์ ์ ์์ต๋๋ค.
return (
<div>
<input ref={์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ} type="text" />
{/* React์์ ์ฌ์ฉ ๊ฐ๋ฅํ ref๋ผ๋ ์์ฑ์ ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ์ ๊ฐ์ผ๋ก ํ ๋นํ๋ฉด*/}
{/* ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ ๋ณ์์๋ input DOM ์๋ฆฌ๋จผํธ์ ์ฃผ์๊ฐ ๋ด๊น๋๋ค. */}
{/* ํฅํ ๋ค๋ฅธ ์ปดํฌ๋ํธ์์ input DOM ์๋ฆฌ๋จผํธ๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค. */}
</div>);
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>);
}