React의 DOM과 생명주기
React Dom?
DOM(Document Object Model) HTML 문서 안에 div, input, a 같은 태그들이 있는데 이 html 문서를 읽고 사용자에게 보여주는 방식. 브라우저와 HTML 문서를 파싱하여 DOM을 생성하고 이를 사용해 웹 페이지를 렌더링
그렇다면 React Virtual Dom?
가상 돔은 실제 돔의 경량화된 메모리 내 표현. 이는 주로 React와 같은 현대적인 JavaScript 프레임워크나 라이브러리에서 사용되며, 브라우저의 실제 돔을 직접 조작하는 대신 메모리 내에서 UI의 변경 사항을 먼저 처리한다. 이러한 접근 방식은 성능을 최적화할 수 있다. 실제 DOM을 직접 조작하는 것은 비용이 많이 드는 작업이기 때문에 가상 DOM은 변경 사항을 메모리 내에서 빠르게 처리하고, 'Diffing' 알고리즘을 사용하여 실제 DOM에 적용해야 할 최소한의 변경 사항만을 식별한다. 이는 불필요한 DOM 조작을 줄여 성능을 개선한다.
Diffing 알고리즘 : 가상 DOM은 애플리케이션의 상태가 변경될 때마다 전체 UI를 가상 돔에 다시 렌더링합니다. 그 후 이전의 가상 돔과 새로운 가상 돔을 비교하여 실제 변경된 부분만을 식별하는 것이 Diffing 알고리즘입니다.
React에는 UI를 구성하는 두가지 주요 방식인 함수형 컴포넌트, 클래스 컴포넌트가 있다.
함수형 컴포넌트
useState, useEffect와 같은 Hook을 사용하여 상태와 라이프 사이클 기능을 함수형 컴포넌트 내에서 사용할 수 있다.
함수형 컴포넌트 생명 주기 순서
- 컴포넌트가 호출되어 로드
- 컴포넌트 내부 함수를 수행
- 데이터의 초기화를 수행
- return() 함수를 실행
- 화면의 렌더링을 수행
- useEffect()를 실행
- 컴포넌트의 변화가 발생하거나 소멸이 발생하는 경우 둘 다 useEffect가 실행
클래스 컴포넌트
클래스 컴포넌트는 내부 상태(this.state)를 관리하고, 라이프 사이클 메소드(componentDidMount, componentDidUpdate, componentWillUnmount)를 사용하여 컴포넌트의 생성, 업데이트, 소멸 시점에 코드를 실행할 수 있다.
클래스 컴포넌트 생명주기
- 컴포넌트가 호출 되어 로드
- constructor() 함수가 실행되며 데이터의 바인딩, 초기화 수행
- render() 함수가 실행되며 화면의 렌더링을 수행
- ComponentDidMount()를 실행하며 렌더링 이후 컴포넌트를 DOM 트리에 삽입(마운트)한다.
- 컴포넌트의 변화가 발생하는 경우 componentDidUpdate()가 실행
- 컴포넌트의 소멸이 발생하는 경우 componentWillUnmount()를 실행