React의 Virtual DOM과 특징

🔗 참고

1. React Docs : Virtual DOM
2. Medium: Virtual DOM
3. 티스토리: React 컴포넌트의 생명 주기
4. velog: 리액트의 원리 및 특징
5. Github: 리액트의 생명 주기

📌 React의 Virtual DOM

Virtual DOM은 실제 DOM의 가벼운 복사본이며 UI를 효율적으로 렌더링하기 위해 사용됩니다. React와 같은 일부 라이브러리에서 사용되는 개념입니다.

• DOM (Document Object Model) 은 DOM은 웹 페이지의 구조를 나타내는 W3C 표준 인터페이스.
• React 에서는 state나 props 가 변경될 때마다 Virtual DOM 이 다시 생성됨.

React는 항상 두개의 가상돔 객체를 가지고 있다.
1. 렌더링 이전 화면 구조를 나타내는 가상돔
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

리액트는 첫번째 가상돔과 두번째 가상돔을 비교하여 변화가 있는지 확인(state, props 변화)한 후, 차이가 발생한 부분만을 (브라우저 상의) 실제 DOM에 적용한다.

📌 React 특징

State와 Props

Props (Properties)

• Props는 컴포넌트에 의해 전달되는 데이터
• 부모 컴포넌트가 자식 컴포넌트에게 속성을 전달할 때 사용되며 Props는 읽기 전용(immutable)이며, 자식 컴포넌트에서 수정할 수 없음.
• 부모 컴포넌트에서 전달된 Props는 자식 컴포넌트 내에서 this.props를 통해 접근 가능

State

• State는 컴포넌트의 내부 상태이며, State가 변경될 때마다 React는 해당 컴포넌트를 리렌더링함.
• 컴포넌트 내부에서 생성되고 관리되며, 컴포넌트 내부에서 this.state를 통해 접근하고, this.setState() 메서드를 사용하여 업데이트 가능함

Props와 State의 공통점과 차이점

• Props와 State의 차이점 : props는 부모-자식간 전달, state는 컴포넌트 내부에서만
• Props와 State의 공통점 : 데이터 전달

React는 컴포넌트 기반

리액트는 컴포넌트 기반의 구조를 가지고 있다. Component란 독립적인 단위의 소프트웨어 모듈을 말한다. 리액트는 한 화면을 여러 컴포넌트로 쪼개서 렌더링을 하게 되는데, 중복되어 사용되는 컴포넌트를 import하여 사용하면 되기 때문에 개발하기 간편하며 유지 및 보수하기에도 용이하다.

React의 라이프 사이클(생명주기)

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명 주기가 존재한다. 컴포넌트의 생명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다.

마운트(생성)

이 단계는 리액트 컴포넌트의 생명주기에서 컴포넌트가 생성되는 단계이다. 최초로 DOM에 삽입되며 어플리케이션에서 컴포넌트기 시작된다.

• constructor(props) : 이 메서드는 컴포넌트의 생성자 함수이다. 컴포넌트 생성 시 가장 먼저 실행된다.
• getDerivedStateFromProps(props,state) : 이 메서드는 컴포넌트가 새로운 props를 받거나 리렌더링될 때마다 호출된다. 이 메서드를 통해 상태를 업데이트 할 수 있고 state의 변경이 props의 변경에 의존할 때 유용하게 사용된다.
• render() : 이 메서드는 컴포넌트의 필수 메서드로, 컴포넌트가 어떻게 보여질 지 결정한다. 리액트는 이 메서드의 반환값을 사용하여 DOM을 업데이트한다.
• componentDidMount() : 이 메서드는 컴포넌트가 마운트된 직후(DOM에 삽입된 직후)에 호출된다.

업데이트

이 단계는 컴포넌트의 props이나 state의 변경으로 인해 리렌더링이 발생할 때 일어나는 리액트의 컴포넌트 생명주기의 중요한 부분이다. 사용자 인터페이스가 어플리케이션의 가장 최신 데이터와 상태를 반영하도록 보장하는데 필수적이다.

• getDerivedStateFromProps(props, state) : 이 메서드는 초기 마운트와 이후 업데이트 모두에서 render 메서드 직전에 호출된다. 컴포넌트가 props의 변경 결과로 내부 상태를 업데이트할 수 있게 한다.
• shouldComponentUpdate(nextProps, nextState) : 이 메서드는 다음 props와 state가 업데이트를 트리거하지 않아야 한다면 false를 반환함으로써 불필요한 재렌더링을 피할 수 있게 한다.
• render(): this.props, this.state를 검사하고 업데이트 된 JSX를 반환한다.
• getSnapshotBeforeUpdate(prevProps, prevState) : 가장 최근에 렌더링된 출력이 DOM에 커밋되기 바로 전에 이 메서드가 호출된다. 업데이트로 인해 변경될 수 있는 DOM에서 정보를 캡처할 수 있게 해준다.
• componentDidUpdate(prevProps, prevState, snapshot) : 업데이트가 발생한 직후에 이 메서드가 호출된다. props 또는 state 변경에 응답하여 DOM 업데이트나 데이터 가져오기와 같은 작업에 유용하다.

언마운트(해제)

이 단계를 리소스의 효율성을 보장하고 메모리 누수를 방지하는데 중요한 역할을 한다.

• componentWillUnmount() : 이 메서드는 컴포넌트가 DOM에서 제거되기 바로 직전에 호출된다.