Ref (3) 썸네일형 리스트형 [React] React와 Vue(Composition API)의 ref 차이점 1. 기본 개념 React: useRef와 useState를 별도로 사용 Vue: ref가 참조와 상태 관리를 모두 처리 2. 사용법 React import { useRef, useState, useEffect } from 'react'; function MyComponent() { const inputRef = useRef(null); const [count, setCount] = useState(0); useEffect(() => { inputRef.current?.focus(); }, []); return ( Count: {count} setCount(count + 1)}>Increme.. [vue 3] ref, reactive의 차이 Vue 2에서 많이 사용했던 기존 optional api의 data( ) 안에 정의했던 내용을 composition api 형태로 사용시 setup 안에서 정의해주는 형태로 변경되었다. // optional api export default { data() { return { count: 1 } }, } 이때 ref() 및 reactive()는 반응형 데이터 객체를 만드는 데 사용할 수 있는 두 가지 함수이다. 1. ref( ) ref()는 값에 대한 반응형 참조를 만드는 데 사용된다. primitive type , reference type 둘 다 사용 가능함. value 프로퍼티는 참조 값을 가져오거나 설정하는 데 사용할 수 있다. ( 쉽게 이야기 해서 ref 로 정해진 변수의 값에 접근할 때는 변수.. [Vue 3] ref()란? Vue 3에서 ref()는 값을 보유할 수 있는 반응형 객체를 생성하는 함수입니다. 일반적으로 숫자나 문자열과 같은 간단한 데이터 유형을 저장하고 업데이트하는 데 사용됩니다. ref( ) 쓰지 않고 기본 자료형 0 을 사용하면 버튼을 눌러도 값이 증가하지 않는 0만 있을 뿐이다. (비슷한 걸로는 reactive() 가 있으나 ref() 와는 달리 collection 계열만 사용이 가능하다. 그 밖의 내용은 공식 Documents 를 참고하기 바란다) Counter: {{ counter.value }} Increment 이 예제에서는 ref(0)을 사용해 반응형 변수 카운터를 생성합니다. 이렇게 하면 카운터가 0 값으로 초기화됩니다. 그런 다음 카운터 값을 단순히 증가시키는 증가 함수를 정의합니다. 템플릿.. 이전 1 다음
