[Session] 왜 React를 사용할까? / 이지은

웹 페이지를 만들 수 있는 건

html, css, js도 있는데 왜 React를 쓰고 

큰 인기를 끌까요?

저는 React에 대해서 왜 사용하고, 어떤 장점이 있는지

작성해보려고 합니다.

 

1. 리액트(React.js)는 무엇일까?

React.js는 웹, 그 중에서도 SPA(Single Page Application)를 위한 사용자 인터페이스를 구축하는데 사용되는 오픈소스 JS 라이브러리입니다. React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있습니다.

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 

출처: https://ko.reactjs.org/tutorial/tutorial.html

---

2. 리액트(React.js)의 특징은 무엇일까?

리액트의 특징에는 다음이 포함됩니다.

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. JSX

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.

Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다.

2. Component 기반 구조

React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만듭니다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽습니다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높습니다. 

3. Virtual DOM

DOM : Document Object Model의 약자.

DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.

4. JSX

JSX란 ?
Javascript를 확장한 문법입니다.

React에서 JSX 사용이 필수는 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

---

 

3. 그중에서도 왜 리액트(React.js)인가 ?

사실 Vue, Angular와 같이 프론트엔드 웹 애플리케이션 개발을 더 쉽게 만들어주는 플랫폼이 정말 많습니다. 그중에서도 React가 가지는 이점에 대해 살펴보겠습니다.

 

• 배우기 쉬움

JavaScript 대한 기본 지식이 있는 사람이라면 누구나 React를 쉽게 이해할 수 있습니다. 하지만 Angular와 Ember는 'Domain-specific Language'라고 하여 배우기 어렵다는 의미입니다. React에 대응하려면 CSS와 HTML에 대한 기본 지식만 있으면 됩니다.

 

• 단순성

ReactJS는 바로 이해하기가 더 쉽습니다. 

구성 요소 기반 접근 방식, 잘 정의된 수명 주기 및 일반 JavaScript만 사용하면 React를 매우 간단하게 배우고 전문 웹(및 모바일 응용 프로그램)을 구축하고 지원할 수 있습니다.

React는 HTML과 JavaScript를 혼합할 수 있는 JSX라는 특수 구문을 사용합니다. 이것은 요구 사항이 아닙니다.

개발자는 React를 사용할 때 일반 JavaScript로 작성할 수 있지만, JSX는 사용하기가 훨씬 쉽습니다.

 

• 네이티브 접근

React는 모바일 애플리케이션을 만드는 데 사용할 수 있습니다(React Native). 그리고 React는 재사용성에 대한 매우 좋습니다.

즉, 광범위한 코드 재사용성이 지원됩니다. 따라서 동시에 IOS, Android 및 웹 응용 프로그램을 만들 수 있습니다.

 

 

---

 

 

부록 : 팀 프로젝트 잘하는 팁

1. 팀원의 능력을 파악한다.

팀원들이 어디까지 할 수 있는지 모른채 일을 진행하면 뭐든지 엉망으로 치닫게 마련인 것 같습니다. 능력에 부치는 일을 주지 않는 것이 제일이지만, 그렇게 하기 위한 전제로서 ‘능력 파악’이 필요합니다. 본격적으로 프로젝트 일을 분담하기 전에, 각자가 무엇을 얼마나 어떻게 할 수 있는지 서로서로 (정확하게)알려주는것이 좋습니다!

 

2. 웃어라. (잡담은 곧 경쟁력)

 

팀 프로젝트도 사람과 사람이 하는 일입니다. 프로젝트 구현 결과물이 엉망이라도, 팀원들과 있는 시간이 즐거우면 그것만으로도 스트레스는 많이 줄어듭니다. 프로젝트를 기피하지 않는 이유가 되기도 합니다. 팀 내에서 개그 담당 하나정도는 있으면 좋다고 합니다.

 

3. 할 수 있는 것을 해라

 

하고 싶은 것을 하지 마라. 할 수 있는 것을 해라. 라고 합니다. 보통 하고 싶을 것을 하게 되면 의욕이 넘쳐 기획이 폭주하기 마련입니다. 그렇게되면 다른 사람의 의견을 무시하게 되는 일도 왕왕 생깁니다. 적당히, 할 수 있는 만큼만 하는게 좋다고 합니다.

4. 핵심은 '성취감'

각 조원들 모두가 성취감을 느낄 수 있는 일들을 맡는게 좋습니다. 그것은 너무 분할되지도 너무 크지도 않은 적당한 부담의 일이어야 합니다. 프로젝트를 진행하며 얻는 자잘한 성취감은 프로젝트에 더욱 집중하게 만드는 요소가 되기도 하죠!

 

5. 코딩 컨벤션 지키기

소프트웨어 lifetime의 80%가 유지보수에 소요됩니다. 본래의 개발자에 의해서 소프트웨어 개발 전체가 유지되는 소프트웨어는 거의 존재하지 않기에 소프트웨어의 가독성은 중요한 요소이기도 합니다. Code convention은 소프트웨어의 개발자들이 새로운 코드를 더 빠르고 완벽하게 이해할 수 있게 해서, 소프트웨어의 가독성을 향상시키며 의사소통에 도움이 됩니다.