리액트의 모듈화 아이디어
React는 무엇이고, 사람들은 왜 쓸까?
React가 어떤 문제를 해결해주는지 이해해 보자.
지금까지 웹사이트를 만들기 위해 배웠던 방식들
1.index.html에서 style.css와 script.js 파일을 불러오기
2. index.html에 <style></style> 태그와 <script></script> 태그로 css, javascript 코드를 바로 작성하기
하지만 우리가 실제로 만들어야 하는 웹사이트는 이렇게 간단하지 않다.
구현해야 하는 기능이 많아져서 JavaScript가 복잡해지면
하나의 script.js파일 안에 모든 코드를 넣기가 힘들어 진다.
ex) 이 script 코드가 어떤 element를 제어하고 있는지 잘 파악하기 힘들고, 가독성도 안 좋아짐
ex) 변수 선언 시 겹치지 않도록 계속 신경써줘야 함
➡ 여러 개의 css와 js 파일로 분리하게 된다.
결국 어떤 방식으로든 분리를 해야 하는데...
분리할 때,
1) 어떤 element들 + 2) 그 element들을 꾸미기 위한 style + 3) 그 element의 동작에 대한 script를 묶고
이 묶음들의 집합으로 최종적인 HTML을 만들 수 있다면 어떨까?
➡ 리액트가 모듈화하는 아이디어!
프론트엔드 제어를 위한 JavaScript와 리액트 코드 비교
프론트엔드에서 해야 하는 본질적인 일에 대해 잠시 생각해보자.
프론트엔드에서 하는 제어의 대부분은
" 상태값이 변하면, UI가 변한다. "
ex. 상태가 바뀌게 되는 상황은 사용자가 뭔가를 클릭하는 등의 event를 발생 시키거나, api 요청을 보내서 새로운 정보를 업데이터 받았을 때
JavaScript로 구현했을 때의 특징
1. 상태에 다른 UI를 바꾸기 위해서 DOM 노드를 직접 조작해야 한다.
이 때, DOM 노드를 직접 조작하는 게 당연한 거 아니야? 라고 생각이 들 수 있다.
지금부터 같은 기능을 JavaScript로만 구현한 코드, React로 구현한 코드를 비교해보겠다.
예를 들어, 메일 / 카페 / 블로그 3개의 탭으로 구성되어 있고
탭을 클릭하면, 하위 컨텐츠가 그에 맞게 변경되도록 JavaScript 코드를 먼저 작성하겠다.
JavaScript
<!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" />
</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-warpper"></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>
React
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>
);
}
JavaScript vs React
React : DOM 노드를 직접 조작하지 않아도 UI가 변경된다!
UI 로직과 비지니스 로직(데이터 - 상태값을 다루는)을 분리할 수 있다!
데이터가 바뀔 때, "이 요소를 이렇게 바꾸자!"가 아니라
➡ 어떻게 바꿀지 고민하지 말고, 이전 뷰를 날린 다음 결과적으로 보여줘야 하는 뷰를 다시 보여주자!
우리가 방금 만든 컴포넌트가 파란색 박스에 해당하는 영역이였다면?
이 UI 영역(파란색 박스)이 궁금할 때 "컴포넌트"로 분리된 하나의 파일만 찾아서 확인하면 된다.
이 UI 영역(파란색 박스)에 변경이 발생하면, DOM을 처음부터 그리지 않고 이 부분만 업데이트 하기 때문에 성능적으로도 좋다.
➡ 리액트가 하는 일
리액트는 내부적으로 가상돔(virtual DOM)이라는 것을 통해
변겨오딘 부분만 업데이트 할 수 있게 한다.
공식 문서 링크:
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
React
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
특징 :
1. 선언형
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다.
애플리케이션의 각 상태에 대한 간단한 뷰만 설계해라. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 할 것이다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다.
2. 컴포넌트 기반
스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들어라.
그리고 이를 조합해 복잡한 UI를 만들어라.
컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성된다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있다.
3. 한 번 배워서 어디서나 사용하기
기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있다.
React는 Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있다.
라이브러리와 프레임워크의 차이
라이브러리 (Library) vs 프레임워크 (Framework)
웹 어플리케이션을 만들기 위한 뼈대 : Web Application Framework
Web Application을 만들기 위해 필요한 여러가지 기능들을 제공한다.
Web Application은 공통적으로 어떤 기능이 필요할까?
대표적인 Web Application Framework : Angular.js
리액트는 UI 라이브러리이기 때문에 이와 같은 기능들을 직접 구현하거나 구축해야 한다.
장점 : 각자 환경에 맞거나, 마음에 드는 라이브러리를 선택하여 시스템을 구축할 수 있다.
단점 : 여러가지 라이브러리를 접하고 배워야 해서 초기 진입 장벽이 있다.
React는 쓰고 싶지만, 여러가지 라이브러리도 추가해서 쓰기 싫다면?
➡ React를 Angular등의 프레임워크와 함께 쓸 수도 있다! 😆
'React' 카테고리의 다른 글
| [React] 리스트와 key / 폼과 이벤트 제어하기 (0) | 2022.07.26 |
|---|---|
| [React] Lifecycle와 useEffect() (0) | 2022.07.25 |
| [React] State (0) | 2022.07.09 |
| 리액트 기본 문법(JSX)과 컴포넌트 소개 (0) | 2022.07.01 |
| 리액트 프로젝트의 개발 환경 설정 (1) | 2022.06.30 |
Comment