[포스코x코딩온] React의 시작

React를 다루기 앞서 Angular JS와 Vue.js에 대해 간단히 서술하고 넘어가자

 

Angular JS

• https://angularjs.org/
• 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크
• 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합
• 2016년도 이후 점유율 하락 중
• ex) 유튜브, 페이팔, 구글, 텔레그램 등
• 공식문서를 확인해보면 AngularJS 지원은 2022년 1월부로 공식적으로 종료되었다.

AngularJS — Superheroic JavaScript MVW Framework

---

Vue.js

• https://v2.ko.vuejs.org/v2/guide
• 2013년 출시된 JavaScript 프레임워크
• Angular와 React의 장점을 수용한 프레임워크
• 중국어 기반으로 Reference가 적음
• ex) 샤오미, 알리바바, 깃랩, 어도비 등

Vue(/vju:/로 발음, view와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크입니다. 다른 단일형 프레임워크과 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 

시작하기 — Vue.js

---

그렇다면 왜 이 둘을 사용하지 않고 React를 사용하는가?

1. 커뮤니티와 생태계: ReactJS는 매우 큰 커뮤니티와 활바한 개발자 생태계를 갖추고 있다. 이는 다양한 지원 및 리소스에 접근할 수 있음을 의미하며, 문제 해결 및 업데이트에 도움이 된다.
2. 성능 및 최적화: ReactJS는 Virtual DOM을 사용하여 효율적인 렌더링을 달성하고 애플리케이션의 성능을 향상시킨다. 이러한 특성은 대규모 애플리케이션에서 유용하며 사용자 경험을 향상시킬 수 있다.
3. JSX: ReactJS는 JSX라는 자체 문법 확장을 제공한다. 이는 JavaScript 코드 안에 HTML과 유사한 구문을 사용하여 컴포넌트를 작성할 수 있게 해주어 가독성이 높아지고 컴포넌트 기반 개발을 용이하게 한다.
4. 컴포넌트 기반 아키텍처: ReactJS는 컴포넌트 기반 아키텍처를 강조하며, 이는 애플리케이션을 여러 독립적인 컴포넌트로 나누어 개발 및 유지보수를 용이하게 한다.
5. 유연성과 확장성: ReactJS는 다른 도구 및 라이브러리와 쉽게 통합할 수 있다. 선택적으로 추가할 수 있는 라이브러리들을 사용하여 프로젝트의 유연성과 확장성을 높일 수 있다.
6. React Native: ReactJS의 생태계에는 React Native라는 모바일 애플리케이션 개발을 위한 도구도 포함되어 있다. ReactJS를 익힌 후에는 React Native를 사용하여 iOS 및 Android 앱을 개발할 수 있다.

---

React JS

• https://react.dev/
• 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈 소스 JavaScript 라이브러리
• 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합
• Angular 보다 배우기 쉽다고 이야기 됨.
• ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등

React

• 화면을 만들기 위한 자바스크립트 라이브러리
• 현재 가장 많이 활용되고 있는 인기 있는 라이브러리
• 사용자와 상호 작용이 가능한 동적 UI 제작 가능

---

특징

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

---

Data Flow

• 단방향 데이터 흐름
• Angular JS처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있다.

Component 기반 구조

• Component: 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적인 하나의 부품으로 만드는 방법
• React는 UI(View)를 여러 Component를 쪼개서 만든다.
• 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성
• 장점
  • Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉽다.
  • 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
  • 코드를 반복할 필요 없이 Component만 import 해서 사용하면 된다는 간편함이 있다.
  • 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이하다.

 

• Header, Footer 같은 구조를 컴포넌트로 제작
• 이것들을 조합해서 root component(최상위 컴포넌트)로 만들기

 

 

 

 

 

 

 

 

 

 

Virtual DOM

• DOM: Document Object Model(문서 객체 모델)
• React는 DOM Tree구조와 같은 구조를 Virtual DOM으로 가지고 있다.
• 이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교 -> 앱의 효율성과 속도 개선

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.

Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term “virtual DOM” is usually associated with React elements since they are the objects representing the user interface. React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React.
https://legacy.reactjs.org/docs/faq-internals.html

 

Props and State

• Props
  • 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터
  • 자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경 가능
• State
  • 컴포넌트 내부에서 선언되고 내부에서 값을 변경
  • 클래스형 컴포넌트에서만 사용 가능, 각각의 state는 독립적( 함수형에서는 No!)

JSX

• React에서 JSX 사용이 필수는 아니지만 많이 사용된다.
• JSX = Javascript + XML

---

이렇게 React의 기본 개념(?)에 대해서 공부 및 정리를 해보았다. 실무에서 많이 사용하는 React임으로 더 열심히 공부해야겠다.