JavaScript 어플리케이션을 어떻게 구조화 할까 ?

보통은 프레임워크를 이용하여 큰 틀을 만들어둔상태에서 안을 채우는 것이다.

하지만 React js는 라이브러리이다. 큰 틀에서 우리가 자유자재로 사용 가능하다.

프레임워크가 아니라는 것이다.

Angular를 대체 할 수 있을까?

아니다. 이 둘을 비교하는 것은 사과와 오렌지를 비교하는것과 같아서 비교를 할 수 없다.

Angular같은경우는 프레임워크 이다 프론트,백단 모두를 다룬다.

React는 뷰를 담당한다. 이 둘을 같이 사용할 수도 있다.

Virtual DOM

React의 큰 특징은 가상돔을 사용한다.

// JQUERY
$("#content").html("whatever");

// JAVASCRIPT
document.getElementById("content").innerHTML = "whatever";

이러한것은 데이터가 적으면 상관이없지만 많아지면많아질수록 컨트롤하기가 힘들다.

반면 Virtual DOM은 이를 추상화한것일 뿐으로 훨씬 빠르고 간단하다.

{
    name     : "whatever",
    point    : 100,
    eyeColor : black,
    nation   : "ROK"

}

위처럼 데이터를 받았을때 어떠한 돔을 변경해야한다면 이정도의 적은데이터면 비교적 간단하지만 더 큰 데이터가 오거나 복잡하게온다면 컨트롤하기가 더더욱 힘들어질것이다.

React의 장점

1. 배우기 간단하다.

React는 컨트롤러,디렉티브등등 나누지않고 딱 하나만 사용한다.

Component만 사용한다.

1. 뛰어난 Garbage Collection 메모리관리 성능 이다.

2. 서버 & 클라이언트 렌더링

• 유저에게 조금 쾌적한 환경을 제공하고싶다면 처음 서버에서 렌더링을 시키고나서 클라 이언트에게 렌더링을 맡기면된다.
• 리액트에서는 이 기능을 공식적으로 지원해주는반면, 타 라이브러리는 직접 구현해야함.(최근 Angular2 는 지원함)

1. 매우 간편한 UI 수정 및 재사용

2. 페이스북 개발자들이 만들었고, 페이스북이 밀어주기때문에 안정적이다.(인스타그램은 모두 React로 개발되었다고 한다.)

3. 다른 프레임워크나 라이브러리와 혼용 가능(Angular,jquery 등등) 이 말은 이미 개발이 완료된 프로젝트에도 사용이 가능하다는 소리이다.

React의 단점

1. VIEW ONLY 오직 뷰 화면만 담당하기때문에 ajax등등을 지원하지않기때문에 필요하다면 다른 라이브러리와 같이 사용하면 된다.

2. 배우기 쉬운것은 맞으나 뷰 외에기능은 직접 구현하거나 라이브러리를 사용해야한다.

3. IE8 이하 지원X(굳이 지원해야한다면 React js 14버전 이하를 사용하면됨.)

2018-01-29 10:03