[리액트] 리액트(React)의 사용 이유와 장단점

면접 연습을 하면서 면접을 많이 보러 다녔던 친구에게 면접 질문 목록을 받았답니다..

프론트, 백, 클라우드, SQL 등 총 45개 정도 있어서 하나하나 공부하고 외우면서 포스팅도 함께할 겁니당

 

 

 

React란?

리액트(React)는 페이스북에서 제공해주는 프론트엔드 라이브러리입니다. 

자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다.

 

리액트(React)는 웹 페이지의 복잡한 UI를 효과적으로 관리하기 위해 개발되었으며, "컴포넌트"라는 개념을 중심으로 설계되었습니다.

 

리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였습니다.

2013년 5월에 오픈 소스화 되었습니다!

 

현재 많이 활용되고 있는 프론트엔드 프레임워크 중 Top 3안에 든답니다.

React 특징

1. 단방향 데이터 바인딩(One-way data flow)

props라는 데이터가 상위 컴포넌트에서 하위 컴포넌트로만 전달되며, 이것은 애플리케이션의 복잡성을 줄여주고 디버깅을 용이하게 합니다.

 

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

React는 재사용 가능한 컴포넌트를 만드러 UI를 구성합니다.

이렇게 하면 코드의 재사용성을 높아지고, 유지보수가 쉽습니다.

 

3. 가상 DOM

React는 실제 DOM에 직접 작업하지 않고, 가상 DOM을 사용하여 변화를 생기 부분만 감지해서 실제 DOM에 반영합니다. 

이로 인해 불필요한 렌더링 작업을 줄일 수 있어 성능이 향상됩니다.

* 가상 DOM

웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것입니다. -> DOM은 수정할때마다 렌더링을 해야합니다.

 

 

4. JSX

JSX 문법은 JavaScript 내에서 HTML같은 문법을 사용할 수 있게 해줍니다. 

이로인해 코드가 읽기 쉽고 작성하기도 쉽습니다.

 

 

 

 

 

React의 장단점

장점

• 높은 유연성과 성능
• 재사용 가능한 컴포넌트
• 크고 활발한 커뮤니티 : 많은 개발자와 기업들이 React를 사용하므로 다양한 자료와 모듈, 해결책 등을 쉽게 찾아 볼 수 있습니다.
• 다양한 플랫폼 지원 : React Native 등으로 확장하여 모바일 애플리케이션 개발도 가능합니다.

단점

• 학습 곡선 : React를 효과적으로 사용하기 위해서 JSX, ES6, 빌드 도구 등 추가적인 기술 학습 필요
• 뷰 라이브러리 : React는 뷰만 담당하는 라이브러리이기 때문에 완전한 프레임워크가 아닙니다. 상태 관리나 라우팅 등의 기능을 위해서는 추가적인 패키를 사용해야합니다.
• 빠른 변화 : 계속 발전하고 있어서 새로운 개념과 도구들이 지속적으로 나타납니다. 최신트렌드를 따라가야하는 부담감이 있을 수 있습니다..

 

 

 

 

마치며

위에 나온 단점과 상이하지만 HTML의 태그를 공부했다면 무난하게 학습 할 수 있다고 생각합니다!

저도 웹 개발 프로젝트를 한적이 있는데 React document 보면서 코드를 구현하면서 새로운 것도 볼 수 있었고 금방 활용할 수 있었습니다. (물론 다른 코드를 참고하면서 공부한거랍니다..ㅎ) 그리고 정말 위에 작성한 내용처럼 React의 커뮤니티가 활성화가 잘되어 있답니다. npm이나 yarn으로 import해서 다른 사람이 만든 패키지?를 사용할 수 있습니다. 그러면 더 빠르고 이쁘게 프로젝트를 수행할 수 있답니다ㅎㅎ

아직 저도 초보자지만 프론트 엔드 개발로 첫 시작이라면 HTML을 공부하는 것을 추천합니다.

 

 

 

 

참고

https://digit2sight.com/%EC%9B%B9%EA%B0%9C%EB%B0%9C%EC%9D%84-%EC%9C%84%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EC%88%9C%EC%9C%84-top10/