이력서 넣다가 생각보다 Vue를 사용하는 회사가 생각 이상으로 많아서 화가나서 작성해보는 React와 Vue의 차이점 정리 간다.
사실 난 비교점 부터 처리해보고 각각 정리하는게 좋아서... 그런 의미로 ..!!
1. React와 Vue의 장단점 비교
https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88
2. 네이버/라인 ... 왜 Vue를 쓰는 거지??
https://codingapple.com/unit/why-use-vue-over-react/
React
1. 클래스형 컴포넌트와 함수형 컴포넌트의 차이
2. React Hook (v16.8)
기존의 라이프 사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점이 있습니다. 그리고 라이프 사이클 메서드는 관련 없는 로직이 섞여 들어가 버그가 쉽게 발생하고 무결성을 쉽게 해칠 수 있다는 단점이 있습니다. 이로 인해 현재는 함수형 컴포넌트의 리액트 훅의 사용을 추천하고 있는 경향이라고 알고 있습니다.
hook 사용 규칙 다음과 같습니다.
1. 최상위에서만 훅을 호출해야 한다.
2. 리액트 함수 컴포넌트에서만 훅을 호출해야 한다.
3. 커스텀 훅의 경우 반드시 앞에 use 라는 글자를 붙여야 합니다.
훅에는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState,렌더링 이후 작업을 설정할 수 있는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업들을 동작할 수 있게 해줍니다.
3. React Life Cycle
react의 컴포넌트는 주로 생성(mounting) => 업데이트 (updating) -> 제거 (unmouonting) 의 주기를 가집니다.
리액트의 클래스 컴포넌트는 " 라이프사이클 메서드 " 를 사용하고 함수형 컴포넌트는 " hook" 을 사용합니다. 함수형 컴포넌트의 훅은 React State와 ㅈ생명주기 기능을 연동할 수 있게 해주는 함수 입니다.
4. React 최적화 경험 ( useCallback, useMemo )
- Memoization : 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 이를 적절하게 활용하면 " 중복 연산 " 을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다.
# useCallback
함수를 최적화 하기 위해 사용하는 hook으로 특정 함수를 재정의(새로 만들지 않고) 하지 않고 " 재사용" 하기 위해 사용합니다. usecallback은 주로 1) 자식 컴포넌트에 props 로 함수를 전달할 경우, 2) 외부에서 값을 가져오는 api를 호출하는 경우 사용합니다. 따라서, 함수를 재사용해서 자식 컴포넌트의 리렌더링을 방지하거나, 특정 값이 변동 될 때만 함수가 실행되게 해서 무한 루프를 방지할 수 있습니다.
#useMemo
함수를 값처럼 사용해서 연산 최적화를 하기위해 사용합니다. 메모이제이션된 값을 반환하는 함수 입니다. useMemo를 사용해서 특정값이 변할 경우에만 연산을 실행되도록 특정 값에 의존하도록 등록하는 방식으로 작동합니다. 결과, 리렌더링이 발생할 경우, 특정 변수가 변할 때에만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게 됩니다.
5.
# 토큰 논의
배포에 초점을 맞춰서 localstorage 로 우선 기능 코드 짜고,
2차로 세션으로 수정하려는 계획을 세ㅐ웠다.
특정 작가의 작품을 검색하기보다는 어떤 작품들을 구여하기 위해 사이트를 이요하기 때문에 검색 엔진에 특화될 필욯가 없다.
SSR은 링크 연결 시 속도 느리다는 이유로 탭 별로 링크 연결시 빠론 UX 위해 ㅊCSR 사용. \\\\\
React 의 단점..
1. 프로젝트의 규모가 커지면 속도가 느려진다.
2. View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하기 때문에 JS에 대한 깊은 지식이 필요하다.
3. 데이터 모델링, 라이팅, Ajax 등 기능이 지원되지 않는다.
Vue
React와 비슷하면서도 다른 녀석입니다. SPA 방식으로 만들 수 있으며 Virtual DOM을 사용합니다. Vue는 자체적으로 제공하는 문법이 있는데 이 부분이 React에 비해 쉽기 때문에 많이들 러닝 커브가 낮다고 이야기 합니다.
Vue에서의 조건부 렌더링 ( v-if )
<Modal v-if = "isOpen" />
1. Vue 는 문법이 너어무 쉽다.
위에서 살짝 설명했지만 Vue 는 JS 문법에 기초하지 않기 때문에 별도의 Vue 문법이 존재합니다. 그런데 이게 굉장히 간단하고 쉽기 때문에 러닝 커브가 상대적으로 낮습니다.
v-if, v-else, v-for 과 같이 직관적인 문법임을 알 수 있습니다.
사실 React는 라이브러리 Vue 는 프레임워크라는 점도 한 몫 할 것입니다. 라이브러리 인 만큼 React는 굉장히 자유롭게 코드를 작성할 수 있습니다. 반면에 프레임워크인 Vue 는 정해진 규칙 안에서만 코드를 작성해야 하기 때문에 일종의 .. 사용 설명서가 주어졌다고 생각하면 쉽습니다.
2. Vue 는 양방향 데이터 바인딩
데이터 바인딩
화면상에 보여지는 데이터와 브라우저 메모리에 있는 데이터를 묶어서 서로 간의 데이터를 동기화 하는 것을 의미합니다.
React는 단방향 데이터 바인딩 방식으로 작동 합니다.
양방향 데이터 바인딩만 가능하다는 의미는 아니고 단방향도 가능하지만 양방향 데이터 바인딩도 가능하다는 의미입니다.
- JavaScript 는 Controller 를 통해 Model 을 변경 시킵니다.
- HTML 은 View를 담당합니다. ( 화면에 나타나는 부분)
이 JavaScrtip 와 HTML 사이에는 ViewModel 이 존재하는데 이 친구가 JavaScript 나 HTML 중 하나가 변경되면 양쪽의 데이터를 일치시키는 역할을 수행합니다.
프로젝트의 복잡도가 증가할 수록 양방향 바인딩의 장점이 나타난다고 합니다. React에 비해 코드량이 줄어드고 그 만큼 유지보수도 쉬워지기 때문입니다. 다만 변경된 데이터에 따라 DOM 객체 전체를 렌더링 할 수 있기 때문에 성능 저하를 주의해야 합니다.
Vue 는 데이터 또한 양방향 데이터 바인딩
React는 컴포넌트 외부에서도 단방향 데이터 바인딩만 가능하기 때문에 자식으로 props 를 내려줄 때 단방향으로 데이터를 전달 합니다.반면에 Vue는 데이터가 양방향으로 바인딩 되기 때문에 자식에서 부모로 부모에서 자식으로 데이터를 전달 할 수 있습니다.
* 부모 -> 자식 : props
* 자식 -> 부모 : Emit Event
Vue의 단점..
1. 테스트가 어렵고 재 구조화가 쉽지 않다.
2. 모바일 지원이 부족하다.
3. 생태계가 React에 비해 부족하다.
최종 정리 : React와 Vue의 차이점
참고 블로그 : React만 사용하다 Vue를 쓰게 되었다.
참고 블로그 : 카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림
참고 블로그 : https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88