리액트의 모듈화
기존의 html, css, javascript. 구현해야 하는 기능이 많아지면 script.js 파일 안에 모든 코드를 넣기가 힘들어진다. 이때 여러 개의 css, js 파일로 분리하게 된다. 결국 어떤 방식으로든 분리를 해야한다. 분리할 때, 엘리먼트, 엘리먼트들을 꾸미기 위한 style, script를 묶는 컴포넌트를 만들면 가독성이 좋아질 것이다. 이것이 리액트의 모듈화 아이디어이다.
프론트엔드에서 하는 제어의 대부분은 '상태값이 변하면, UI가 변한다.'는 것이다.
위 이미지를 html, css, javascript로 만든 코드는 아래와 같다. script 태그를 보면 document에 접근하여 새로운 태그를 만들기도 하고 이벤트를 연결하기도 한다. 자바스크립트로 구현했을 때는 상태에 따른 UI를 바꾸기 위해서 DOM 노드를 직접 조작해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<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>
<script>
const dataMap = {
메일: "메일함을 확인하세요.",
카페: "즐겨찾는 카페의 새 소식을 확인하세요.",
블로그: "오늘을 기록해보세요.",
};
function clickTabItem(e) {
const key = e.target.innerHTML;
const contentEL = document.querySelector(".tab-content");
contentEL.innerHTML = dataMap[key];
}
function initializeTab() {
const initialKey = "메일";
const initialValue = dataMap[initialKey];
const contentEL = document.querySelector(".tab-content-wrapper");
const pEL = document.createElement("p");
pEL.classList.add("tab-content");
pEL.innerHTML = initialValue;
contentEL.appendChild(pEL);
const tabs = document.querySelectorAll(".tab-item");
tabs.forEach((tab) => tab.addEventListener("click", clickTabItem));
}
initializeTab();
</script>
</body>
</html>
그렇다면 리액트는 어떻게 구현이 될까?
화면은 자바스크립트랑 다를게 없다. 하지만 코드를 살펴보면 다른 걸 느낄 수 있다. DOM 조작 없이 깔끔해진 걸 볼 수 있다. 리액트에서는 UI 로직(DOM 조작)과 비즈니스 로직(데이터-상태값)을 분리할 수 있다는 점이 크다. DOM을 처음부터 다시 그리지 않고 변하는 UI 영역만 업데이트 하기 때문에 성능적으로 좋다.
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>
);
}
라이브러리와 프레임워크
프레임워크는 뼈대라는 의미다. 웹 어플리케이션을 만들기 위해 필요한 여러가지 기능을 제공한다. 공통적인 기능으로는 라우팅, 전역 상태 관리, API호출, 빌드 시스템 등이 있다. 하지만 리액트는 UI라이브러리로 이와 같은 기능들을 직접 구현해야 한다. 하지만 다른 라이브러리들과 함께 쓸 수 있다. 라우팅은 react-router, 전역상태관리는 redux, recoil 등, API 호출은 axios 라이브러리를 사용하면 된다. 환경에 맞게 마음에 드는 라이브러리를 사용하여 웹 페이지를 제작할 수 있지만 여러가지 라이브러리를 접하고 배워야해서 초기 진입 장벽이 있는 것이 단점이다.
학습 회고
개발을 배운 지 8개월 차인데 자바스크립트와 리액트를 가지고 똑같은 화면을 만들어본 것은 처음이었다. 직접 만들어보니까 DOM 조작에 대해서 더 알 것 같고 리액트가 왜 나왔는지 더욱 알 게 되었다. 기초를 튼튼하게 만드는 것이 중요함을 요즘 계속 뼈저리게 느끼는 중이다. 초심으로 돌아가 기본에 충실하자.
댓글