๐Ÿ“œ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง

Lee Jooamยท2022๋…„ 5์›” 5์ผ
0
post-thumbnail

๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์šฐ๋ฉด ์ž์ฃผ ๋“ฃ๋Š” ๋ง์ด ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ๋ณ€ํ™”ํ•œ ๋ถ€๋ถ„๋งŒ ๊ฐ์ง€ํ•ด์„œ ๊ทธ ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธ ํ•ด์ค€๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์ ์ด๋ผ๋Š” ๊ฑด๋ฐ ๋ง๋กœ๋งŒ ๋“ค์–ด์„œ๋Š” ์ž˜ ์™€๋‹ฟ์ง€ ์•Š๋Š”๋‹ค. ์ด ๋‚ด์šฉ์„ ํ•œ๋ฒˆ ํ™•์ธํ•ด๋ณด์ž.

React Element?

const elem = <button>{number}</button>;

๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๋Š” ๋ฆฌ์•กํŠธ ์•ฑ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„์ด๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์€ jsx ๋ฌธ๋ฒ•์„ ํ†ตํ•ด ๋งŒ๋“ค์–ด์ง„ ์š”์†Œ๊ฐ€ ์—˜๋ฆฌ๋จผํŠธ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

์–ผํ• ๋ณด๋ฉด HTML ํƒœ๊ทธ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์ด๊ฑด DOM ์š”์†Œ๊ฐ€ ์•„๋‹Œ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ์•กํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ Œ๋”๋ง ํ•จ์ˆ˜๋ฅผ ๊ฑฐ์ณ์•ผํ•œ๋‹ค.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(elem);

๊ณผ๊ฑฐ์—๋Š” ReactDOM.render๋กœ ํ˜ธ์ถœํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ 18 ๋ฒ„์ „๋ถ€ํ„ฐ๋Š” createRoot๋ฅผ ํ†ตํ•ด root ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ง€์ •ํ•˜๊ณ  ๊ทธ root ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํ†ตํ•ด render ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์•ผํ•œ๋‹ค.

์—ฌ๊ธฐ๊นŒ์ง€๋งŒ ๋ณด๋ฉด ๋ฐ”๋‹๋ผ js์™€ ๋”ฑํžˆ ๋‹ค๋ฅธ ๊ฒŒ ์—†์–ด ๋ณด์ธ๋‹ค. ๋ณธ๊ฒฉ์ ์ธ ์ฐจ์ด์ ์„ ์•Œ์•„๋ณด์ž.

๋ฐ”๋‹๋ผ JS, ๋ฆฌ์•กํŠธ ๋ฆฌ๋ Œ๋”๋ง ๋น„๊ต

let number = 0;
const root = ReactDOM.createRoot(document.getElementById("root"));

function setNumber() {
  console.log("hello");
  number++;
  const elem = <button children={["The current count is", number]}></button>;

  root.render(elem);
}

setInterval(setNumber, 500);

const root = document.getElementById("root");
let number = 0;

function setNumber() {
  console.log("hello");
  number++;
  const elem = `<button>The current count is {number}</button>`;


  root.innerHTML = elem;
}

setInterval(setNumber, 500);

๋‘˜์˜ ์ฐจ์ด๋ฅผ ํ™•์‹คํ•˜๊ฒŒ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ๋ฐ”๋‹๋ผ js๋Š” ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ ์ž์ฒด๋ฅผ ๋ฆฌ๋ Œ๋”๋งํ•˜๊ณ  ๋ถ€๋ชจ๊นŒ์ง€ ๋‹ค์‹œ ๋ Œ๋”๋งํ•œ๋‹ค.

ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ๋Š” button ํƒœ๊ทธ ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š” number ๊ฐ’๋งŒ ๋‹ค์‹œ ๊ทธ๋ ค์ฃผ๊ณ  ์žˆ๋‹ค.

์ด๊ฒƒ์€ button์— ํฌ์ปค์Šค๋ฅผ ์œ ์ง€ํ•˜๊ณ  ๋‘˜์˜ ์ฐจ์ด๋ฅผ ๋น„๊ตํ•˜๋ฉด ๋” ์„ ๋ช…ํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚œ๋‹ค.

์ง€๊ธˆ์€ ๋‹จ์ˆœํžˆ ํ•˜๋‚˜์˜ DOM ์š”์†Œ๋กœ๋งŒ ๋น„๊ตํ•˜๊ณ  ์žˆ์ง€๋งŒ ์ผ๋ฐ˜์ ์ธ ์›น ์•ฑ์€ ํ•˜๋‚˜์˜ DOM ์š”์†Œ๋กœ๋งŒ ์ด๋ฃจ์–ด์ ธ์žˆ์ง€ ์•Š๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฐ ๋ฆฌ์•กํŠธ์˜ ์žฅ์ ์€ ๊ทœ๋ชจ๊ฐ€ ์žˆ๋Š” ์›น ์•ฑ์—์„œ ๋”์šฑ ๋‘๋“œ๋Ÿฌ์ง„๋‹ค.

React ์—˜๋ฆฌ๋จผํŠธ๋Š” ๋ถˆ๋ณ€๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๋ฆฌ์•กํŠธ ๊ณต์‹ ๋ฌธ์„œ์— ์žˆ๋Š” ๋ฌธ์žฅ์ด๋‹ค. ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ทธ๊ฒƒ์„ render ํ•จ์ˆ˜์— ์ „๋‹ฌํ•˜์—ฌ UI๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด ํ•œ๋ฒˆ ์ƒ์„ฑ๋œ ์—˜๋ฆฌ๋จผํŠธ๋Š” ์ž์‹์ด๋‚˜ ์†์„ฑ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์œ„์˜ ์˜ˆ์‹œ์—์„œ๋Š” children์ด ์—…๋ฐ์ดํŠธ ๋˜๊ณ  ์žˆ๋‹ค.

์ด๊ฒƒ์€ ์—˜๋ฆฌ๋จผํŠธ์˜ ์ž์‹์„ ๋ณ€๊ฒฝํ•œ ๊ฒŒ ์•„๋‹ˆ๋‹ค.

  const elem = <button children={["The current count is", number]}></button>;

  root.render(elem);

์œ„์˜ ํ•จ์ˆ˜๋Š” ์ƒˆ๋กœ์šด elem์„ ๋‹ค์‹œ ๋งŒ๋“ค๊ณ  ๊ทธ๊ฒƒ์„ render์— ๋˜ ์ „๋‹ฌํ•œ๋‹ค. ์ด๋•Œ ๋ฆฌ์•กํŠธ๋Š” ์žฌ์กฐ์ •(Reconciliation) ์ž‘์—…์„ ํ•œ๋‹ค.

ํŠน์ • ๋น„๊ต ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์‹คํ–‰๋˜๋ฉฐ ๋ฆฌ์•กํŠธ๊ฐ€ ์ฃผ์–ด์ง„ elem๊ณผ ์›๋ž˜ ์žˆ๋˜ ์š”์†Œ๋ฅผ ๋ณด๋ฉฐ ์–ด๋–ค ๋ถ€๋ถ„์ด ์—…๋ฐ์ดํŠธ ๋˜์–ด์•ผ ํ•˜๋Š”์ง€ ํŒ๋‹จํ•œ๋‹ค.

const state = { content: "" };
const root = ReactDOM.createRoot(document.getElementById("root"));

function setContent(e) {
  state.content = e.target.value;
}

const elem = (
  <div>
    <h1>{state.content}</h1>
    <input type='text' onChange={setContent} />
  </div>
);

root.render(elem);

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋Š” ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ด๋„ render๋ฅผ ํ†ตํ•ด ์ „๋‹ฌํ•œ ๊ฐ์ฒด๋Š” ๊ทธ๋Œ€๋กœ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

const state = { content: "" };
const root = ReactDOM.createRoot(document.getElementById("root"));

function setContent(e) {
  state.content = e.target.value;

  const elem = (
    <div>
      <h1>{state.content}</h1>
      <input type='text' onChange={setContent} />
    </div>
  );

  root.render(elem);
}

const elem = (
  <div>
    <h1>{state.content}</h1>
    <input type='text' onChange={setContent} />
  </div>
);

root.render(elem);

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ Œ๋” ํ•จ์ˆ˜๋ฅผ ์ง€์†์ ์œผ๋กœ ํ˜ธ์ถœํ•˜๋ฉด์„œ ๋ฆฌ๋ Œ๋”๋ง์„ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๋‹จ์ง€ ์ƒˆ๋กญ๊ฒŒ ๋งŒ๋“ค์–ด์ง„ elem์„ ์ „๋‹ฌํ•  ๋ฟ ๋น„๊ต์™€ ๋ณ€๊ฒฝ์€ ๋ฆฌ์•กํŠธ๊ฐ€ ํŒ๋‹จํ•œ๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๊ฑธ์–ด๊ฐ€๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€