[번역] What is Reactivity?

원문 : https://playfulprogramming.com/posts/what-is-reactivity

숙련된 프론트엔드 엔지니어인 저는 다음과 같은 질문을 자주 받습니다.

“왜 React, Angular 또는 Vue와 같은 최신 프론트엔드 프레임워크를 사용하려고 하나요?”

이 주제에 대한 전체(무료) 책 이 있지만, 제 짧은 대답은 일반적으로 "Reactivity"입니다.

“Reactivity란 무엇인가요?”

간단히 말해 Reactivity란 자바스크립트 애플리케이션의 메모리에 있는 내용을 DOM에 HTML로 반영하는 기능입니다. 정적 HTML만 사용하여 웹사이트를 구축하는 경우 DOM에 대한 출력은 간단합니다.

<!-- index.html -->
<main id="a">
	<ul id="b">
		<li id="c">Item 1</li>
		<li id="d">Item 2</li>
	</ul>
	<p id="e">Text here</p>
</main>

문제는 출력에 상호작용을 도입하고자 할 때 시작됩니다.

다음과 같은 소규모 애플리케이션을 만들어 보겠습니다.

1. 내부에 카운터가 있는 버튼이 있습니다.
2. 버튼을 클릭할 때마다 카운터를 0에서 시작합니다.
3. 버튼을 클릭할 때마다, 카운터에 1을 추가합니다.

이를 위해 몇 가지 HTML부터 시작하겠습니다:

<main>
	<button id="add-button">Count: 0</button>
</main>

그런 다음 필요한 자바스크립트를 추가하여 버튼이 작동하도록 만들 수 있습니다.

<script>
let count = 0;

const addBtn = document.querySelector('#add-button'); addBtn.addEventListener('click', () => {
	count++; 
	addBtn.innerText = `Count: ${count}`; 
});
</script>

목록 추가하기

너무 나쁘지 않다면 난이도를 조금 더 높여 보겠습니다.

1. 정렬되지 않은 목록 추가하기 (<ul/>)
2. 개수가 늘어날 때마다 내부에 고유 문자열이 포함된 새 <li>를 추가합니다.

다음과 같이 보일 수 있습니다.

<main>
	<button id="add-button">Count: 0</button>
	<ul id="list"></ul>
</main>
<script>
	let count = 0;
	const listEl = document.querySelector('#list');
	function makeListItem(innerText) {
		const li = document.createElement('li');
		li.innerText = innerText;
		listEl.append(li); 
	}
	const addBtn = document.querySelector('#add-button');
	addBtn.addEventListener('click', () => {
		count++;
		addBtn.innerText = `Count: ${count}`;
		makeListItem(`List item: ${count}`);
	});
</script>

목록에서 항목 제거하기

좋아요! 열기가 뜨거워지고 있습니다! 마지막으로 한 가지 연습을 해보겠습니다:

1. 카운트에서 1을 제거하는 버튼 추가
2. 이 버튼을 누르면 목록에서 마지막 요소를 제거합니다.

<main>
	<button id="add-button">Add one to: 0</button>
	<button id="remove-button">Remove one from: 0</button>
	<ul id="list"></ul>
</main>

<script>
	let count = 0;
	const listEl = document.querySelector('#list');
	function makeListItem(innerText) {
		const li = document.createElement('li');
		li.innerText = innerText; listEl.append(li); 
	}
	function removeListItem() {
		listEl.lastChild.remove(); 
	}

	const addBtn = document.querySelector('#add-button');
	const removeBtn = document.querySelector('#remove-button');
	
	function updateBtnTexts() {
		addBtn.innerText = `Add one to: ${count}`;
		removeBtn.innerText = `Remove one from: ${count}`;
	} 
	addBtn.addEventListener('click', () => {
		count++;
		updateBtnTexts();
		makeListItem(`List item: ${count}`);
	}); 
	removeBtn.addEventListener('click', () => {
		count--;
		updateBtnTexts();
		removeListItem(); 
	});
</script>

와우! 복잡해졌죠?! 바로 그거죠?!

맞아요… 그래서 질문이 생겼습니다.

더 간단해야 하지 않을까요?

개수에 의존하는 다른 항목을 추가할 때마다 데이터는 변하지 않는 것을 알 수 있습니다.

대신 자바스크립트 상태를 해당 상태의 DOM 표현에 붙이기 위해 코드베이스에 점점 더 많은 수준의 복잡성을 추가해야 했습니다.

이 접착제를 모두 제거하면 코드베이스가 대폭 간소화됩니다:

<main>
	<button id="add-button">Add one to: 0</button>
	<button id="remove-button">Remove one from: 0</button> <ul id="list"></ul></main>

<script>
	// 'count'가 변경되면 DOM이 자동 업데이트되는 마법의 지역
	let count = 0;
	addBtn.addEventListener('click', () => { count++; });
	removeBtn.addEventListener('click', () => { count--; });
</script>

얼마나 많은 줄이 사라졌는지 보세요!

이 더 멋진 코드 작성 방법은 이론적으로 가능할 뿐만 아니라 수백만 명의 개발자가 프론트엔드 프레임워크를 통해 널리 채택하고 있습니다.

프론트엔드 프레임워크의 몇 가지 예는 다음과 같습니다.

• React
• Vue
• Angluar

// 예시는 React로만 표기합니다.
const App = () => {
	const [count, setCount] = useState(0);
	return (
		<div>
			<button onClick={() => setCount(count + 1)}>Add one to: {count}</button>
			<button onClick={() => setCount(count - 1)}> Remove one from: {count} </button>
			<ul>
				{Array.from({ length: count }).map((_, i) => (
					<li>List item {i}</li>
				))} 
			</ul>
		</div>
	);
};

독자 여러분, 이것이 바로 Reactivity의 핵심 아이디어입니다.

자바스크립트에 저장된 상태를 어떻게 변경할 것인지에 집중하고 다른 메커니즘이 화면에 표시되는 방식을 추상화할 수 있도록 하는 것입니다.

이러한 메커니즘은 매우 다른 방법을 사용할 수도 있습니다!

예를 들어 각 프레임워크가 내부적으로 활용하는 방법은 다음과 같습니다.

지금은 정말 괴짜 같은 시간입니다. 지금 이 말이 횡설수설처럼 들리더라도 기분 나빠하지 마세요.

결론

지금까지 반응성이란 무엇이며 왜 최신 프론트엔드 프레임워크를 사용하여 앱에서 이를 활용해야 하는지 살펴보았습니다.

다음 시간에는 “조정”이 무엇이며 오늘날 대부분의 React 및 Vue 프론트엔드 애플리케이션에 미치는 영향에 대해 이야기하겠습니다.