리액트란

리액트는(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는 데 사용된다.

리액트는 가상 DOM을 사용하여 UI를 관리한다. 가상 DOM은 브라우저의 실제 DOM을 추상화한 것으로, 리액트에서 UI를 업데이트할 때마다 가상 DOM을 사용하여 변경 사항을 실제 DOM에 적용한다.

React에서 UI를 업데이트하기 위한 과정

1. React 컴포넌트의 상태(State)가 변경된다.
2. React는 변경된 상태를 기반으로 새로운 가상돔을 생성한다.
3. 이전 가상돔과 새로운 가상돔을 비교하여 변경된 부분을 찾아낸다.
4. 변경된 부분만 실제 DOM에 적용한다.
5. 변경된 UI가 브라우저에서 업데이트된다.

리액트는 프레임워크가 아닌 라이브러리

프레임워크와 라이브러리는 모두 코드의 재사용성을 높이고 개발 생산성을 높이기 위한 도구로 사용된다.

프레임워크

프레임워크는 소프트웨어를 개발하기 위한 전체적인 구조와 규칙을 제공한다. 즉, 개발자는 프레임워크에서 제공하는 규칙에 따라 코드를 작성하고 프레임워크에서 제공하는 기능을 사용하여 개발한다. 따라서 개발 생산성은 높지만, 프레임워크가 제공하는 규칙과 구조를 따라야 하기 때문에 개발자의 자유도는 상태적으로 낮다. 예로는 AngularJS나 Django와 같은 프레임워크가 있다.

라이브러리

라이브러리는 개발자가 필요한 기능을 제공하는 도구이다. 즉, 개발자는 필요한 기능을 라이브러리에서 제공하는 함수나 클래스 등을 사용하여 개발을 진행한다. 이러한 접근 방식은 개발자의 자유도가 높기 때문에, 개발자가 원하는 대로 코드를 작성할 수 있다. 예로는 jQuery나 Lodash와 같은 라이브러리가 있다.

따라서, 프레임워크는 개발 과정 전체를 관리하고 구조를 제공하며, 라이브러리는 필요한 기능을 제공하여 개발자가 그것을 사용하여 코드를 작성할 수 있도록 도와준다.

가상돔이란

가상돔은 웹 브라우저의 실제 DOM(Document Object Model)을 추상화한 가벼운 자바스크립트 객체이다.

일반적으로 웹 페이지나 애플리케이션에서 UI를 업데이트할 때, 실제 DOM 요소를 직접 수정한다. 이렇게 하면 UI가 변경될 때마다 브라우저는 매번 실제 DOM을 다시 그리고 레이아웃을 계산한다. 이 작업은 비용이 크기 때문에, UI가 복잡해지고 업데이트 빈도가 높아질수록 성능 문제가 발생한다.

가상돔은 이러한 문제를 해결하기 위해 사용된다. 리액트에서는 UI를 업데이트할 때, 먼저 가상돔에서 변경된 부분을 찾아낸다. 그리고 이를 실제 DOM에 적용하기 전에 모아서 한 번에 적용하게 된다. 이렇게 하면 UI 업데이트가 빈번히 방생하더라도, 변경된 부분만 실제 DOM에 적용하므로 성능 문제를 줄일 수 있다.

컴포넌트(Components)란

컴포넌트는 UI를 구성하는 독립적인 모듈 단위이다.
모듈은 프로그램 내에서 독립적으로 동작할 수 있는 기능적인 부품을 의미한다. 모듈의 보통 파일 하나에 대응하며, 해당 파일 내부에는 특정 기능을 수행하는 코드들이 모여 있다.
리액트에서 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 형태로 작성할 수 있다. 함수형 컴포넌트는 간단하고 가벼운 컴포넌트를 작성할 때 주로 사용되며, 클래스형 컴포넌트는 상태를 관리하는 등의 기능을 수행할 때 주로 사용된다.

컴포넌트는 일반적으로 props와 state라는 두 가지 데이터를 다운다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미하며, state는 컴포넌트 내부에서 관리되는 데이터를 의미한다.

함수형 컴포넌트 예시

import React from 'react';

function FunctionComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default FunctionComponent;

클래스형 컴포넌트 예시

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    );
  }
}

export default ClassComponent;

컴포넌트 자세히 알아보기[클릭]