# useRef

160개의 포스트
post-thumbnail

[React][Javascript] | 특정 Element로 웹페이지 자동 스크롤 기능 구현

어떤 버튼이나 링크를 클릭한 경우, 동일 페이지 내에서 또는 다른 페이지의 특정 요소로 스크롤이 되는 기능을 구현한다.나의 경우 다음과 같은 방식으로 기능을 구현했다boolean 값을 갖는 state 생성버튼 클릭 시, state 값 변경 및 특정 페이지로 Naviga

약 19시간 전
·
0개의 댓글
post-thumbnail

[스터디-우아한반상회] useRef

이번주는 React에 내장 된 Hook API 중, useRef에 대해서 공부해봤다. useRef를 다루기 전에, Hook에 대해서 한번 정리하고, useRef에 대해서 살펴보자. Hook은 React 16.8 버전부터 React에 새로 추가 된 요소이다. Hook을

어제
·
0개의 댓글

Instagram Clone - react(2)

input 관리와 useState / 삼항연산자 / Key와 useRef 활용하기

3일 전
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 - 4

1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을

4일 전
·
0개의 댓글

[TIL] input value clear 😂

리셋.. 하고.. 싶다...

6일 전
·
0개의 댓글
post-thumbnail

useRef 사용 방법

useRef()는 인자로 받은 값으로 초기화된 변경 가능한 ref 객체를 반환합니다. 이 객체는 컴포넌트의 전 생애주기동안 유지되며, ref.current와 같이 current 속성에 접근하여 현재 가리키는 객체에 접근할 수 있습니다.select Tag에 useRef를

2022년 5월 10일
·
0개의 댓글
post-thumbnail

220508 TIL

✔️ 리액트 복습!유튜브 별코딩님의 강의를 보고 따라만든 나의 리액트 프로젝트우리가 자바스크립트에서는 DOM에다가 접근할려면...document.querySelector('input') <- 이러한 형태로 만들어야했다.하지만, 리액트는 간편하게 Hook 중 하나인

2022년 5월 8일
·
0개의 댓글
post-thumbnail

React Hook

React Hook에 대해 정리했다.

2022년 5월 1일
·
0개의 댓글

React 개발중 component 에 ref 전달하기 (forwardRef)

forwardedRef에 대해서 알아보겠습니다.

2022년 4월 30일
·
0개의 댓글
post-thumbnail

<리액트 훅스 시리즈 1탄 useRef!>

최근에는 함수형 컴포넌트가 주류를 이루면서 리액트에서도 그에 맞춰 다양한 훅스들이 생겨났다. 그래서 필자 역시 리액트를 사용하면서 보통 많이 쓰이는 유즈스테이트나 유즈 이펙트외에도 추가적인 훅스들을 더 살펴볼 필요성을 느껴 한 번 공부한 것을 토대로 기술해 보고자 한다

2022년 4월 29일
·
0개의 댓글

React_05) useRef

useRef란?

2022년 4월 27일
·
0개의 댓글

useRef, forwardRef

2개 차이 각각 정의 사용례 forwardRef 부모 컴포넌트에서 자식 컴포넌트로 직접 접근하기위해 사용. ref를 사용해야할 때 포커스, 텍스트 선택영역, 미디어의 재생을 관리할때 애니메이션을 직접 실행시킬때 서드 파티 dom라이브러리를 react와 같이 사용할

2022년 4월 26일
·
0개의 댓글
post-thumbnail

useRef

useRef를 부르면 ref 오브젝트를 반환해준다ref오브젝트는 current 키와 처음 초기값은 value로 지정된다.사용온도1\. 저장공간컴포넌트가 unMount 되기전까지 값을 유지한다 . 즉 useRef는 컴포넌트의 전생애 유지된다.useRef는 State와 마

2022년 4월 13일
·
0개의 댓글

useRef

자바스크립트에서 태그에 접근할 때getElementById(), getElementsByClassName 등을 이용한다.이와 다르게 React에서는 Ref를 이용한다.그리고 Ref는 클래스 컴포넌트와 함수 컴포넌트에서 이용 방법이 서로 다르다.클래스 컴포넌트에서는 cr

2022년 4월 9일
·
0개의 댓글
post-thumbnail

useState vs useRef (React)

아래에 App.js의 코드가 있다.아래 코드는 화면에 State의 값과 Ref값을 표시하고 각 값을 업데이트하는 버튼이 있다.App.js현재 상태현재의 state 값과 ref 값이 화면에 표시된다. State 올리기 버튼을 클릭State 올리기 버튼을 클릭하면 sta

2022년 4월 9일
·
0개의 댓글

useRef

리액트를 사용하기 전까지 우리는 특정 태그에 접근할 때 document.getElementById() 를 사용했었다. 리액트를 배우기 전까지는 번거로운지 절대 몰랐다.하지만, 리액트는 실제 DOM이 아닌 virtual DOM(가상돔)을 다루기 때문에 위의 방법으로 접근

2022년 4월 9일
·
0개의 댓글

useRef

const refContainer = useRef(initialValue);useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 Lifecycle를 통해 유지된다.일반

2022년 4월 9일
·
0개의 댓글
post-thumbnail

useRef

useRef는 React에서 함수형 컴포넌트로 사용하고 useRef 훅을 이용하여 특정 태그에 접근한다.useRef의 특징은 불필요한 리랜더링을 하지 않는다는 점과, 각 컴포넌트의 정해진 속성만 조회 및 수정이 가능하다는 것이다.우선 useRef 훅을 import 시켜

2022년 4월 9일
·
0개의 댓글
post-thumbnail

useRef

리액트를 사용하기 전까지 우리는 특정 태그에 접근할 때 document.getElementById()를 사용했었다.하지만 리액트는 실제 돔이 아닌 virtual DOM을 다루기 때문에 위의 방법으로 접근했을 때 문제가 생길 수 있으므로 Ref를 이용해 태그르 직접 변수

2022년 4월 8일
·
0개의 댓글