프론트엔드 공부를 처음 시작할 때 React 공부를 했고, 현재까지도 프로젝트를 구현할 때 React를 사용하고 있습니다. 누군가가 React를 왜 사용하냐고 묻는다면 "인기 있는 프론트엔드 라이브러리", "많은 기업에서 사용하고 있어서", "컴포넌트 기반 라이브러리로 재사용이 가능하기 때문에" 정도만 대답할 수 있겠더군요. 그래서 오늘은 React의 등장 배경과 React란 무엇인지, React를 왜 사용하는 것인지에 대해 이야기해보려고 합니다.
🌳 React 등장 배경
시대가 변함에 따라 사용자들의 요구사항이 많아지면서 개발자들이 처리해야 할 UI가 많아지게 되었습니다. 이러한 상황 속에서 개발자들은 오직 기능 개발에 초점을 두고 동적인 웹 페이지를 보다 효율적으로 유지 보수하기 위해 새로운 Front-end Framework를 개발하게 되는데요. 2013년에 Facebook은 "지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는 것"을 목표로 React를 개발했고, 현재 많은 기업에서 JavaScript 라이브러리로 React를 사용하고 있습니다.
💡 React란
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "컴포넌트"라고 불리는 작고 독립된 코드의 조각을 이용하여 복잡한 UI(User Interface)를 구성하도록 돕고, 선언적인 개발이 가능하다는 특징이 있습니다.
🤷🏻♀️ 왜 React를 사용할까?
1. Component 단위 작성
UI를 구성하는 재사용이 가능한 독립적인 뷰 단위로, 하나의 컴포넌트를 여러 컴포넌트에서 사용할 수 있습니다. 이러한 특징은 생산성과 유지 보수를 용이하게 합니다. 만약 비슷한 코드를 여러 컴포넌트에서 작성하고 있다면 하나의 컴포넌트로 작성하여 코드의 재사용성을 높일 수 있습니다.
2. JSX
const element = <h1>Hello, React!</h1>;JSX는 JavaScript를 확장한 문법으로, React 엘리먼트(element)를 생성합니다. React에서 JSX 사용이 필수는 아니지만 JavaScript 코드에서 UI 관련 작업을 할 때 도움이 되고, HTML 문법과 유사하여 사용하기에 쉽고 간편합니다.
3. Virtual DOM
Virtual DOM(가상 DOM)은 기존의 렌더링 과정에서 발생하는 비효율성을 최소화하기 위해 탄생한 개념입니다. Virtual DOM은 데이터가 변경되면 자바스크립트로 이루어진 Virtual DOM에 한 번 렌더링을 하고, 기존의 DOM과 비교해서 변화가 필요한 곳에만 업데이트를 해줍니다. 변화가 필요한 곳에만 화면을 다시 그리기 때문에 화면 전체가 깜빡이는 것을 방지하여 사용자 경험을 향상시키고, 최소한의 DOM 변화를 통해 화면 전체를 다시 그릴 때보다 더 적은 브라우저의 자원을 활용하여 빠르고 쾌적한 사용자 경험을 제공합니다. React가 Virtual DOM 개념을 적용한 유일한 라이브러리는 아니지만, 성공적으로 Virtual DOM 개념을 적용한 선발 주자입니다.
💭 마무리하며
이번 포스터에서는 React의 등장 배경과 React란 무엇인지, React를 왜 사용하는 것인지에 대해 이야기해 보았습니다. 부족한 내용이더라도 여러분께 좋은 참고 글이 됐으면 좋겠습니다. 🤗
참고 자료
https://ko.reactjs.org/tutorial/tutorial.html#overview
자습서: React 시작하기 – React
A JavaScript library for building user interfaces
ko.reactjs.org
React를 사용하는 이유
프론트앤드 공부를 시작하게 되고, 리액트를 사용하게 되었습니다. 왜 사용하게 됐는지에 대한 질문을 받는다면 '매우 인기있는 라이브러리', '많은 기업에서 요구하는 스펙'이라는 솔직한 답변
velog.io