React란 뭘까?

Daehyeon Yun·2024년 8월 7일
React프론트엔드

프론트엔드

목록 보기
6/14

React란

📖 Reference
📎https://velog.io/@jeromecheon/React란-특징과-장단점-파헤치기
📎https://deku.posstree.com/ko/react/create-react-app/react/

💡React란?

  • Facebook에서 주도하여 개발한 웹 어플리케이션의 UI를 효과적으로 구축하기 위해 사용하는 JavaScript 기반 라이브러리
  • 다른 라이브러리들과 함께 사용할 수 있어 효율적인 라이브러리.
  • React 자체는 Framework 라 부를 수 있는 기준인 라우팅, 상태 관리 기본 제공 등을 충족하지 못하기에 라이브러리 이지만, React 생태계 자체는 Framework 이다.
  • 싱글 페이지 어플리케이션 생성에 집중한 라이브버리
  • JSX(JavaScript XML)과 단방향 데이터 바인딩(One-way Data Binding)을 사용
  • 가상 돔(Virtual DOM)이라는 개념을 사용해 웹 어플리케이션의 퍼포먼스를 최적화

👶 React의 특징

  • 선언적(Declarative)이다.
  • 컴포넌트 기반(Component-based)이다.
  • 한 번에 배워서 어디에서나 사용(Learn Once, Write Anywhere)할 수 있다.
  • 가상 돔(Virtual DOM)과 단방향 데이터 바인딩(One-way Data Binding)을 가진다.

🚩 선언적

  • React는 대화형 UI를 작성하기에 유리하다.
  • 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다.

🚩 컴포넌트 기반

  • 캡슐화된 컴포넌트가 스스로 상태를 관리하고, 복잡한 UI를 효과적으로 구성할 수 있다.

🚩 강력한 확장성

  • 기존 소스를 불필요하게 다시 작성하기 않고 새 기능을 개발할 수 있다.
    • ex) Node 서버에서 렌더링을 수행할 수 있고, 온라인 웹에서 사용 가능.
    • ex) RN(React Native)을 사용하면 모바일 생태계도 개발 가능.

🚩 가상 돔(Virtual DOM)과 단방향 데이터 바인딩(One-way Data Binding)

  • 자세한 내용은 하단 🔧 React의 작동 원리 에 서술.

😲 강력한 웹앱 프레임워크 - React

이미지 출처 : https://www.webdatarocks.com/blog/best-frontend-frameworks-2019/

React 는 Angular와 Vue.js와 함께 실무 프론트엔드 개발자가 웹 어플리케이션을 구축하기 위해 사용하는 강력한 웹앱 프레임워크.

  • React는 개발자들 사이에서 jQuery를 제외하고 가장 많은 인기를 받고 있다.
  • META에서 지원하는 안정적이고 방대한 오픈 커뮤니티로 인해 발전 가능성이 무궁무진하다.

❓Angular와 Vue?

  • Angular는 Google의 앵귤러팀이 주도하여 오픈소스로 개발한 TypeScript기반 웹 어플리케이션 프레임워크.
  • Vue.js 는 앵귤러팀에서 근무하던 엔지니어가 따로 개발한 TypeScript기반 웹 어플리케이션 프레임워크. 🤔 엥귤러와 뷰가 똑같은 프레임워크 아냐? → 💡 Vue.js 의 경우 웹 UI 개발의 아이디어를 더 접근 가능하도록 하여 입문자들이 좀 더 배우기 쉽다. -> 즉, 러닝커브가 낮다! 🤔 React와의 차이는 뭐야? → 💡 Angular와 Vue.js는 React와 달리MVC(Model-View-COntroller) 패턴을 사용한다. → React는 react-router, mobX , redux 와 같은 서드파티 라이브러리를 사용한다.

🔧 React의 작동 원리는?

  • Virtual DOM 을 사용한 매우 빠른 UI 렌더링
  • 메모리 성능의 최적화
  • 단방향 데이터 흐름(Flux)

🤖 가상 돔, Virtual DOM

웹 브라우저의 렌더링 과정 중 수행되는 리플로우(Reflow) 와 리페인트(Repaint) 는 DOM의 각 노드에 대한 연산 과정을 다시 수행함으로 해당 과정이 수행될 경우 웹 서비스의 성능이 저하되는 문제를 야기한다.

React는 해당 리플로우와 리페인트가 자주 수행되는 문제를 고치기 위해 화면에 표시되는 DOM과 동일한 DOM(Virutal DOM)을 메모리상에 만들고, 렌더링 중 DOM 조작이 발생하면 해당 가상 DOM에 모든 연산을 수행시킨 뒤, 실제 DOM을 갱신시켜 리플로우/리페인트의 연산을 최소화킨다.

  1. 브라우저 DOM과 동일한 가상의 DOM을 메모리에 생성. ⇒ Virutal DOM

  2. 브라우저 렌더링 중 DOM 조작이 발생되면 가상의 DOM에 연산 수행.

  3. 모든 연산이 수행된 후 실제 브라우저 DOM을 갱신.

    ⇒ 결과적으로 리플로우/리페인트의 최소화로, 성능 최적화

🔀 양/단방향 데이터 바인딩

양방향 데이터 바인딩이란, 사용자 UI의 데이터 변경을 감시하는 Watcher 와 자바스크립트의 데이터 변경을 감시하는 Watcher 가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식을 말한다.

⇒ 이를 통해 프로그래머는 자바스크립트내에 데이터 변경과 사용자 UI에 데이터 변경에 대한 동기화 를 신경쓰지않고 프로그램을 작성할 수 있다.

여기서 생각을 해보면, 하나의 데이터를 동기하기 위해 UI와 JS를 감시하는 Watcher 가 2개 사용된다.

만약, 수많은 데이터 생기게 되면 해당 데이터를 동기화하기 위한 수많은 Watcher가 생성되므로, 성능 저하가 일어날 수 있다.

⇒ 이러한 문제점 때문에 리엑트는 단방향 데이터 바인딩을 사용한다.

단방향 데이터 바인딩은 하나의 Watcher가 자바스크립트의 데이터 변경을 감시하여 사용자의 UI를 갱신한다. 그 반대로, 사용자 UI의 데이터 변경을 갱신할 때는 Event 를 통해 갱신하게 된다.

⇒ 단방향 데이터 바인딩은 양방향과 달리 하나의 Watcher를 사용하기 때문에 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결함과 동시에 확실하게 데이터를 추적할 수 있게 해준다.

🤔 React는 단점이 없나?

단점을 정리하기 전, 장점을 우선 정리하도록 한다.

😀 React의 장점

  1. React 공식 레퍼런스의 가이드와 방대한 커뮤니티, 자료를 통해 러닝커브가 낮다.
  2. Controller, directive, template, model, view처럼 로직을 분리하는 것이 아닌, Component 하나로 관리한다. → MVC의 View 를 의미
  3. 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능
  4. UI 수정과 재사용성이 높고, 코드 가독성을 높일 수 있다.
  5. 다른 프레임워크나 라이브러리와 병행해서 사용할 수 있다. → 확장성이 매우 크다.

🤔 React의 단점

  1. 빠르게 발전되는 방대한 커뮤니티로 인한 독

    → React 생태계는 새로운 업데이트, 라이브버리 및 모범 사례가 자주 등장하며 빠르게 발전한다. 이러한 변화를 따라가기 위해 꾸준한 학습이 반드시 필요하다.

  2. 프로젝트의 규모가 커질수록 복잡해진다.

    → React 어플리케이션은 특히 규모와 범위가 커질수록 복잡해진다. 상태관리, 화면 요소 재렌더링 보장으로 인해 코드베이스가 복잡해질 수 있다…..

  3. 성능 최적화 측면

    → React 어플리케이션을 설계하고 개발할 때 적절하게 최적화하지 않을 시 성능 문제에 직면할 수 있다.

  4. 복잡성

    → React는 UI를 구축하기 위한 프레임워크이다. 하지만 Webpack, Babel, ESLint 등 React를 구성하는 최소한의 도구 이해하기 위한 러닝커브가 다소 높다.

  5. JSX 러닝 커브

    → JSX는 React에서 장점으로 통용되지만, HTML과 JavaScript 구문을 혼합하여 사용하는 것이 직관적이지 않을 때가 많아 작업할 때 혼동이 될 수 있다.

  6. React 자체의 러닝 커브

    → React는 강력한 UI 개발 프레임워크이지만, React 아키텍쳐, JSX 및 단방향 데이터 흐름과 같은 개념을 처음 접하는 개발자들에게는 러닝커브가 높다.. ~~절대 필자 이야기가 아니다. ㅠㅠ~~

  7. 검색 엔진 최적화(SEO, search engine optimization) 측면

    →SSR 또는 Next.js와 같은 도구를 사용하여 React 어플리케이션을 SEO시킬 수 있지만, 개발 프로세스가 매우 복잡해질 수 있다.

  8. 의존성(존속성) 관리

    → React 어플리케이션은 서드파티 라이브러리와 다양한 프레임워크와 결합하여 엄청난 확장성을 자랑한다. 하지만, 이 점이 오히려 독으로 작용할 수 있다. 많은 프레임워크와 라이브러리 종속성에 의존하므로 상시 유지 관리 문제, 보안 취약성 및 호환성 문제가 발생할 수 있다.

    → 따라서 상시 종속성을 최신 상태로 유지해야하는 단점이 있다.

🤔 왜 React를 사용할까?

전세계 수많은 개발자들이 React를 사용하는 이유는.. 개인적으로 React 처럼 안정성있고 확장 가능성이 무궁무진한 프레임워크라 생각한다.

React의 강력한 컴포넌트 기반 아키텍처, 가상 DOM을 통한 브라우저 렌더링의 최적화 등 동적 UI를 설계할 수 있는 도구는 React외에는 없다고 생각한다.

하지만, 어디까지나 React밖에 사용하지 않은 필자의 입장이다.

사용자 인터페이스를 효율적으로 설계하도록 도와주는 프레임워크는 다양하다.

앵귤러, 리액트, 뷰, 스벨트 등 앞으로도 지금처럼 엄청난 속도로 발전되는 프론트엔드 시장에서 폭 넓은 견해를 가지기 위해 꾸준히 공부를 해야겠다는 생각을 다시금 들었다.

profile
Daehyeon Yun
열심히 살아야지
이전 포스트

렌더링 최적화(Reflow, Repaint)

다음 포스트

Vite란 뭘까?

0개의 댓글