[React] 리액트를 왜 사용하는가?

React는 현대적인 웹 개발에서 가장 인기 있는 라이브러리 중 하나로, 많은 개발자들이 그 이유를 꼽고 있습니다. 이 블로그에서는 리액트를 선택해야 하는 이유를 몇 가지 살펴보겠습니다.

1.가상 DOM(Virtual DOM)의 효율성

React는 가상 DOM을 사용하여 실제 DOM 조작을 최소화합니다. 변화가 있는 부분만을 업데이트하므로 성능이 향상되고, 빠른 렌더링을 제공합니다. 특히 복잡한 UI에서는 가상 DOM이 확실히 빛을 발합니다.

바닐라 자바스크립트에 경우에는 Element 전체를 다시 그리기 때문에
Virtual DOM를 사용했을때 더 효율적으로 리렌더링 하는 거를 볼수있다.

2. 컴포넌트 기반 아키텍처

React는 컴포넌트 기반 아키텍처를 채택하고 있습니다. 이는 재사용 가능한 컴포넌트를 쉽게 작성하고 유지보수할 수 있도록 도와줍니다. 각 컴포넌트는 자체적으로 상태(state)를 가지며, 이는 모듈화와 확장성 측면에서 큰 장점으로 작용합니다.

💻 예시: 할 일 목록 컴포넌트

// 할일 목록 아이템 컴포넌트
const TodoItem = ({ text }) => {
  return <li>{text}</li>;
};

// 할일 목록 컴포넌트
const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} text={todo} />
      ))}
    </ul>
  );
};

// 전체 앱 컴포넌트
const App = () => {
  const todoList = ["React 공부하기", "컴포넌트 기반 아키텍처 이해하기", "프로젝트 진행하기"];

  return (
    <div>
      <h1>할 일 목록</h1>
      <TodoList todos={todoList} />
    </div>
  );
};

이 구조에서 각각의 컴포넌트는 독립적이며, 재사용 가능합니다. 예를 들어, 다른 프로젝트에서도 동일한 TodoItem 또는 TodoList 컴포넌트를 사용할 수 있습니다. 또한, 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있어 해당 컴포넌트가 독립적으로 동작할 수 있습니다.
또한 유지보수성과 확장성을 높여주며, 큰 규모의 애플리케이션에서도 각 컴포넌트를 쉽게 이해하고 수정할 수 있도록 도와줍니다.

3. 단방향 데이터 흐름 (One-way Data Binding)

React는 단방향 데이터 흐름을 채택하여 애플리케이션의 상태를 예측 가능하게 만듭니다. 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되기 때문에 디버깅 및 코드 이해가 쉬워집니다.

4. JSX 문법

JSX는 JavaScript를 확장한 문법으로, XML과 유사하게 생겼습니다. 이는 UI 코드를 작성할 때 HTML과 유사한 구문을 사용할 수 있게 해주어 가독성을 향상시킵니다.

5. 커뮤니티와 생태계

React는 엄청난 규모의 커뮤니티를 보유하고 있습니다. 이는 문제에 대한 해결책을 쉽게 찾을 수 있고, 더불어 수많은 오픈 소스 라이브러리 및 도구들이 React와 호환성을 유지하며 발전하고 있습니다.

6. React Native: 웹 및 모바일 플랫폼 동시 개발

React는 React Native라는 동일한 개념으로 웹 및 네이티브 앱을 동시에 개발할 수 있는 기능을 제공합니다. 이는 앱을 빠르게 여러 플랫폼에서 동시에 출시하고자 하는 경우에 큰 장점이 됩니다.