반응형 Framework43 vue3 ref와 reactive 사용법과 차이점 Options API는 data, methods, mounted 와 같은 옵션을 사용. (vue3 이전 버전)Composition API는 반응형 코드를 작성하는 단일 setup 함수가 있음. (vue3)composition api는 vue 컴포넌트를 작성할 수 있는 api세트이다. 그 중 ref와 reactive는 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 생성할 수 있다. ref는 premity type(string, number, object) 어떠한 타입도 사용할 수 있고,reactive는 object, array, map, set과 같은 타입에서만 사용할 수 있다. 객체를 선언할때 둘 다 사용할 수 있는데, ref를 사용하면 객체를 한꺼번에 객체 할당할 수 있다.반대로 reactive.. 2024. 8. 5. vue router 이동 // 리터럴 문자열 경로router.push('/users/eduardo')// 경로가 있는 개체router.push({ path: '/users/eduardo' })// 이름을 가지는 라우트router.push({ name: 'user', params: { username: 'eduardo' } })// 쿼리와 함께 사용, 결과적으로 /register?plan=private가 됩니다.router.push({ path: '/register', query: { plan: 'private' } })// 해시와 함께 사용, 결과적으로 /about#team가 됩니다.router.push({ path: '/about', hash: '#team' }) 2024. 8. 3. React.memo, useCallback, useMemo 이용한 최적화 [React.memo] : 렌더링 최적화 하나의 view 페이지에서 컴포넌트를 각 분리해서 사용할 때는 재사용성을 위해서도 이지만 각 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 예를들어 state값을 사용하는 하나의 자식 컴포넌트와 state를 가지고 있는 부모 컴포넌트만 렌더링이 되어야 하는데 react의 주된 특징(?)중 하나라고 볼 수 있는, 부모 컴포넌트에서 import된 (렌더링 하지 않아도 되는) 모든 컴포넌트까지 같이 렌더링이 된다. 불 필요한 컴포넌트까지 렌더링이 지속되면 성능 저하의 주요인이 되기 때문에 이를 위해 react.memo를 적용하므로써 문제를 해결 할 수 있다. React.memo의 적용방법: 원하는 컴포넌트(예제에서는 satate에 주 사용되는 컴포넌트) 에 React.. 2023. 7. 24. Actions (vuex) mutation(state를 관리, 변화 시키는 역할)은 모든 기능이 동기로 동작한다. 하나의 데이터에 여러개의 컴포넌트가 접근하려고 할 때 효율적으로 관리하기 위함인데 비동기 로직들이 포함되면 그 순서를 정확하게 알기 어렵다. 그래서 비동기 로직은 Actions를 이용한다. ex) actions의 예제 회원가입시 서버와 통신을 할때 회원가입의 중복검사, 등등의 함수를 실행한 후 state에 추가해달라는 값을 마지막에 commit한다. mutations을 통해 state를 변화시키고, 해당 mutation을 동작시키는 비지니스 로직으로 Actions를 사용한다. mutations을 commit해서(발생시킴) state의 값을 변경했다면 컴포넌트에서 Actions를 실행시키는 것은 Dispatch를 이용한.. 2023. 1. 17. 이전 1 2 3 4 ··· 11 다음 728x90 반응형
