리액트의 작동 원리

리액트 엘리먼트

리액트 엘리먼트는 단지 리액트에게 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트 리터럴에 불과하다.

React.createElement("h1", {id:"recipe-0"}, "연어 스테이크");

위의 코드는 아래의 코드를 구성하도록 알려주는 코드이다.

<h1 id="recipe-0">연어 스테이크</h1>

리액트 엘리먼트의 생김새는 다음과 같다.

{
  $$typeof:Symbol(React.element),
  "type": "h1",
  "Key": null,
  "ref": null,
  "props": {id:"recipe-0", children: "연어 스테이크"},
  "_owner": null,
  "_store": {}
}

ReactDOM

리액트 엘리먼트를 브라우저에 렌더링하는 데 필요한 모든 도구가 들어있다.

const root = createRoot(container);
root.render(element);

리액트 컴포넌트 ( JSX 없는 버전 )

const secretIngredients = [
  "물과 스프를 넣는다.", "팔팔 끓인다", "면을 넣고 2분간 끓인다.", "불을 끄고 먹는다."
];

function IngredientsList({ items }) {
  return React.createElement(
    "ol",
    { className: "ingredients" },
    items.map((ingredient, i) => React.createElement("li", { key: i }, ingredient))
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(IngredientsList, { items: secretIngredients }, null));

JSX

JSX로 리액트 엘리먼트 정의

구분	코드
리액트 엘리먼트	React.createElement(MainList, {list:[...]},null)
JSX	<MainList list={[...]} />

JSX 팁

• nested 컴포넌트를 사용할 수 있다.
• 리액트 엘리먼트의 class 속성은 예약어와 명칭이 겹치기 때문에 className으로 정의한다.
• JSX는 얼핏보면 HTML문서 같아보이지만 자바스크립트 표현식 이므로 표현식이 들어갈 수 있는 위치라면 어디든 들어갈 수 있다.
  
  

배열을 JSX로 매핑하기

function App() {
  const arr = [1, 2, 3, 4, 5];
  return (
    <>
      {arr.map((item, i) => (
        <p key={i}>{item}</p>
      ))}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Array.prototype.map()의 반환값은 배열이다.
즉, 중괄호 안에 배열이 배치가 된다.
중괄호 안에 배열이 있으면 리액트는 자동으로 배열을 언박싱하고 렌더링한다.
위의 코드는 아래의 코드를 나타낸다.

<div id="root">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>

리액트 프래그먼트

JSX를 쓰다보면 같은 레벨의 리액트 엘리먼트를 사용하고 싶을 때가 있다.
하지만 루트레벨의 리액트 엘리먼트는 하나만 존재해야 한다.
리액트 엘리먼트 <div>를 사용해서 묶을 수 있지만 의미없는 DOM 엘리먼트 <div>가 생성되므로 효율적이지 않다.
그럴때 오로지 묶는 용도로만 쓰이고 DOM 엘리먼트로는 변환되지 않는 리액트 프래그먼트 <> </>를 사용한다.

리액트 컴포넌트 ( JSX 사용 )

const secretIngredients = [
  "물과 스프를 넣는다.", "팔팔 끓인다", "면을 넣고 2분간 끓인다.", "불을 끄고 먹는다."
];

function IngredientsList({ items }) {
  return (
    <ol className="igredients">
      {items.map((ingredient, i) => (
        <li key={i}>{ingredient}</li>
      ))}
    </ol>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<IngredientsList items={secretIngredients} />);

[ 참고 ] : 러닝 리액트 2판