- 4월 19일(화)
- React와 Vue, Angular의 차이점은 무엇인가요?
- React에서 JSX 문법이 어떻게 사용되나요?
- React의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
- Redux가 무엇인지 설명하시고, 왜 사용하셨나요?
- 리덕스의 장단점에 대해 설명해보세요
- 생명주기 메서드(LifeCycle)에 대해 설명해보세요
리액트 뷰 앵귤러 차이점
vue와 React의 차이?
공통점 : 컴포넌트 기반이다. Virtual DOM 방식이다. 가볍고 빠르다.
vue는 단일 파일 컴포넌트이다. html, css, javascript코드가 하나의 파일에 모두 정의하는 방식이 기본이지만, 컴포넌트화 해서 사용할 수 있음!!
vue는 HTML 기반 템플릿 구문을 가진다. -> 배우기 쉬움
문법 제한으로 인한 통일성
뷰는 뷰에서 제공해주는 문법으로만 코딩이 가능하기 때문에 개발자간에 코딩 스타일에도 통일성이 생긴다. 이에 반해 리액트는 자유도가 높아서 개발자마다 코딩 스타일을 통일하는데에 커뮤니케이션 비용이 든다.
뷰는 자바스크립트의 문법을 정확히 몰라도 뷰에서 제공해주는 문법만 배우면 잘 동작하는 것을 확인할 수 있어서 생산성이 빠른 편이고, template style script 의 싱글 파일 컴포넌트 구조로 개발하는 방식이 기존의 html css js 로 나눠서 개발하던 방식과 유사하기 때문에 js 나 제이쿼리로 개발하던 개발자, 개발을 배워보려는 퍼블리셔, 서버에서 서버사이드 랜더링을 해봤던 서버개발자 들에게 익숙하게 다가올 수 있다.
반면 리액트는 모든것이 다 자바스크립트이다. jsx라고 불리는 html 역할을 하는 코드도 js의 확장된 문법이며 js 안에서 쓰는것이고, css도 css 파일을 분리해서 따로 만드는 방식 말고 한 파일안에서 사용하려면 css-in-js 결국은 자바스크립트로 써야한다.
러닝 커브
러닝 커브는 뷰가 리액트에 비해 많이 낮은 편이다.
속도
아주 미세한 차이라 유의미하게 느낄정도 까지는 아니지만 뷰가 조금 더 빠르다고 한다. 그래서 속도이슈에 민감한 코인거래 사이트에서도 vue를 가끔 사용한다고 한다.
타입스크립트 지원
타입스크립트는 리액트가 더 결합이 잘된다. 개인적으로는 뷰에서 타입스크립트를 써본적은 없어서 잘 모르지만, 2.x버전에서는 타입스크립트 지원이 완벽하지 않다고 한다.
트렌드
리액트는 변화가 빠르고 혁신적이다. 프론트엔드의 변화를 선두하고있다고 볼 수 있다. 사용 유저도 많고 자체적으로 지원해주는 기능이 제한적인만큼 프로그래밍 상의 자유도가 높게 보장되기 때문에 트렌드는 리액트가 더 잘 따라간다.
- Angular와 React의 차이점은? *
리액트
사용중인 기업: 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객체를 갱신해 줄 수 있다.
데이터 흐름이 부모 컴포넌트 → 하위 컴포넌트로 단순하기 때문에, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다는 장점이 있다!
앵귤러
자유도X(앵귤러 자체 기능,일정한 패턴 사용→ 러닝커브, 초기속도)
양방향 바인딩
👉 양방향 데이터 바인딩의 특징은 뭘까?양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링 해주거나, 페이지 내에서 모델의 변경을 감지하여 자바스크립트 실행부에서 변경한다.이 방식은 코드의 사용면에서 코드량을 크게 줄여주는 장점이 있지만, 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다.
