초기 세팅 / ssr 방법
-
앵귤러
- Angular CLI 로 개발환경 구축 및 기본 골격(스캐폴딩) 생성
-
리액트
-
직접 세팅
- node.js 설치 (npm)
- React project 설정
- webpack 설치
- babel 설치
- React 설치 및 설정 (webpack+babel 프로젝트)
- Hot module replacement 설치
-
CLI 이용
-
CRA (CSR) → 관리자페이지등 검색노출 필요없는 사이트
-
Next.js → SEO 필요한 사이트, Code Splitting
(코드 분할(Code Splitting)은 싱글 페이지 애플리케이션의 성능을 향상시키는 방법입니다. 싱글 페이지 애플리케이션(Single Page Application)은 초기 실행시에 필요한 웹 자원을 모두 다운 받는 특징이 있습니다. 코드 분할을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능 상의 이점이 생깁니다.)
-
-
퍼포먼스 비교
앵귤러가 리액트나 뷰에 비해 시작 시 조금 더 느리다. 앵귤러가 빠른 프레임워크기는 하지만, 번들 사이즈가 크다. 그래서 큰 앱을 만들때는, 앵귤러가 좀 더 빠른 퍼포먼스를 보인다. 리액트와 뷰는 작은 어플리케이션에서는 비슷하다.
하지만, 셋 다 큰 차이는 없어 선택함에 있어 성능은 크게 중요하지 않다.
템플릿 구조/ 컴포넌트
앵귤러
- html+css+js
리액트
- js + css / js only (CSS-in-JS 라이브러리: styled-component등)
- jsx(html+js)
- Nested Elements
- className
- JavaScript Expression : JSX 안에서, JavaScript 표현을 사용하는 방법 → { } 로 wrapping
- if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 안에서 그대로 사용할 수 없고, 삼항연산자 사용하거나 return 밖에서 사용.
- boolean, null, undefined는 무시된다(렌더링 되지않는다)
⇒ {showHeader && } showHeader가 true일때만 렌더링된다.
sayHey(){
alert("hey");
}
render(){
let text = "Dev-Server"
return (
<div>
<h1> Hello </h1>
<h2> Welcome to {text}</h2>
<button onClick={this.sayHey}>Click Me</button>
<button onClick={() => {console.log("hi")}}>Click Me</button>
</div>
);
}누가 사용해야하는가
리액트
사용중인 기업: Facebook, Netflix, Uber, Heroku, Paypal, Atlassian, Airbnb, Microsoft 등
- 빠른 일정 안에 엔터프라이즈 수준의 가벼우면서도 현대적인 애플리케이션을 개발해야 할 때
- Component 의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용 용이
- 크로스 플랫폼(cross-platform) 애플리케이션 개발할때
- 기존의 앱에서 기능성을 확장할 때. 서비스 중인 어플리케이션에도 점진적 채택이 용이하다.
- 강력한 커뮤니티 지원과 솔루션이 필요할 때
앵귤러
사용중인 기업: Google, Youtube, Aws, Telegram, Paypal, Upwork, Nike
- 자체적으로 많은 툴과 라이브러리를 포함하고 있고 대부분이 버전이 맞춰서 관리가 되므로 개발자가 크게 신경 쓸 필요가 없다.
- 코드 패턴이 동일해 개인간 차이에 따른 결과물의 차이가 적다. 자바스크립트 코드량이 감소한다.
- 객체지향(Object-oriented)프로그래밍을 해야 할 때
- Angular CLI를 통해 간편한 개발 환경 구축을 지원한다.
특징
리액트
- 자유도높음(자바스크립트로 구현,가벼움→But 코드파편화,추가적인 라이브러리들 선택/관리에 어려움)
- 단방향바인딩
React는 데이터에 변화가 오게 되면 특정 함수를 실행시킴으로써 DOM 객체를 갱신하는 단방향 데이터 바인딩을 채택했다.
양방향 데이터 바인딩에 비해 작성할 코드의 양이 많아지긴 하지만, 데이터 변화에 따른 성능 저하없이 DOM객체를 갱신해 줄 수 있다.
데이터 흐름이 부모 컴포넌트 → 하위 컴포넌트로 단순하기 때문에, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다는 장점이 있다!
👉 양방향 데이터 바인딩의 특징은 뭘까?양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링 해주거나, 페이지 내에서 모델의 변경을 감지하여 자바스크립트 실행부에서 변경한다.이 방식은 코드의 사용면에서 코드량을 크게 줄여주는 장점이 있지만, 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다.
앵귤러
- 자유도X(앵귤러 자체 기능,일정한 패턴 사용→ 러닝커브, 초기속도)
- 양방향바인딩
리액티브 프로그래밍
리액티브 프로그래밍은 말 그대로 '바로 응답하는 프로그래밍'을 말한다. 엄격하게 따지면 리액트는 리액티브 프로그래밍 패러다임에 완벽하게 부합하지는 않지만 '사용자의 요청에 바로 응답하는' 이 핵심 개념에는 부합한다.
리액트는 props를 사용해서 상태(데이터)의 변화를 전파시키는데 이러한 상태 전파 또는 전이는 사용자의 지속적인 요청에 바로 응답할 수 있게 만들어준다. 또 리액티브 프로그래밍의 특징 중 하나인 '유연성' 또한 가지고 있다. 데이터의 변화에 따라 지속적으로 랜더링될 때 일부 데이터가 없거나 비정상적인 데이터를 에러로 처리하지 않고 유연하게 처리한다. 리액트는 옵져버블, 스트림 같은 복잡한 개념 없이 상태를 자식 컴포넌트에 내려주고 상태를 변경에 따라 랜더링함으로서 자연스럽게 '바로 응답하는 프로그래밍'을 구현할 수 있게 해준다.
- 리액트는 리액티브 프로그래밍이라고 할 수는 없다. 응답성(responsive), 유연성(resilient), 신축성(elastic), 그리고 메시지 주도(message driven)을 모두 갖고 있어야 리액티브 프로그래밍이라고 할 수 있다. 리액트에 RxJS를 더해서 이용하면 완벽하게 리액티브 프로그래밍을 구현할 수 있다. 이렇게 하면 옵져버블을 이용해 데이터 스트림을 다룰 수 있다.
- 옵져버블 없는 리액티브 프로그래밍
Hook을 사용하면 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 class 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.
상태관리
React로 application 만들 때 필수적으로 상태를 관리하는 상황을 마주치는데 기본적으로 state에 기본 값을 지정하고 state를 props로 서로 넘겨주며 data를 공유한다
application의 규모가 복잡해지고 커질수록 상태 관리는 더욱 더 힘들어진다.
-
불필요한 렌더링 발생
1번-2번-3번-4번-5번의 depth로 되어있고 state가 렌더링의 영향을 주는 컴포넌트가 1번과 5번 뿐이라고 가정해보자.
2,3,4번 컴포넌트는 단지 1번의 state를 props로 넘겨주기만 하고 그들의 view에 영향을 주지 않음에도 1번의 state가 변경된다면props 가 변경되었다는 조건 때문에 불필요한 렌더링이 발생
-
data flow의 복잡성
그래서 상태 관리 라이브러리로 Redux를 많이 사용하는데 Redux는 MVC 프레임워크의 양방향 상태 전이의 문제점을 피할 수 있다. Controller, Model를 사용하는 대신 Flux 구조에 따라 Action -> Dispatcher -> Store의 단방향 데이터 흐름을 사용한다.
상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다.
