Angular vs React | 생명주기 메서드에 대해서

---

공통점

1. 초기화 단계

• 두 프레임워크 모두 컴포넌트 초기화 단계에서 특정 메서드를 실행한다.
  • Angular : ngOnInit
  • React : constructor, componentDidMount

2. 소멸 단계

• 두 프레임워크 모두 컴포넌트 소멸 단계에서 특정 메서드를 실행한다.
  • Angular : ngOnDestroy
  • React : componentWillUnmount

---

차이점

1. 변경 감지 (Change Detection)

• Angular
  • 변경 감지 메커니즘을 내부적으로 처리한다.
  • 컴포넌트의 상태나 데이터가 변경될 때마다 Angular는 컴포넌트의 뷰를 업데이트한다.
  • ex) ngOnChanges, ngDoCheck
• React
  • Virtual DOM을 사용하여 변경 감지를 수행한다.
  • 컴포넌트의 상태나 속성이 변경될 때마다 가상 DOM을 업데이트 한다.
  • 이전과 현재의 가상 DOM을 비교하여 실제 DOM에 최소한의 변경만 반영한다.
  • ex) shouldComponentUpdate

2. 렌더링과 업데이트

• Angular
  • 랜더링과 업데이트가 통합된 느낌이다.
• React
  • 렌더링과 업데이트가 명확하게 구분되어 있다.
  • ex) render, componentDisUpdate

3. 동기 vs 비동기

• Angular
  • 생명주기 메서드가 동기적으로 호출된다.
  • ex) ngOnInit : 컴포넌트가 초기화될 때 동기적으로 호출된다.
• React
  • 일부 생명주기 메서드가 비동기적으로 동작될 수 있다.
  • ex) componentDidMount : 네트워크 요청과 같은 비동기 작업을 수행할 때 사용된다.