베하! 안녕하세요 금쪽상담소의 오은영석사와 금쪽이입니다.
어느덧 겨울이네요. 겨울은 잘 나고 계신가요?
우리 금쪽이들은 누구보다 따뜻한 겨울보내시길 바랍니다~
자 본론으로 들어가서 오늘 배울 내용은 무엇일까요?
바로 프론트앤드의 대표적인 개발도구인 React 입니다!!
이제 배우러 떠나보실까요?!?!
React 란?
Facebook(현재 Meta)에서 만든 Javascript 사용자인터페이스(UI) 라이브러리입니다.
Facebook은 매우 복잡한 사용자 인터페이스를 가지고 있으며, 수많은 컴포넌트로 구성되어 있습니다.
기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 2011년 Facebook의 소프트웨어 엔지니어 Jordan Walke는 React를 만들었습니다.
웹 개발이 복잡해짐에 따라 html, css, js만으로는 한계가 생겼으며, 초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게해주는 jQuery 라이브러리가 주로 사용되었습니다.
이후 DOM을 직접 조작하는 방식에 한계를 느껴 대규모 프로젝트에 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크(라이브러리)가 등장했습니다.
그 중 Angular, React, Vue를 프론트엔드 개발을 대표하는 도구 3가지라 부릅니다.
DOM(Document Object Model)이란?
- 문서 객체 모델(Document Object Model)의 약어로 웹 페이지 문서를 트리 구조의 노드로 표현합니다.
- JavaScript를 사용하여 이러한 노드를 조작할 수 있습니다.
- DOM은 웹 페이지의 요소에 동적으로 접근하고 수정하는 데 사용되며, 웹 애플리케이션의 동적인 기능을 구현하는 데 중요한 역할을 합니다.
그중에서 가장 널리 사용되고 있는 것이 바로 React 입니다.
리액트와 같은 프론트엔드 라이브러리나 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해주기 때문에 UI를 빠르게 업데이트할 수 있다는 점입니다.
리액트는 가상 돔(Virtual Dom)을 통해 재사용이 필요한 기능을 언제든지 필요한 곳에서 호출하여, 반복적인 코드 작성 없이 사용할 수 있도록 해줍니다.
React장점
- 앵귤러와 뷰는 자신들만의 문법을 갖고 있지만, 리액트는 자바스크립트 기반의 문법을 사용하기 때문에 자바스크립트에 익숙하다면 보다 쉽게 사용이 가능합니다.
- 리액트는 가볍고 유연한 라이브러리로, 필요한 부분에만 적용할 수 있습니다. 때문에 기존 프로젝트에 리액트를 통합하기 쉽게 만들어줍니다. 또한, 다른 프레임워크나 라이브러리와의 혼용도 가능하므로 기존 코드를 변경하지 않고도 리액트를 도입할 수 있습니다.
- 리액트는 페이스북에서 개발한 오픈 소스 프로젝트로, 활발하고 다양한 커뮤니티와 생태계를 가지고 있습니다. 이는 문제 해결을 위한 자료와 지원을 쉽게 얻을 수 있으며, 다양한 라이브러리와 도구를 활용하여 개발 생산성을 높일 수 있습니다.
- 리액트의 UI를 만드는 기능을 확장하여 웹이 아닌 플랫폼에서 활용할 수 있도록 기술을 확장했습니다. React Native는 안드로이드(Android)와 아이폰(iOS)의 모바일 앱을 만드는 대표적인 기술로 널리 사용되고 있습니다.
React의 특징
- 가상 DOM(Virtual DOM) : 리액트는 브라우저가 관리하는 실제 DOM이 아닌 가상 DOM을 사용하여 UI 업데이트를 처리합니다. 이를 통해 최소한의 DOM 조작이 가능하여 신속한 UI 업데이트를 가능하게 하고, 성능을 최적화 시켰습니다.
- 단방향 데이터 흐름 : 리액트는 데이터의 흐름을 단방향으로 유지합니다. 단방향 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트합니다. 뷰와 앵귤러는 양방향 데이터 바인딩을 합니다. 양방향 바인딩은 데이터의 변경과 UI 요소의 상태 변경이 서로 영향을 주어 동시에 업데이트됩니다. 양방향 바인딩은 UI가 복잡해지면 성능이 저하되지만, 단방향 바인딩은 성능 저하 없이 DOM을 렌더링 시켜줍니다
- 컴포넌트 기반 아키텍처 : 리액트는 ‘컴포넌트’ 기반 아키텍처를 채택하고 있습니다. 컴포넌트 기반 아키텍처란, 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어 가는 구조를 의미합니다. 구성하는 UI 요소를 컴포넌트로 분리하여 개발하고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 구성할 수 있습니다.
- JSX 문법 : 리액트는 자바스크립트와 XML을 조합한 JSX 문법을 사용합니다. JSX는 컴포넌트의 구조와 동작을 ‘선언적’으로 작성할 수 있게 해줍니다. ‘명령형(절차적)’ 프로그래밍은 어떻게(HOW) 처리할지를 하나하나 코딩하는 방식이라면, ‘선언적’ 프로그래밍은 “어떻게” 보다 “무엇(WHAT)”을 해야 하는지를 지정하는 방식을 의미합니다. 이는 가독성을 높이고, 컴포넌트의 렌더링을 보다 직관적으로 이해할 수 있도록 도와줍니다.
- 다른 라이브러리와의 높은 호환성 : 리액트는 단독으로 사용할 수도 있지만, 주로 다른 라이브러리나 프레임워크와 함께 사용합니다. 예를 들어, 리액트 애플리케이션을 개발할 때는 리액트 라우터(React Router)를 사용하여 페이지 간의 전환을 관리하고, 상태 관리를 위해 리덕스(Redux) 또는 모빌(MobX)과 같은 라이브러리를 함께 사용할 수 있습니다.
React 장점
- 크로스 플랫폼 개발 : 리액트 네이티브(React Native)를 사용하면 리액트의 개념과 문법을 활용하여 iOS 및 안드로이드 애플리케이션을 개발할 수 있습니다. 따라서, 하나의 코드 베이스로 여러 플랫폼의 애플리케이션을 개발할 수 있어 개발 생산성이 높아집니다.
- 사용자 경험 개선 : 리액트는 가상 돔과 다양한 최적화 기법을 활용하여 성능을 향상시킬 수 있습니다. 페이지 이동 시 발생하는 깜박임이나, 화면의 느려짐 등 사용자 경험을 개선하고 웹 애플리케이션의 반응성을 향상시킬 수 있습니다
- 대규모 프로젝트 개발 지원 : 리액트는 컴포넌트 기반 개발을 지원하며, UI를 작은 단위로 분리하여 개발할 수 있습니다. 리액트는 개발자가 컴포넌트를 재사용하도록 유도합니다. 이렇게 개발한 컴포넌트를 다른 프로젝트에서도 활용할 수 있기 때문에, 결과적으로 개발 생산성이 향상됩니다. 또한 코드의 가독성이 높아지고 유지 보수가 용이해집니다.
이렇게 리액트에 대해 알아보는 시간이였습니다.
유익한 시간이였길 바라며 다음에 만나요 베빠~!
'INFRA > DevOps' 카테고리의 다른 글
| AWS Chatbot을 이용한 ChatOps 모니터링 (0) | 2023.12.04 |
|---|---|
| [K8S] CronJob (1) | 2023.11.25 |
| [K8S] Environment (1) | 2023.11.12 |
| [K8S] SecurityContext (1) | 2023.10.28 |
| Terraform Import (0) | 2023.10.27 |
댓글