[FE / REACT] React를 사용하는 이유

서론

 

웹 개발을 시작함과 동시에 React를 다뤘습니다.

마치 프론트엔드 개발 = React 개발 이라는 개인적인 생각 때문에 

React를 왜 사용하는가에 대해 고민하는 시간을 가져보지 않았던 것 같습니다..!

 

웹 개발에 왜 React를 사용하는지 알아보시죠~!

 

 

왜 React 인건데?

 

웹 개발을 위한 프레임워크는 다양합니다.

Vue.js React, Angular 등등..

 

개인적으로 다른 프레임워크 대신 React를 사용하는 이유는 러닝 커브가 높지 않고 생태계가 잘 구축되어 있기 때문이라고 생각합니다!

 

하지만 이 것만이 React를 선택하는 이유는 아니라고 생각합니다.

 

 

React의 특징

 

React의 특징은 다음과 같습니다.

 

1. Vitual DOM (가상 DOM)

 

React는 DOM을 가상화하여 메모리에 보관함으로써 최적화된 렌더링 속도를 제공합니다.

일반적으로 한 요소가 변경되면 모든 DOM이 재렌더링 되어 렌더링 속도가 길어지게 되는데 React는 가상 DOM을 사용해 변경이 일어난 부분을 가상 DOM에 적용해 이전 가상 DOM과 비교를 통해 실제로 변경된 부분만 실제 DOM에 적용하여 (최소한의 업데이트) 렌더링 속도를 향상시킵니다.

 

즉, 가상 DOM을 사용해 불필요한 화면의 갱신을 최소화하여 성능을 향상시킨다는 장점을 가집니다

 

2. 컴포넌트 재사용성

React는 컴포넌트 기반으로 설계합니다.

즉, React는 재사용이 가능한 컴포넌트를 사용해 뷰를 구성합니다.

컴포넌트들은 독립적으로 캡슐화가 되어 있기 때문에 복잡한 UI를 쉽게 관리하고 재사용이 가능합니다.

 

 

3. 다양한 툴 제공

React와 호환되는 다양한 툴과 기술 스택이 많습니다.

 

4. JSX 구문

React를 사용하면 자바스크립트 코드에서 명시적으로 HTML 구문을 직접 활용할 수 있습니다

즉, 자바스크립트 내에서 UI 구조를 선언적으로 기술할 수 있습니다. 따라서 UI를 더 직관적으로 이해할 수 있고 작성 가능합니다.

 

5. React Hook

복잡한 class를 사용하는 대신 Hook을 사용해 컴포넌트 간의 state 로직을 간단하게 사용할 수 있습니다.

또한, 비슷한 로직들을 하나의 컴포넌트로 그룹화 하거나 props나 class가 없는 컴포넌트 간에 데이터를 전송할 수 있습니다.

 

 

결론

 

결론적으로

React를 선택하는  이유는 가상 DOM을 활용해 렌더링 최적화를 이룰 수 있고, JSX 문법이나 컴포넌트 기반 코드 작성으로 코드의 재사용과 유지보수에 용이합니다. 또한, 다양한 기술스택과 호환되며 Hook을 통해 코드가 더 간결해지고 상태 관리를 더 쉽게 사용할 수 있어 개발자 입장에서도 더 간단하게 개발이 가능하다고 생각합니다 !!