1. jQuery에서 React로 왜 건너갔을까? 2. SPA 장점 3. 틈새 Angular 설명 4. React의 등장
1. jQuery에서 React로 왜 건너갔을까?
페이지 전환 없이 앱 같은 느낌을 원하기 시작했습니다. (AJAX, ex. email)
한 페이지에서 다 하는 SPA(Single Page Application) 방식이 유행하기 시작했습니다.
예전에는 MPA(Multi Page Applicatioon) 였습니다.
2. SPA 장점
SPA는 한 페이지에서 내부 컨텐츠만 갈아끼는 식으로 동작하기 때문에 새로고침하거나 브라우저를 닫지 않는 이상 컨텐츠 데이터가 유지가 됩니다.
MPA였을 때는 페이지를 이동할 때마다 데이터가 날아가 버려 백엔드 서버에서 데이터를 다시 받아와야 했지만, SPA 이 되면서 한 번 데이터를 받아오면 데이터를 유지할 수 있게 되었습니다. ➡︎ (데이터를 많이 다루기 시작하면서) 프런트의 비중이 점점 높아지기 시작했습니다. ➡︎ 프런트엔드에도 데이터에 대한 아키텍처가 생기기 시작합니다.
MVC(백엔드에서 쓰던 아키텍처) 등을 도입하려고 했으나 대규모 개발에 적합하지 않았습니다. ➡︎ 대안이 필요해 보입니다. (React가 등장의 배경이 됩니다.)
3. 틈새 Angular 설명
2 way data binding(부모가 ➡︎ 자식의 데이터를 바꿀 수 도 있고, 자식이 ➡︎ 부모의 데이터를 바꿀 수 도 있음) 방식 사용합니다.
Gmail(AJAX) 서비스는 Angular를 이용해서 SPA 도입한 사례입니다.
SPA으로 MVC 구현했습니다.
앱 같은 느낌은 성공했으나 MVC라서 대규모 서비에서 맞지 않다는 동일한 문제 생겼습니다. (백엔드의 구조가 프런트에는 맞지 않았던 것 같습니다.)
4. React의 등장
React는 FLUX 패턴을 사용합니다.
FLUX 패턴
1 way data binding 방식으로 데이터가 한 방향으로(ex. 반시계 방향)만 흐릅니다.
FLUX 패턴의 장점
데이터의 변경을 추적하기 쉽습니다.
React는 1 way data binding을 사용함으로써 에러가 발생하게 되면 부모 단을 살펴보는 식으로 에러를 찾아나가면 되기 때문에 대규모 서비스의 에러 상황에 대응하는데 적합니다.
