[React] react (Virtual DOM, components, jsx)

 

앞서 말했듯이 3세대 웹이 등장하면서 

우리의 웹사이트는 더욱더 복잡해지기 시작했다.

그러다보니 어떻게하면 더 빠르게 일처리를 할 수 있을까?

고민을하다 생각난것이 , 프레임워크고 

 

프론트엔드의 대표적인 프레임워크 3대장에는 

앵귤러 (Angular) 

=> 개발에 필요한 거의 모든 기능을 포함하고 있는 프레임워크이기 때문에

완전히 최적화된 번들 앱을 만들 수 있습니다. 하지만 그만큼 알고,

배워야할게 많아 다루기 힘든 프레임워크

 

리액트 (React) 

=> 엄청난 유연성을 가지고있는 프레임워크, web과 native 앱 개발에 모두 사용가능,

큰 생태계. 그로인한 많은 라이브러리, 큰 규모에서 빛을 발함

 

뷰 (Vue)가 있다.

=> 앱개발이 쉽고 빠르다. 빠른 랜더링과 작은 용량(약 리액트 1/2),

template과 render function 모두 사용가능(2.x버전부터)

 

이중에서 가장 다운로드수가 많고, 생태계가 넓은 리액트에 대해서 알아보자. 

 

우선 사람들이 리액트를 가장 많이 사용하는 이유는?

• Virtual DOM의 존재
• React Native의 앱 개발 가능
• 수 많은 커뮤니티
• Component를 사용한 재사용이 가능하고 유지보수의 용이함

인스타그램, 트위터, 페이스북 같은 웹 앱같은 사이트는

새로고침없이 스무스하게 넘어가는게 특징이다.

이런 사이트를 웹앱이라고 칭하고, 웹앱은 앱이랑

사용성이 비슷해서 웹 앱이라고 부른다. 

이렇게 만든 사이트는 장점이 뭘까?

바로 앱으로 발행이 굉장히 쉽다.

(실제로도 앱처럼 생김)

그리고 사용자에게 긍정적인 효과를 가져 올 수 있고,

빠른 느낌을 받고, 실제로 구매도가 늘어난다고 한다. 

 

 

그럼 Virtual DOM(버츄얼 돔)은 무엇이길래?

 

그동안 우리는 프론트엔드 개발을할때 실제돔을 제어했다.

하지만 리액트 내부의 버츄얼돔을 활용하면 리얼돔과 달라진 부분만 비교해서

수정해기때문에 빠르게 랜더링이 가능하다.

더 자세하게 말하자면

기존의 DOM은 페이지가 바뀔 때마다,

새 HTML를 로드하면서 DOM전체를 바꿨지만

Virtual Dom은 React 컴포넌트가 리턴하는 값에 의해 만들어져서

실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 되는것이다.

이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능하게 되었다.

 

 

그럼 여기서 컴포넌트는?

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 서로서, 

UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할이다.

이러한 컴포넌트들을 나눠놨기에 또 다른 웹에서 재사용이 가능해진다는

장점이 있다.  컴포넌트는 생산성과 유지 보수를 용이하게 하고, 브라우저 화면상에 보이는

하나하나의 버튼, 탭, 아이콘 등이 모두 컴포넌트라고 보면 된다.

이 것들이 모여 하나의 뷰(VIEW)를 완성하게 되는 것이다.

 

컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다.

 

Class형 컴포넌트(Class Component)

=> 클래스형 컴포넌트는 render 함수가 꼭 있어야 하고,

그 안에 보여 주어야 할 JSX를 반환한다.

 

함수형 컴포넌트(Functional Component)

=> 함수형 컴포넌트는 클래스형 컴포넌트에 비해서 훨씬 간단하고 단순하지만

state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았다.

하지만 React 16.8 버전에서 Hook 기능이 추가되면서 함수형 컴포넌트에서도

state를 사용할 수 있게 되었고  그 후부터 클래스형 컴포넌트보다는 함수형 컴포넌트가

더 많이 사용되기 시작했다.

 

 

그럼 JSX란?

JavaScript Syntax Extension로 

- html 요소에 유효한 자바스크립트 코드를 작성 할 수 있는 자바스크립트의 확장 문법이다.

 

JSX의 장점은?

보기 쉽고 익숙하다.

=> 일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해보면,

몇 초만 보아도 JSX를 사용하는 편이 더욱 가독성이 높고 작성하기 쉽다는 것을 느낄 수 있다.

HTML코드를 작성하는 것과 비슷하기 때문이다.

문법 오류와 코드량 감소되고 작성해야 할 코드가 줄어들며,

이는 곧 실수나 반복으로 인한 스트레스를 줄여준다.

 

높은 활용도

JSX에서는 HTML태그를 사용할 수 있을 뿐만 아니라,

앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.

XML과 문법이 유사하여 중첩된 선언형 구조를 더 잘 나타낸다.

 

 

JSX를  올바르게 사용하려면 몇가지 규칙을 지켜야한다.

 

• 감싸인 요소
• 자바스크립트 표현
• if문 대신 조건부 연산자
• AND 연산자(&&)를 사용한 조건부 렌더링
• undefined를 렌더링하지 않기
• 인라인 스타일링
• class 대신 className
• 꼭 닫아야 하는 태그
• 주석