1. 리액트의 특징과 장단점

React 란?

Facebook 에서 주도하여 개발하여 UI를 효과적으로 구축하기 위해 사용하는 JS 기반 라이브러리.

React 자체로는 Framework 라고 부를 수 있는 기준인 Routing, 상태관리 기본 제공을 충족하지 못해서 '라이브러리'이지만, React 생태계로서는 Framework.

 

React 등장 배경

기존: 특정 DOM 을 선택한 뒤, 해당 DOM에 어떤 이벤트가 발생하면 이에 대한 change 가 일어나도록 설정하는 방식.

- 유저와의 상호작용이 자주 일어나는 경우 이에 따른 변화를 동적으로 UI에 표현해야 한다면 그만큼 애플리케이션이 복잡해지고 관리가 힘들어짐.

 

React 특징

1. 가상 DOM

   기존의 경우 하나의 데이터가 바뀌어도 화면 전체가 리렌더링 되어서 전체 화면이 다시 그려져야 하는 구조였는데

   가상 DOM을 적용함으로써 바뀌는 부분 컴포넌트만 리렌더하여 화면을 갱신한다.

 

2. 단방향 데이터 바인딩

양방향 데이터 바인딩

사용자 UI의 데이터 변경을 감시하는 Watcher 와 Javascript 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식.

- 자동 동기화는 좋으나, 데이터가 많아지게 되면 이 데이터의 동기화를 위한 수 많은 watcher가 생성되므로, 반대로 성능 저하가 발생할 수 있음 ...

단방향 데이터 바인딩

그래서 react 는 단방향 데이터 바인딩을 채택.

사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신을 해야함.

- 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있게 해줌.

 

3. JSX

JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어

const App = ()=> {
	const hello = 'Hello World!';
    return <div>{hello}</div>
}

 

 

4. 선언형 프로그래밍

- 명령형 프로그래밍 : 어떻게(how)에 집중하는 것 / 선언형 프로그래밍 : 무엇(What)에 집중하는 것

- 예시

   * 명령형 프로그래밍

const double = (arr) => {
	let results = [];
    for (let i=0;i<arr.length;i++){
    	results.push(arr[i]*2);
    }
    return results;
}

   * 선언형 프로그래밍

const double = (arr) => {
	return arr.map((ele) => (ele)*2);
}

 

5. 컴포넌트 기반

- 예시

const Title = () => {
	return <h1>Hello world</h1>;
}

const Button = () => {
	return <button>button</button>;
}

const App = () => {
	return (
     <div>
     	<Title/>
        <Button/>
     </div>
    );
};

 

React 점유율

 

React 장단점

장점

* Controller, Directive, Templete, Model, View 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 함

* 성능이 뛰어난 garbage collector, 메모리 관리 기능을 지원

* UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있음

* 다른 Framework 나 Library 와 병행하여 사용 가능. 이미 개발 완료 된 프로젝트에도 적절하게 녹일 수 있는 확장성도 포함됨.

 

단점

* IE8 이하 버전은 지원하지 않음

* View 이외의 기능은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기에 Javascript 배경지식이 필수 선행.

* 로딩시간이 긴 편.

* 웹의 궁극적인 지향점과는 다소 동떨어져 있음

   - 웹의 핵심 : 모든 것을 streaming 하며, 페이지들은 HTML 태그들을 내포하고 가벼운 response만 브라우징함.

   - React : 사이트에 필요한 JS를 처음에는 공백 페이지로 띄우고, 이후 다운로드 한다. 한번 다운로드 한 이후에는 다시 리소스를 다운하지 않아도 되지만, 처음 보이는 것이 없다는 것이 streaming 과의 차이.