# refs

dev_seongjoo

refs를 사용하는 경우는 언제인가요? refs는 React 컴포넌트에서 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있게 해주는 기능입니다. refs는 주로 다음과 같은 경우에 사용됩니다: 1. DOM 요소에 접근: refs를 사용하여 DOM 요소에 직접 접근할 수 있습니다. 예를 들어, 특정 DOM 요소의 값을 읽거나 변경해야 할 때 refs를 사용할 수 있습니다. 2. 포커스 제어: 특정 입력 필드나 버튼 등에 포커스를 설정하거나 제거해야 할 때 refs를 사용할 수 있습니다. 3. 외부 라이브러리와의 통합: 외부 라이브러리가 DOM 요소나 컴포넌트 인스턴스를 요구할 때, refs를 사용하여 해당 요소나 인스턴스를 전달할 수 있습니다. 4. 애니메이션 및 측정: DOM 요소의 위치나 크기를 측정하거나, 애니메이션을 직접 제어해야 할 때 refs를 사용할 수 있습니다. refs는 클래스형 컴포넌트

kec0130

회사 서비스에서 환자의 재활 운동 리포트를 문서 뷰어처럼 볼 수 있는 컴포넌트를 개발하게 되었다. 전체 페이지와 현재 페이지 번호를 보여주고, 전후 페이지로 이동할 수 있는 버튼이 있는 형태였다. Intersection Observer API를 활용하여 해당 기능을 구현한 방법을 정리해보았다. > 예시 코드 전체 보기: https://codesandbox.io/s/page-navigation-with-intersection-observer-pbz9cs 현재 페이지 번호 추적하기: Intersection Observer 문서 뷰어에서 가장 핵심적인 기능 중 하나는 현재 화면에 보이는 페이지가 몇 번째 페이지인지 트래킹하는 것이다. 페이지를 이동할 때마다 현재 화면에 나오는 페이지의 번호를 알아야 한다. 이렇게 화면에서 특정 요소의 가시성

puredev

vue component 안에서 vue-bootstrap을 이용해 모달창을 띄우고 닫는 기능을 만드는 데 ref를 사용한 것에 대해서 정리. 버튼을 누르면 모달창이 출력되고 그 안의 버튼을 누르면 특정 기능을 수행하고 모달창이 자동으로 닫아지는 기능. vue-bootstrap의 b-modal을 이용하여 모달창을 만든다. 이 모달태그 속성에 ref 값을 줘서 모달창을 제어한다. ref 속성은 바닐라 자바스크립트의 querySelector와 같은 개념이다. 다만, virtualDOM을 사용하는 vue 환경에서는 ref를 이용해 DOM을 직접 제어하는 방법은 좋은 방법이 아니라고 한다. 그리고 ref는 mounted 이후에 접근이 가능한 요소라는 것도 알아두어야 한다. 이렇게 설계를 했는데 bvModal 자체에 hide 기능이 있어서 생각해보니 이렇게 해도 되었던 것 같다. 기존에 짜여진 코드가 이런식으로 되어 있어서 따라 만들었는데 bModal 문서를 보니 `this.$bvMo

k2hyun4

vue3의 setup에서 $refs를 활용해보자 vue2 vue3 template쪽은 vue2와 동일 ref()를 이용해 template의 ref명과 동일한 변수를 선언 mount 이후 할당됨 꼭! return해줘야 함

lsh__97

Fragments, Portals JSX 제한 사항 및 해결 방법 JSX는 기본적으로 여러 요소들을 같이 사용할 경우 이들을 감싸주는 요소가 필요합니다. 이때 "div" 태그를 사용해서 wrapping 해주면 다음과 같은 문제점이 발생 합니다. 실제 DOM으로 렌더릴 될때 리액트 컴포넌트가 많이 중첩될 수 있다. 페이지에 어떤 의미나 구조적인 의미를 가지지 않지만 스타일을 망칠 수도 있다. 너무 많은 HTML요소를 렌더링 하기 때문에 애플리케이션이 느려질 수도 있다. 그래서 이를 위한 해결 방법으로는 다음과 같은 방법들이 있습니다. 빈 태그 사용하기 장점으로는 짧고 간편합니다, 그리고 실제 HTML요소를 DOM에 렌더링하지 않는다. 하지만 프로젝트 설정에 따라 다르기 때문에 빌드 워크플로가 이를 지원 해야 사용할 수 있다. Fragment 사용 이것도 마찬가지로 실제 HTML요소를 DOM에 렌더

doodream

ref를 하위 컴포넌트로? 보통 ref를 통해서 DOM요소들에 접근하고 제어하지만 컴포넌트가 크다보면 컴포넌트를 나눠야 할 경우가 생깁니다. 이때 상위 컴포넌트에서 하위 컴포넌트의 DOM요소를 제어하고 싶은데 ref를 props로 넘기면 에러가 발생하게 됩니다. 상위 컴포넌트로 ref를 넘기는 것도 할 수 없는 일입니다. 이때 하위 컴포넌트로 ref 를 넘기기 위해

uvula6921

$refs를 이용해 자식 컴포넌트에 접근하여 데이터를 변경할 수 있다.

uvula6921

ref를 이용해 해당 태그 혹은 컴포넌트에 직접 접근할 수 있음. this.$refs로 ref 걸어둔 태그들 혹은 컴포넌트들에 접근할 수 있음. this.$refs.child_component.$refs.btn.click(); 이벤트 호출 용법. this.$refs.child_component.childFunc(); 함수 실행 용법

realryankim

참고 https://www.udemy.com/course/react-redux/learn/lecture/20787850#questions https://reactjs.org/docs/refs-and-the-dom.html Ref와 DOM Ref는 DOM 노드나 render 메서드로 생성된 React element에 접근하는 방법을 제공한다. Ref를 사용해야 할 때 Ref의 바람직한 사용 사례는 다음과 같다. focus, text selection, 또는 media playback을 관리할 때 애니메이션을 직접적으로 실행시킬 때 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 Ref를 남용하면 안된다. Ref를 사용해서 todo 리스트 더해보기 Class Component https://codesandbox.io/s/simpletodolistclass-bfqdi?file=/src/app.jsx

hanei100

컴포넌트 - Refs 컴포넌트의 템플릿, refs 키워드에 대해 살펴보도록 합시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다. 1. Refs 1.1 개념 비록 props와 이벤트가 존재하지만, 가끔은 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다. 원래의 경우라면 위와 같이 DOM API를 사용하게 됩니다. 하지만 참조하겠다는 의미의ref라는 속성을 사용하면 해당 기능을 간단하게 사용할 수 있습니다. 1.2 Refs 사용 예시 > App.vue 위의 예시처럼 Vue에서 제공하는 ref라는 속성을 통해 해당 요소를 참조할 수 있습니다. 그리고 그

7070248

노란색 동그라미 부분이 내용에 따라 높이가 변화한다 그렇기 때문에 노란색 동그라미 부분이 변함에 따라 빨간 박스도 높이값이 변화 알고 싶은 것: 보라색 상자 높이 값! 빨간색 상자 높이 값을 구한 다음, 파란 부분 차이를 더해서 보라색 박스 높이 값을 구하려 한다 이를 위해서 빨간색 박스의 높이 값을 받아와야 한다 vue 에서 DOM 에 접근하기 위해서는 $refs 를 사용할 수 있다 와 같은 구조라고 가정 보라색 박스 높이 구하기 () template 부분에 binding 해주기

404_jjuya

Refs git의 커밋은 key-value 형식으로 이루어져 있는데, key 값은 SHA-1으로 만들어진 해쉬값이다. 이를 사람들이 기억하기 어렵기 때문에 외우기 쉬운 이름의 파일에 저장되어 있는데, 이를 저장해 놓은 파일을 References 혹은 Refs라고 한다. > 모든 refs는 .git/refs에 저장된다. 브랜치 git의 브랜치는 어떤 작업 중 마지막 작업을 가르키는 포인터 또는 Refs이다. 브랜치는 직접 가리키는 저밋과 그 커밋으로 따라갈 수 있는 모든 커밋을 포함한다. > git의 git branch 를 실행하면 내부적으로 update-ref명령을 실행하고, 입력받은 브랜치 이름과 현 브랜치의 마지막 커밋의 SHA-1 값을 가져다 update-ref명령을 실행 HEAD HEAD 파일은 현 브랜치를 가리키는 간접 Refs다. 이 Refs는 다른 Refs를 가리키는 것이라서 SHA-1 값이 없