React를 왜 사용하는걸까??

리액트를 왜 사용할까요?

저는 현재 프론트엔드 개발자로 일하고 있지만, React라는 라이브러리가 궁금해졌습니다.

왜 많은 사람들이 React를 사용하는 걸까요?

다양한 프레임워크와 라이브러리가 있는데, 그 중에서도 왜 React를 선택할까요?

많은 이유 중 하나로 Virtual DOM(가상 DOM)을 꼽을 수 있습니다. 

사실, DOM이 무엇인지 정확히 알기 전에는 Virtual DOM의 중요성을 이해하기 어려울 수 있습니다. 

저도 처음에는 DOM이 뭐지? 라는 생각을 했었거든요.

DOM이란?

DOM은 Document Object Model의 약자로, HTML 문서를 브라우저가 이해하고 조작할 수 있게 해주는 구조입니다. 

쉽게 말해, 우리가 작성한 HTML 코드가 브라우저에 표시되는 모든 요소(body, header, footer 등)를 객체 모델로 표현한 것입니다.

그렇다면, Virtual DOM이란?

Virtual DOM은 리액트가 효율적으로 DOM을 업데이트하기 위해 사용하는 개념입니다. 

이를 더 잘 이해하기 위해 간단한 예제를 살펴보겠습니다.

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Counter: {count}</h1>
      <button onClick={increment} style={{ marginRight: '10px' }}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default App;

위 코드는 리액트 컴포넌트를 이용한 간단한 카운터 앱입니다. 

여기서 중요한 부분은 count 상태가 변경될 때, 리액트가 어떻게 DOM을 업데이트하는지입니다.

Virtual DOM의 동작 방식

상태 변경: increment 또는 decrement 함수가 호출되면 count 상태가 변경됩니다.
Virtual DOM 생성: 리액트는 새로운 Virtual DOM 트리를 생성합니다.
변경사항 비교: 이전 Virtual DOM 트리와 새로운 Virtual DOM 트리를 비교(diffing)하여 변경된 부분만 찾습니다.
실제 DOM 업데이트: 변경된 부분만 실제 DOM에 적용하여 최소한의 업데이트만 수행합니다.
이 과정 덕분에 일반 DOM을 직접 조작하는 것보다 훨씬 효율적입니다. 일반 DOM은 작은 변화에도 전체를 다시 렌더링하는 반면, Virtual DOM은 변화된 부분만 업데이트하므로 성능 저하가 적습니다.

결론

리액트가 사랑받는 이유는 Virtual DOM을 사용하여 효율적으로 DOM을 업데이트하기 때문입니다. 
이로 인해 더 나은 성능과 사용자 경험을 제공할 수 있습니다. 

위의 간단한 예제처럼, 리액트는 상태가 변경될 때마다 최소한의 변경으로 화면을 업데이트하여 효율적인 렌더링을 가능하게 합니다.

이해가 되셨나요? 리액트를 사용하면 더 효율적이고 성능 좋은 웹 애플리케이션을 만들 수 있습니다. 

이제 여러분도 리액트의 매력을 느끼실 수 있을 것입니다!

겨우 저런거 떄문에 React를 쓴다고?!?!
React의 큰 장점이 Virtual DOM이고 다른 여러가지 장점들이 있어요.


1. 완성도 높고 이해하기 쉬운 개발 워크플로우
React는 개발자에게 친숙한 인터페이스와 코딩 언어를 제공합니다. 
React의 구성 요소와 개념은 이해하기 쉬워서 빠르게 배울 수 있습니다.
Vue나 Angular 같은 다른 프레임워크와 달리, React는 HTML 코드에 불필요한 어트리뷰트가 없어서 코드가 깔끔하고 가독성이 높습니다.
특히 JSX를 사용하여 JavaScript 코드 안에 HTML을 작성할 수 있어 더 간결합니다.

2. 뛰어난 유연성과 호환성
React를 사용하면 한 번 배운 기술을 다양한 플랫폼에서 쉽게 재사용할 수 있습니다. 
React를 이용해 웹 디자인 요소와 컴포넌트를 생성할 수 있으며, 이를 다른 프로젝트에서도 활용할 수 있습니다. 
또한, React는 커뮤니티가 크고 활발해서 다양한 도구와 기술 스택을 지원받을 수 있습니다.

3. 손쉬운 컴포넌트 재사용성
React의 가장 큰 장점 중 하나는 컴포넌트를 쉽게 재사용할 수 있다는 점입니다. 
작은 단위의 컴포넌트를 만들어서 프로젝트 내 다른 곳에서도 재사용할 수 있습니다. 
이는 개발 속도를 높이고 유지보수를 쉽게 만들어줍니다.

4. Virtual DOM으로 한층 강화된 고성능
React는 Virtual DOM을 사용하여 성능을 최적화합니다. 
Virtual DOM은 메모리에 가상의 DOM을 만들어 실제 DOM과 비교한 후 최소한의 변경만 실제 DOM에 반영합니다.
이렇게 하면 불필요한 업데이트를 줄이고, 빠른 렌더링 속도를 유지할 수 있습니다.

5. Flux와 Redux의 힘
React는 Flux와 Redux를 사용하여 상태 관리를 쉽게 할 수 있습니다. 
Flux는 데이터 흐름을 단방향으로 유지하여 UI를 설계하는 데 도움을 줍니다.
Redux는 Flux의 개념을 확장하여 중앙에서 상태를 관리하고, 데이터의 일관성을 유지할 수 있게 합니다.

6. 다양한 툴 제공
React는 다양한 개발 도구를 제공합니다. 
예를 들어, Redux 개발자 도구와 React 개발자 도구는 상태 관리와 디버깅을 쉽게 해줍니다. 
크롬 확장 프로그램으로 설치하여 사용할 수 있으며, 이를 통해 props, state, action 등을 효율적으로 확인할 수 있습니다.

7. React Native의 강력한 기능
React Native는 iOS와 안드로이드 앱을 동시에 개발할 수 있는 강력한 도구입니다. 
한 번의 코드 작성으로 여러 플랫폼에서 동작하는 앱을 만들 수 있어 비용과 시간을 절약할 수 있습니다.

8. 거대한 커뮤니티와 리소스
React는 GitHub에서 상위 리포지토리 중 하나로, 대규모 커뮤니티의 지원을 받고 있습니다. 
또한, 많은 대기업에서 React를 사용하고 있어 관련 리소스와 튜토리얼이 풍부합니다.

9. HTML 확장을 위한 JSX 구문
React는 JSX를 사용하여 JavaScript 코드 안에 HTML을 직접 작성할 수 있습니다. 
이는 코드의 가독성을 높이고 유지보수를 쉽게 만듭니다. 
JSX와 Virtual DOM 덕분에 React 앱은 더 빠르고 효율적으로 동작합니다.

10. React Hook
React Hook은 함수형 컴포넌트에서도 상태와 라이프사이클 기능을 사용할 수 있게 해줍니다. 
Hook을 사용하면 복잡한 클래스를 사용할 필요 없이 컴포넌트 간의 상태 로직을 쉽게 관리할 수 있습니다.

 

또 이러한 여러가지 장점이 있지만 나는 React를 하고 Next까지 공부해서 풀 스택을 해보고싶기 떄문에 React를 하는거 같다