React가 뭘까?
React??
오늘 날 가장 많이 사랑받는 프론트엔드 프레임워크인 React가 등장하던 배경에 대해 이야기 하겠다. 😃
애플리케이션 빌딩 블록
오늘 날 애플리케이션 을 구축할 때 고려해야 할 사항 은 다음과 같다.
1. 애플리케이션의 각 부분에 대해 직접 구축
2. 패키지, 라이브러리 또는 프레임워크 등 다른 도구를 사용할 것
- 사용자 인터페이스(UI) → 애플리케이션과 사용자가 상호작용하는 방법이다.
- 라우팅(Routing) → 애플리케이션의 여러 부분(예: 페이지 등)을 탐색하는 방법.
- 데이터 가져오기(Data Fetching) → 데이터가 있는 위치에서 데이터를 가져오는 방법.
- 렌더링(Rendering) → 정적 또는 동적 콘텐츠를 언제 어디에 렌더링 하는 지 여부를 설정.
- 통합(Integrations) → 외부 서비스(예: CMS, 인증, 결제 등)에 연결하는 방법.
- 인프라(Infrastructure) → 애플리케이션 코드를 배포, 저장, 실행하는 위치를 말한다.
- 성능(Performance) → 사용자를 위해 애플리케이션을 최적화하는 방법.
- 확장성(Scalability) → 트래픽 또는 데이터가 증가함에 따라 애플리케이션 확장 여부.
- 개발자 경험(DX) → 애플리케이션을 구축하고 유지 관리하는 팀의 경험.
React는 웹 애플리케이션 구축하는 여러 블록 중, 사용자 인터페이스(User Interface) 블록에 해당되는 라이브러리입니다.
사용자가 애플리케이션 화면을 보고 상호작용하는 인터페이스를 구축하는데 사용.
라이브러리란?
UI를 구축하는 데 유용한 함수(API)를 제공하지만, 해당 함수를 애플리케이션에서 어디에 사용할 지는 전적으로 개발자에게 맡긴다는 것을 의미한다. 즉, React는 함수(API)만 제공하고 개발자가 이를 활용해 사용자 인터페이스를 구축한다.
명령형 vs. 선언형 프로그래밍
사용자 인터페이스(UI) 렌더링
웹 브라우저(클라이언트)는 서버로부터 전송된 코드를 해석해 사용자 인터페이스를 생성(또는 렌더링)한다.
import React from 'react';
function App() {
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Welcome to My App</h1>
<p>This is a simple UI rendering example.</p>
<button style={{ margin: '5px' }}>Click Me</button>
</div>
);
}
export default App;클라이언트(요청) → 서버(응답) → 클라이언트(해석)
사용자가 웹 서비스의 페이지를 방문하면 서버는 HTML 파일을 브라우저에 제공하고, 브라우저는 HTML 파일을 해석해 문서 객체 모델(DOM)을 구성한다.
문서 객체 모델(DOM)이란?
문서 객체 모델인 DOM은 HTML 엘리먼트(요소)의 객체 표현을 말합니다. 코드와 사용자 인터페이스 사이 다리 역할을 하며 부모, 자식, 형제 등 관계가 있는 트리(Tree)와 같은 구조를 가진다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
- document
- html
- head
- title
- body
- h1
- p
- buttonHTML vs. DOM
https://developer.chrome.com/docs/devtools/dom?hl=ko#appendix
사용자 인터페이스(UI) 업데이트
DOM에서 제공되는 함수(API)와 JavaScript를 사용해 사용자 이벤트를 수신하고 DOM을 조작할 수 있습니다. 사용자 인터페이스에서 특정 엘리먼트를 선택하거나, 추가하고, 수정 또는 삭제하여 DOM을 조작하면 사용자가 이용하면 화면(인터페이스)가 변경된다.
서버에서 전송된 초기 HTML 코드와 사용자와의 상호작용을 통해 변경된 DOM이 다르다는 것을 알 수 있다.
HTML은 초기 페이지 내용을 나타내는 반면, DOM은 JavaScript 코드에 의해 변경된 업데이트 된 페이지 내용을 나타내기 때문.
JavaScript로 DOM을 업데이트 하는 것은 매우 강력하지만 코드가 매우 길고 번거롭다.
웹 애플리케이션 또는 팀 규모가 커지면 커질수록 이 방식으로 애플리케이션을 구축하고 관리하는 것은 더 어려워진다고 본다.
이러한 접근 방식은 개발자가 컴퓨터에게 어떻게 해야 하는 지 알려주는데 상당한 시간을 소요한다. 하지만 사용자에게 보여주고 싶은 것만 설명하고 DOM을 업데이트 하는 방법을 알려준다면 더욱 좋을 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Update Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button id="updateBtn">Update Text</button>
<script>
// 버튼 클릭 시 제목 업데이트
document.getElementById('updateBtn').addEventListener('click', () => {
document.getElementById('title').textContent = 'Hello, DOM!';
});
</script>
</body>
</html>명령형 프로그래밍 vs. 선언형 프로그래밍
일반적인 DOM + JavaScript 프로그래밍은 명령적(Imperative) 이다. 사용자 인터페이스를 업데이트 하는 방법.
하지만 사용자 인터페이스를 구축할 때 선언적(declarative) 접근 방식이 선호되는 데 이는 개발 프로세스를 가속화 할 수 있기 때문. DOM 함수(API)를 사용하는 대신, 개발자가 화면에 표시하려면 것을 선언할 수 있다면 보다 일이 수월해질 것입니다.
즉, 명령형 프로그래밍은 요리사에게 피자(🍕)를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같습니다. 반면 선언형 프로그래밍은 피자를 만드는데 필요한 단계는 신경쓰지 않고, 피자를 주문하는 것과 같습니다.
React는 사용자 인터페이스를 구축하는데 사용할 수 있는 인기있는 선언형 라이브러리입니다. 개발자는 React에 사용자 인터페이스에 어떤 작업을 수행하길 원하는지 알릴 수 있으며, React는 사용자를 대신하여 DOM을 업데이트 하는 단계를 파악합니다. 😀
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Imperative Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button id="updateBtn">Update Text</button>
<script>
document.getElementById('updateBtn').addEventListener('click', () => {
const title = document.getElementById('title');
title.textContent = 'Hello, Imperative!';
title.style.color = 'blue';
});
</script>
</body>
</html>React
import React, { useState } from 'react';
function App() {
const [text, setText] = useState('Hello, World!');
return (
<div>
<h1 style={{ color: text === 'Hello, World!' ? 'black' : 'blue' }}>{text}</h1>
<button onClick={() => setText('Hello, Declarative!')}>
Update Text
</button>
</div>
);
}
export default App;