시작하기 전에..
얼마 전 나는 친구들과 함께할 프로젝트를 단순히 HTML, CSS, JS 만을 사용해서 프로젝트를 진행할지 아니면 아직은 미숙하지만, 장점이 많은 React를 사용해서 프로젝트를 진행할지 고민을 하게 되었다.
고민을 하던 중 든 생각이 "리액트로 할 수 있는 건 JS로도 할 수 있는데, 굳이 더 어려운 리액트를 쓸 필요가 있나?" 였다. 그리고 "그럼 난 왜 리액트를 공부하고 있지?" 라는 생각이 머릿속을 스쳐 지나갔다.
그렇게 생각에 잠겨있다가 "리액트 같은 어떤 기술을 사용할 때는 그 기술의 개념과 사용 이유, 장점 등을 확실히 알고 사용한다면 상황에 맞게 기술을 선택하고 기술들의 장점을 잘 살릴 수 있겠다." 라는 생각이 들어서 이 글을 쓰게 되었다.
그럼 React는 정확히 뭘까?
리액트(React)는 사용자 인터페이스(UI)를 구축하기 위해 페이스북(현 메타)에서 개발한 JavaScript 라이브러리이다. 주로 싱글 페이지 애플리케이션(SPA)을 개발하는 데 사용되며, 웹 애플리케이션의 사용자 인터페이스를 효율적이고 유연하게 구축하는 데 중점을 둔다.
라이브러리?
라이브러리는 마치 요리할 때 사용하는 레시피 책과 같다.
예를 들어, 요리할 때 직접 모든 재료를 손질하고, 소스를 만들고, 요리법을 처음부터 끝까지 개발해야 한다면 시간이 오래 걸릴 것이다. 그런데 레시피 책이 있다면, 이미 만들어진 요리법을 참고 해서 더 쉽게 요리할 수 있다.
프로그래밍에서도 비슷하다. 어떤 기능을 개발할 때, 매번 처음부터 모든 코드를 작성하기보다는, 라이브러리라는 이미 만들어진 코드 집합을 사용하면 더 빠르고 효율적으로 작업할 수 있다. 라이브러리는 개발자가 자주 필요로 하는 기능들을 미리 준비해 둔 코드의 모음이라 생각하면 된다.
SPA는 또 뭐야..
SPA는 Single Page Application의 약자로, 한 번 웹 페이지를 로드한 후에 추가적인 페이지 로딩 없이도 사용자와 상호작용할 수 있는 웹 애플리케이션을 의미합니다.
-
전통적인 웹: 사용자가 페이지에서 다른 링크를 클릭하면, 서버에서 새로운 HTML 페이지를 받아와서 전체 화면을 새로 고침
-
SPA: 사용자가 링크를 클릭해도 페이지가 새로 로드되지 않고, 필요한 데이터만 서버에서 받아와서 현재 페이지의 일부분만 업데이트
그래서 왜 쓰는 걸까?
리액트를 사용하는 이유는 여러 가지가 있지만, 주요 이유들은 아래와 같다.
컴포넌트 기반
리액트는 UI를 재사용 가능한 컴포넌트로 분리하여 개발할 수 있게 한다. 각 컴포넌트는 독립적으로 작동하며, 이를 조합해 복잡한 사용자 인터페이스를 구축할 수 있다. 이 구조 덕분에 코드의 재사용성이 높아지고, 유지보수와 관리가 쉬워진다.
Virtual DOM
리액트는 Virtual DOM이라는 개념을 사용한다. 실제 DOM을 직접 조작하는 대신, 가상의 DOM을 사용해 변경 사항을 계산하고, 필요한 부분만 실제 DOM에 적용합니다. 이로 인해 성능이 최적화되며, 특히 대규모 애플리케이션에서 효율적인 렌더링이 가능합니다.
- DOM: Document Object Model의 약자로 DOM은 웹 페이지의 구조화된 문서를 브라우저가 동적으로 조작할 수 있도록 트리 형태로 표현한 프로그래밍 인터페이스입니다.
풍부한 생태계와 커뮤니티
리액트는 널리 사용되는 라이브러리로, 방대한 도구들이 존재하며, 커뮤니티가 활발하게 지원한다. 이는 개발자들이 다양한 기능을 쉽게 구현하고, 문제를 신속하게 해결하는 데 큰 도움이 됩니다.
글만 봐서는 모르겠는데..
글만 봐서는 리액트의 장점이 체감되지 않을 수도 있다. 그래서 예시로 버튼을 클릭하면 클릭횟수가 표시되는 간단한 페이지를 평범한 자바스크립트와 리액트를 각각 사용해서 만들어 보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Click Counter</title>
</head>
<body>
<span>Total clicks: 0</span>
<button>Click me</button>
<script>
let counter = 0;
const button = document.querySelector("button");
const span = document.querySelector("span");
function handleClick() {
counter++;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</body>
</html>
<!-- 바닐라JS 코드 -->import React, { useState } from 'react';
function ClickCounter() {
const [counter, setCounter] = useState(0);
const handleClick = () => {
setCounter(counter + 1);
};
return (
<div>
<span>Total clicks: {counter}</span>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default ClickCounter;
// 리액트 코드두 코드를 비교했을 때 가장 큰 차이는 바닐라JS 코드는 클릭 이벤트가 발생할 때마다 span.innerText를 직접 변경해서 UI를 업데이트해야 하지만, 리액트 코드는 setCounter를 통해 상태 업데이트가 이루어진 다음, 리액트가 UI를 자동으로 업데이트한다는 것이다.
그리고 리액트 코드는 위에서 설명한 Virtual DOM을 사용하여 효율적으로 UI 업데이트를 수행하며, 실제 DOM 조작을 최소화하여 브라우저의 성능을 최적화한다.
마무리
이번엔 잠시 현타(?)가 왔던 나를 위해 리액트가 정확히 무엇이고, 왜 사용하는 것인지 알아봤다. 그리고 이건 앞에서 말했어야 했는데 이 글을 쓴 이유 중에 친구가 쓴 블로그의 내용(리액트 관련)도 한몫한다.
이번 블로그를 쓰면서 깨달을 점은 앞으로는 어떤 기술을 사용할 때는 그 기술을 사용하는 이유 등을 확실하게 알고 사용해야겠다는 것이다. 강요는 아니지만, 이 글을 읽었다면 자신이 사용하는 기술에 대한 이해를 쌓고 그 기술을 사용하면 훨씬 더 좋은 개발자가 될 수 있을 것 같다.
4개의 댓글
제가 리액트에 대해 하나도 모르는 디자이너인데 이해가 확 됐어요! 이런 흔하게 생각하는 것들에 대해 의문을 던지는 것도 맘에 들고 글이 진짜 이해가 잘 되어서 재밌게 읽었습니다. 좋은 글 감사해요!
감사합니다
퍼가요
~