1. 리액트란 무엇인가

DOM

DOM은 Document Object Model의 약자로, HTML, XML 등의 문서를 계층 구조로 표현하는 방법이다.

이는 프로그래밍 언어가 문서 구조, 스타일, 콘텐츠 등에 접근하고 조작할 수 있도록 해준다는 특징이 있다.

간단히 말해, DOM은 웹 페이지의 구조와 콘텐츠를 표현하는 데 사용되며, 이를 통해 JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지를 동적으로 조작할 수 있다.

Dom을 변형하려면 브라우저의 돔 셀렉트 API를 통해 특정 돔을 선택한 뒤 특정 이벤트가 발생하면 변환하는 작업을 해야 한다.

APP이 커지면 Dom을 직접 건들게 되면 관리해야하는 상태가 다양해지고 DOM이 너무 많아지는 등 코드가 난잡해진다.

Ember, BackBone, AngularJS는 자바스크립트의 특정값이 바뀌면 특정 돔의 속성도 함께 바뀌도록 연결해주어서 업데이트하게끔 간소화했다.

리액트의 경우에는 상태가 바뀌었을 때, 다 날리고 새로 보여주는 방식을 채택했다는 차이점이 있다.

Virtual DOM

가상의 돔, 메모리에 가상으로 존재하는 돔으로 속도가 훨씬 빠르다.

업데이트가 필요한 UI를 Virtual DOM에 렌더링 후, 비교 알고리즘을 사용해 실제 돔과 Virtual DOM을 비교해 차이점을 감지한 후 실제 돔에 적용한다.

이를 통해 리액트에서는 필요한 변화만 발생시키며 빠른 성능을 지켜낸다.

이 영상을 보면 React의 Virtual DOM에 대해 이해하기 쉬운것 같아 첨부!
REACT의 Virtual DOM

컴포넌트

컴포넌트는 UI를 구성하는 독립적인 조각

각 컴포넌트는 자체적인 상태를 가질 수 있으며, UI의 일부를 나타내고 해당 부분의 동작을 정의한다.
React 애플리케이션은 이러한 컴포넌트들의 조합으로 이루어진다.

React 컴포넌트

클래스 컴포넌트(Class Components)
ES6의 클래스로 작성된 React 컴포넌트
클래스 컴포넌트는 React.Component 클래스를 상속받아 구현된다.
클래스 컴포넌트는 자체적인 상태(state)를 가질 수 있으며, render() 메서드를 통해 UI를 반환한다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

함수 컴포넌트(Function Components)
함수로 작성된 React 컴포넌트
주로 상태를 가지지 않고, 단순히 props를 받아와 UI를 렌더링하는 역할을 한다. React 16.8 이상에서는 함수 컴포넌트에서도 상태를 관리할 수 있는 Hook을 사용할 수 있다.

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

컴포넌트의 특징

React 컴포넌트는 재사용 가능하며, 다른 컴포넌트의 자식으로 포함될 수 있다.
이를 통해 컴포넌트 간의 계층 구조를 형성하고, UI를 모듈화하여 관리할 수 있다. 컴포넌트의 재사용성과 모듈화는 코드의 유지보수성을 향상시키고, 개발 과정을 단순화시킨다는게 특징이다.

React 컴포넌트는 props와 state를 통해 데이터를 전달받고 관리하며, 이를 활용하여 동적인 UI를 구현할 수 있다.
또한 컴포넌트의 생명주기 메서드를 사용하여 컴포넌트의 생성, 업데이트, 제거 등의 작업을 처리할 수 있다.