개발 공부 일지/React

리액트에 대해 - 생명주기 / React vs. vue, angular

yelimu 2024. 8. 1. 21:51

1. react를 왜쓰는지
2. 생명주기란?
3. SPA가 뭔지?
4. virtual DOM이 뭔지?
5. vue와 angular와 비교했을 때 react의 장점은?

 

모르는 개념/단어는 기울임 처리

리액트의 생명 주기 life cycle

 컴포넌트가 생성-업데이트-제거 되는 과정을 관리하는 일련의 메서드이다. 

 

1. 마운팅(Mounting): 컴포넌트가 생성되어 DOM에 삽입되는 단계.

  • React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가할 때 발생하며, 한 번만 실행된다.

2. 업데이트(Updating): 컴포넌트의 상태(state)나 속성(props)이 변경되어 다시 렌더링되는 단계.

  • 속성이나 상태가 변경되어 React 엘리먼트를 업데이트할 때 발생하며, 여러 번 실행된다.

3. 언마운팅(Unmounting) :언마운팅 React 엘리먼트를 DOM에서 제거할 때 발생하며, 한 번만 실행된다.

  • 언마운팅 React 엘리먼트를 DOM에서 제거할 때 발생하며, 한 번만 실행된다.
  • componentWillUnmount() : 컴포넌트를 DOM에서 제거하기 전에 실행되며, 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 한다.언마운팅(Unmounting): 컴포넌트가 DOM에서 제거되는 단계.

각 가정마다 특정 메서드들이 호출된다. = 라이프 사이클 이벤트 

 

모든 React 컴포넌트는 라이프 사이클 이벤트가 있다. 라이프사이클 이벤트는 컴포넌트가 수행한 작업이나 앞으로 수행할 작업에 따라 특정 시점에 실행된다. 어떤 이벤트는 한 번만 실행되기도 하고, 어떤 이벤트는 계속해서 실행된다.

React  vs. vue, angular

뷰(Vue)

개발사: 에반 유 (Evan You)와 커뮤니티 

특징:

  • 프레임워크: 뷰는 리액트와 앵귤러의 장점을 결합한 프레임워크로, 매우 직관적이고 사용하기 쉽습니다.
  • 템플릿 문법: HTML 기반 템플릿 문법을 사용하여 컴포넌트를 정의합니다.
  • 반응형 데이터 바인딩: 데이터의 변화를 자동으로 반영하여 UI를 업데이트합니다.
  • 컴포넌트 기반 아키텍처: UI를 작은 컴포넌트로 나누어 개발하고 재사용할 수 있습니다.
  • 단방향 및 양방향 데이터 바인딩: 뷰는 단방향 및 양방향 데이터 바인딩을 모두 지원합니다.

장점:

  • 쉬운 학습 곡선
  • 잘 구성된 문서와 강력한 커뮤니티 지원
  • 경량 및 빠른 성능
  • 유연한 구성 가능

단점:

  • 대규모 프로젝트에서의 경험이 상대적으로 적음
  • 플러그인이나 확장성에서 리액트 및 앵귤러보다 덜 성숙
  • = 기업에서 만든것이 아니기에 프레임워크의 유지관리 측면에서 부족할 수 있고 커뮤니티가 작아 정보량이 부족하다. 

앵귤러(Angular)

개발사: 구글

특징:

  • 프레임워크: 앵귤러는 완전한 프레임워크로, 강력한 도구와 구조를 제공합니다.
  • TypeScript 사용: 앵귤러는 자바스크립트의 상위 집합인 TypeScript를 사용하여 코드의 가독성과 유지보수성을 높입니다.
  • 템플릿 문법: HTML 템플릿과 Angular의 지시문(Directives)을 사용하여 뷰를 정의합니다.
  • 양방향 데이터 바인딩: 모델과 뷰 사이의 데이터를 자동으로 동기화합니다.
  • 의존성 주입(Dependency Injection): 모듈화된 코드 구조를 가능하게 하여 테스트와 유지보수를 용이하게 합니다.

장점:

  • 완전한 프레임워크로 모든 기능을 제공
  • 강력한 의존성 주입 및 DI 컨테이너
  • 대규모 애플리케이션 개발에 적합
  • TypeScript를 통한 향상된 개발 경험

단점:

  • 상대적으로 가파른 학습 곡선 (다루기 어렵다) 
  • 상대적으로 큰 번들 사이즈
  • 초기 설정 및 구성 복잡성

리액트(React)

개발사: 페이스북

특징:

  • 라이브러리: 리액트는 엄격히 말하면 프레임워크가 아닌 UI 라이브러리입니다. 이는 리액트가 특정한 방식으로 모든 것을 강제하지 않고, 필요에 따라 다른 라이브러리와 도구를 선택할 수 있는 유연성을 제공합니다.

 

단점:

  • 필요한 도구와 라이브러리를 직접 선택하고 설정해야 하는 번거로움
  • 완전한 프레임워크가 아니기 때문에 학습 곡선이 다소 존재

 

vue와 angular와 비교했을 때 react의 장점

리액트는 Vue나 Angular와 달리 불필요한 HTML 어트리뷰트가 없다 

: 추가적인 HTML 속성(Attribute)이나 특수 문법을 사용하지 않는다는 것을 말합니다. 이는 리액트와 Vue, Angular의 템플릿 문법을 비교하면 더 명확해집니다.

 

리액트는 순수 자바스크립트의 객체와 함수, JSX를 사용하여 컴포넌트를 정의하고 이벤트 핸들러를 설정한다. 

JSX를 사용하기 때문에 코드가 직관적이고 가독성이 좋다.

초기 로딩시간이 길다는 단점

 

뷰는 HTML 템플릿을 사용하여 컴포넌트를 정의합니다. 이 과정에서 데이터 바인딩, 이벤트 처리 등을 위해 특수한 어트리뷰트(디렉티브)를 사용합니다. 이러한 어트리뷰트는 HTML 코드 내에 추가로 삽입됩니다.

ex. @click : 뷰 의 디렉티브, HTML 어트리뷰트를 확장하여 이벤트를 처리

 

앵귤러 역시 HTML 템플릿을 사용하며, 데이터 바인딩과 이벤트 처리를 위해 특수한 어트리뷰트를 사용합니다. Angular의 경우에는 디렉티브와 바인딩 구문을 통해 이러한 기능을 제공합니다.

ex. (click)은 Angular의 이벤트 바인딩 문법

커뮤니티의 규모가 크다 

angular에 비해 학습이 쉽다

 

Vue는 기본적으로 기능이 간단하고 직관적이지만, 복잡한 애플리케이션을 구축할 때는 Vuex(상태 관리)나 Vue Router(라우팅) 같은 플러그인을 사용해야한다. 

  • 기존 앱에서 보수 및 확장이 필요하거나 빠르게 크로스플랫폼 앱개발까지 필요할 때 - React
  • 가벼운 서비스를 개발할 때, 개발에 관해 잘 모르는 상태에서 빠르게 성과를 내야할 때 - Vue
  • 규모가 큰 기업에서, 많은 기능을 구현해야 하고 확장성이 높은 어플리케이션을 개발할 때 - Angular