리액트를 공부해야 하는 이유 + 장점과 단점

최종 수정 : 2024-04-14

 

리액트는 현존하는 자바스크립트 UI 라이브러리 중에서 가장 많이 사용되고 있다. 그로 인해, 취업이나 이직에서 더 많은 기회를 얻을 수 있다.

 

리액트(React)

A JavaScript library for building user interfaces.

 

대표적인 자바스크립트 UI 라이브러리

라이브러리

프로그래밍에서는 자주 사용되는 기능을 정리해 모아 놓은 것이라는 의미를 갖는다.

UI(User Interface)

사용자 인터페이스는 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해준다.

---

역할

SPA(Singgle Page Application)를 쉽고 빠르게 만들수 있도록 해주는 도구

---

장점

1. 빠른 업데이트와 렌더링 속도

Virtual DOM을 사용하기 때문에 빠른 업데이트가 가능하다. 웹 페이지와 실제 DOM 사이에서 중간 매개체 역할을 수행한다. (자세한 내용은 아래 링크 참고)

https://young-taek.tistory.com/229

DOM / Virtual DOM / 파이버(Fiber)

 

2. 컴포넌트 기반 구조

컴포넌트는 구성요소라는 뜻을 갖고 있는데, 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있다. 하나의 컴포넌트는 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 덕분에 웹 사이트의 여러 곳에서 반복적으로 사용될 수 있다. 즉, 재사용성이 가능하다.

 

3. 재사용성(Resuability)

객체 지향 프로그래밍(Object Orieted Programming)을 배울 때 등장하는 개념으로 소프트웨어 개발에 있어 굉장히 중요하다. 재사용성이라는 것은 말 그대로 다시 사용이 가능한 성질을 의미한다.

재사용을 하려고 할 때 의존성 문제 말고도 여러 가지 호환성 문제가 발생할 수도 있다. 그래서 소프트웨워를 개발할 때 재사용성이 높게 개발해야 한다고 말하는데, 이는 의존성(dependency)을 낮추고 호환성 문제가 발생하지 않도록 개발해야 함을 뜻한다.

 

재사용성이 높아지면, 기존에 개발해둔 모듈을 곧바로 재사용하여 개발하면 되기 때문에 개발 기간이 단축된다. 또한 해당 모듈만 수정해서 다시 배포하면 되므로 유지 보수가 용이한다. 재사용성이 높다는 것은 결국 모듈 간 의존성이 낮기 때문에 쉽게 버그를 찾아서 수정할 수 있기 때문이다.

 

4. 든든한 지원군

메타(구 페이스북)라는 든든한 스폰서를 갖고 있다. 이는 메타에서 프로젝트를 종료하지 않는 한 계속 발전해 나갈 것이기 때문에 믿고 사용해도 된다고 말할 수 있다.

 

5. 활발한 지식 공유 & 커뮤니티

리액트는 상태 관리 라이브러리를 제외하고는 자율성이 높은 편이다. 그래서 다양한 라이브러리가 만들어지고 시도되고 있다.

또한 실제로 사용하고 있는 개발자가 매우 많기에, 도움을 청할 커뮤니티가 잘 구축되어 있다.

 

6. 모바일 앱 개발 가능

리액트를 배운 이후에는 리액트 네이티브(React Native)라는 모바일 환경 UI 프레임워크를 사용해 모바일 앱도 개발할 수 있다.

---

단점

1. 방대한 학습량

자율성이 높은 라이브러리인 만큼, 사용을 위해 배워야 하며 지속적인 업데이트 내용을 추적하며 사용해야 한다.

 

2. 높은 상태 관리 복잡도

리액트에는 state라는 중요한 개념이 있다. 이는 리액트 컴포넌트의 상태를 의미하는데, 성능 최적화를 위해 잘 관리해야 한다.

큰 규모의 프로젝트에서는 Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용하는 경우가 많다. 결국, 이런 라이브러리 또한 공부해야 한다.

---

참고 자료

소플의 처음 만난 리액트 (p.56-72)

 

사진 출처

https://github.com/YuumiNam/reactStudy