📘리액트란
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
기본적으로 리액트는 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리 잡았다. 이와 더불어 TypeScript나 Sass 같은 언어도 지원한다. 또한 Next.js 등의 등장으로 인해 SSG, SSR 등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.
리액트는 컴포넌트 기반으로 구현되어 있어서 코드의 재사용성이 높고 유지보수가 용이하다. 그리고 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API 통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.
📚리액트의 특징
가상 돔 (Virtual DOM)
DOM
먼저 DOM(Document Object Model)이란 문서 객체 모델로 HTML, XML 문서의 프로그래밍 인터페이스 입니다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일 내용 등을 변경할 수 있게 돕습니다. DOM은 nodes와 objects로 문서를 표현합니다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다.
Virtual DOM
가상 돔이란 실제 돔과 유사한 구조를 가지고 있지만, 메모리 상에 존재하는 가상적인 돔입니다. 돔의 사본, 복사본이라고 할 수 있습니다.
돔과 같은 속성들을 가지고 있지만 실제 돔이 가지고 있는 API는 가지고 있지 않습니다.
리액트에서 UI가 변경되면, 실제 돔을 조작하는 대신 가상돔에서 변경 사항을 반영합니다. 그리고 가상 돔에서 변경된 내용을 실제 돔과 비교하여 변경된 부분만 업데이트 합니다. 이를 통해 불필요한 돔 조작을 최소화하고 효율적인 렌더링을 가능하게 합니다.
단방향 데이터 흐름
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 데이터가 UI로 흐르는 구조이며 단방향이므로 UI 쪽에서 데이터를 변화시키는 것은 불가능합니다. 즉, 변화된 새로운 데이터와 함께 UI는 업데이트 됩니다.
Angular.js와 같은 양방향 데이터 바인딩은 뷰와 컴포넌트의 변화가 둘 중 한 곳에서 일어나면 다른 한 곳에서 데이터가 바인딩 되는 것입니다. 장점은 성능 저하 없이 DOM을 렌더링 할 수 있지만 단점으로는 변화된 값을 매번 감지하고 바인딩하기 때문에 코드가 증가한다는 문제점이 있습니다.
단방향 데이터 흐름의 장점은 양방향 데이터 바인딩과 반대로 코드의 양이 감소한다는 점이 있고 단점으로는 변화에 따라 DOM 객체 전체를 렌더링 하거나 데이터를 바꿔 성능이 감소할 가능성이 있습니다.
JSX
JSX는 JavaScript를 확장한 문법입니다.
React에서는 본질적으로 렌더링 로직이 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 '컴포넌트'라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
컴포넌트
컴포넌트란 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말합니다. 컴포넌트를 이용하면 소프트웨어 개발을 마치 레고(Lego) 블록을 쌓듯이 조립식으로 쉽게 할 수 있습니다. 모듈(module)이라고도 합니다.
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
📌리액트 장점
- 재사용 가능한 컴포넌트를 활용하여 생산성과 유지 보수를 용이하게 합니다.
- React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있습니다.
- 다른 프레임워크나 라이브러리와 병행해서 사용할 수 있습니다. 이는 개발이 이미 완료된 프로젝트에도 적절히 녹여낼 수 있는 확장성도 포함됩니다.
- 단방향 데이터 바인딩으로 안정성이 보장됩니다.
📌리액트 단점
- View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하므로 JavaScript에 대한 지식이 필요합니다.
- 데이터 모델링, 라이팅, Ajax 등 기능 지원이 되지 않습니다.
🔥React와 Vue 비교
Vue.js란
먼저 Vue.js는 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크 입니다. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것부터 복잡한 것까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공합니다.
React와 Vue의 공통점
- 반응적이고 조합 가능한 컴포넌트를 제공합니다.
- 가상 DOM을 활용합니다.
React와 Vue의 차이점
React
- 리액트는 JSX 형태로 코드를 작성하는데 JavaScript만을 사용해 UI 로직과 DOM을 구현합니다.
- React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있습니다.
- Vue의 템플릿은 재구조화가 어렵고 에러에 취약하지만 React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합합니다.
- 단방향 데이터 바인딩 방식
Vue
- Vue의 가상 DOM 구현이 React보다 빠르며 오버 헤드가 적게 발생합니다.
- Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입장벽이 낮습니다.
- 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링하는 과정에 템플릿이란 문법을 사용합니다.
- 양방향 데이터 바인딩 방식
결론
React는 확장성이 좋으나 JavaScript 문법에 능숙해야 하며 커스터마이징 및 자유도가 높은편입니다. 또한 커뮤니티 형성이 잘 되어있고 큰 프로젝트에 용이합니다.
Vue는 제공되는 HTML 기반의 템플릿이 있어 진입장벽이 낮고 프로젝트를 빠르게 만들 수 있습니다. 개발자간 코드가 통일성이 있으며 소규모 프로젝트에 용이합니다.
이러한 특징들을 확인하며 비교하면서 비즈니스와 개발환경에 더욱 적합한 것을 선택하는 것이 좋습니다.
🔥프레임 워크 vs 라이브러리
프레임워크
프레임워크(Framework)는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조로 소프트웨어 개발에 있어 하나의 뼈대 역할을 합니다. 프레임워크의 코드에는 완성된 기능들이 포함되지 않는다는 것입니다. 결과적으로 프레임워크는 애플리케이션의 기본 바탕을 제공해 주면서 개발자들에게 어디를 수정해서 사용해서 쓸지를 알려주는 것이라고 할 수 있습니다. 그래서 프레임워크 자체가 소프트웨어 개발의 업무 흐름을 정의하고 있으며 개발자들에게 무엇이 필요한지 알려주고 필요한 경우 개발자들의 코드를 호출하여 사용하는 구조입니다.
라이브러리
라이브러리(Library)는 미리 작성된 코드 그룹으로서 쉽게 작업들을 완성시킬 수 있게 해줍니다. 라이브러리는 미리 정의된 메소드와 클래스들의 집합으으로서 개발자들이 자신의 업무에서 쉽게 적용하여 빠르게 개발을 마칠 수 있게 도와줍니다. 결과적으로 개발자들은 특정 기능을 구현하기 위해 코드를 다시 짤 필요가 없습니다. 대부분의 프로그래밍 언어는 기본적인 라이브러리를 포함하고 있으며 개발자들은 또한 자기만의 라이브러리를 추가할 수 있습니다.
