일주일동안 강의를 보거나 프로젝트를 하면서 알게된 것을 적는 주말 기술 회고
React란?
리액트는 Facebook에서 만든 Javascript의 UI 라이브러리이다.
- Facebook은 매우 복잡한 사용자 인터페이스를 가지고 있었고, 수많은 컴포넌트로 구성이 되어 있었다.
- 기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충촉시키기 위해 2011년 Facebook의 소프트웨어 엔지니어 Jordan Walke가 React를 만들엇다.
React의 필요성
웹 개발이 복잡해짐에 따라서 html,css,js만으로는 한계가 생겼다.
그래서 DOM을 직접 조작하는 방식의 한계를 느껴 대규모 프로젝트에서 효율적으로 코드를 관리하고, 컴포넌트 기반 UI개발을 지원하는 프론트엔드 프레임워크가 등장했다.
( Angular, React, Vue )
DOM(Document Object Model)이란?
DOM은 문서 객체 모델(Document Object Model)의 약어로 웹 페이지 문서를 트리 구조의 노드로 표현한다. 또한 JavaScript를 사용하여 이러한 노드를 조작할 수 있다.
DOM은 웹 페이지의 요소에 동적으로 접근하고 수정하는데 사용되면, 웹 애플리케이션의 동적인 긴으을 구현하는 데 중요한 역활은 한다.
React를 사용하는 이유
그럼 왜 앵귤러, 뷰가 있는데 React를 사용할까요?
- 앵귤러와 뷰는 자신들만의 문법을 가지고 있지만, React는 자바스크립트 기반의 문법을 사용하기에 자바스크립트에 익숙하다면 쉽게 사용이 가능하다.
- React는 가볍고 유연한 라이브러리로, 필요한 부분에만 적용을 할 수 있다.
- React는 페이스북에서 만든 오픈 소스 프로젝트이기에 활발하고 다양한 커뮤니티의 생태계를 가지고 있다. 이는 문제 해결을 위한 자료와 자원을 쉽게 얻을 수 있다는 뜻이다.
- React의 UI를 만드는 기능을 웹이 아닌 플랫폼에서 할용할 수 있도록 기술을 확장했다. React Native는 안드로이드와 아이폰의 앱을 만드는 대표적인 기술이다.
이러한 다양한 이유들로 사람들은 React를 사용하고 있다.
React의 특징
React는 다양한 특징들로 개발의 편의성을 높혔다.
가삼 DOM(Virtual DOM)
리액트는 브라우저가 관리하는 실제 DOM이 아닌 가상 DOM을 사용하여 UI 업데이트를 처리한다. 이를 통해 최소한의 DOM조작이 가능하여 신속한 UI 업데이트를 가능하게 하고 성능을 최적화 시켰다.
단방향 데이터 흐름
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.
단방향 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트 한다.
앵귤러와 뷰같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있다.
즉, 양방향 바인딩은 UI가 복잡해지면 성능이 저하되지만, 단방향 바인딩은 성능 저하 없이 DOM을 렌더링 시켜준다.
컴포넌트 기반
React는 컴포넌트기반 아키텍처를 채택하고 있다.
컴포넌트 기반 아키텍처는 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어가는 구조이다.
구성하는 UI요소를 컴포넌트로 분리하여 개발해, 이러한 컴포넌트들을 조합해서 복잡한 UI를 구성할 수 있다.
JSX문법
const hi = <h1>hi</hi>;처럼 JSX문법을 사용한다.
JSX는 Javascript를 확장해서 Xml을 더한 문법이다.
JSX문법을 사용하여서 컴포넌트의 구조와 동작은 선언적으로 작성할 수 있게 해준다. 명령형 프로그래밍은 어떻게 처리할지를 하나하나 코딩하는 방식이라면, 선언적 프로그래밍은 무엇을 해야 하는지를 지정하는 방식이다. 이는 가독성을 높이고, 컴포넌트의 렌더링을 보다 직관적으로 이해할 수 있게 도와준다.
다른 라이브러리와 높은 호환성
리액트는 단독으로 사용해도 좋지만, React Router를 사용해 페이지간의 전환을 관리하고, 상태 관리를 위해 Redux or MobX와 같은 라이브러리를 함께 사용 할 수 있다.
마무리
이번 계기를 통해서 React에 대해서 좀 더 알 수 있는 계기였다고 생각을 한다.
출처
