리액트

프론트엔드에서 하는 제어의 대부분은 상태값이 변하면, UI가 변하게됩니다.

예를 들어 사용자가 무언가를 클릭하는 등의 event를 발생시키거나 api요청을 보내서 새로운 정보를 업데이트 받았을 경우가 있습니다.

자바스크립트를 통해 이를 구현하는 경우 상태에 따른 UI를 바꾸기 위해 DOM노드를 직접 조작해야합니다.

<div class="container">
  <div class="tab-items">
    <div class="tab-item">메일</div>
    <div class="tab-item">카페</div>
    <div class="tab-item">블로그</div>
  </div>
  <div class="tab-content-wrapper"></div>
</div>

const dataMap = {
  메일: "메일함을 확인하세요.",
  카페: "즐겨찾는 카페의 새 소식을 확인해보세요.",
  블로그: "오늘을 기록해보세요."
};

function clickTabItem(e) {
  const key = e.target.innerHTML;
  const contentEl = document.querySelector('.tab-content');
  contentEl.innerHTML = dataMap[key];// UI를 바꾸기 위해 DOM노드를 직접조작
}

function initialzeTab() {
  const initailKey = "메일";
  const initailValue = dataMap[initailKey];
  const contentEl = document.querySelector(".tab-content-wrapper");
  const pEl = document.createElement("p");
  pEl.classList.add("tab-content");
  pEl.innerHTML = initailValue; // UI를 바꾸기 위해 DOM노드를 직접조작
  contentEl.appendChild(pEl)

  const tabs = document.querySelectorAll('.tab-item')
  tabs.forEach((el) => el.addEventListener('click', clickTabItem))
}

initialzeTab()

하지만 리액트를 사용해 구현하는 경우, UI로직과 비즈니스 로직(데이터 - 상태값을 다루는)을 분리할 수 있습니다.

데이터가 바뀔 때 "이 요소를 이렇게 바꾸자!"가 아니라 이전 뷰를 날린 다음 결과적으로 보여줘야하는 뷰를 보여주는 방식으로 구현을 하는 것이 바로 리액트의 방식입니다.

UI영역에 변경이 발생하면, DOM을 처음부터 다시 그리지 않고 해당 부분만 업데이트를 하기 때문에 성능적으로 좋습니다.

리액트는 내부적으로 가상돔(Virtual DOM)이라는 것을 통해 변경된 부분만 업데이트를 할 수 있게 합니다.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [key, setKey] = useState("메일");
  const dataMap = {
    메일: "메일함을 확인하세요.",
    카페: "즐겨찾는 카페의 새 소식을 확인해보세요.",
    블로그: "오늘을 기록해보세요."
  };

  function clickTabItem(e) {
    setKey(e.target.id);
  }

  return (
    <div className="App">
      <div className="container">
        <div className="tab-items">
          <div className="tab-item" id="메일" onClick={clickTabItem}>
            메일
          </div>
          <div className="tab-item" id="카페" onClick={clickTabItem}>
            카페
          </div>
          <div className="tab-item" id="블로그" onClick={clickTabItem}>
            블로그
          </div>
        </div>
        <div className="tab-content-wrapper">{dataMap[key]}</div>
      </div>
    </div>
  );
}