# useRef

238개의 포스트
post-thumbnail

[2019-10-10][react] React에서 Ref 사용하기

React 16.7에서 ref를 사용하는 방법을 적었다. 일반 ref나 callback ref 등 다양한 방법을 useRef Hook에서도 사용할 수 있다.

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

useRef의 정체를 파헤쳐보자

특정 DOM 요소에 접근할 때 씁니다

어제
·
0개의 댓글
·
post-thumbnail

[React] useRef

React로 ref 객체를 전달하여 React는 노드가 변경될 때마다 변경된 DOM 노드에 .current 프로퍼티를 설정하게 된다. input component에 focus 를 위치시킬 필요가 있는 경우속성 값을 초기화 할 필요가 있는 경우useRef로 컴포넌트 안의

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

[React] ref: DOM에 이름 달기

컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용한다.(우선, ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려한 후에 활용)

6일 전
·
0개의 댓글
·

React Hooks

React Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을

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

[React] div 스크롤 맨 밑으로 내리기 / 스크롤 위치 조작하기

채팅창 UI를 만들어야하는데 리액트에서 어떻게 스크롤 위치를 조작할까? 리액트에서 DOM을 조작하여 스크롤을 맨 아래로 옮겨보자!

2022년 11월 18일
·
0개의 댓글
·

🪝useRef()

useRef를 사용하는 경우 DOM 엘리먼트의 주소값을 활용해야 하는 경우 focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 이러한 예외적인 상황에서 useRef로 DOM 노드

2022년 11월 16일
·
0개의 댓글
·
post-thumbnail

[React] ref

개발을 하면서 무수히 많은 폼 요소들을 마주한다. 이 요소들 중 원하는 input요소에 focus를 하기 위해 DOM요소를 어떻게 제어해야될 지에 대해 고민하게 된다. ref라는 프로퍼티를 익히고 이를 해결해보자.ref는 render 메서드나 return값으로 생성된

2022년 11월 12일
·
0개의 댓글
·

[React] 리액트 Ref로 Dom 다루기 (useRef)

Input Element가 있고 화면이 뜨자마자 focus를 주고 싶다면 ? ?.focus()

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

[개발 기록] Toast UI Editor in React

오늘은 toast UI Editor 라이브러리 사용법과 적용기에 대해 포스팅해 보려 합니다.

2022년 11월 10일
·
0개의 댓글
·

[React] useRef

오늘은 React의 hook 중 하나인 useRef에 대한 내용을 포스팅해보겠습니다!

2022년 11월 10일
·
0개의 댓글
·

React - input, useRef

input에 글을 입력하면 문자로 출력하기 + 초기화 시키기 App.jsx Input.jsx onChange 폼 필드가 변경될 때 이벤트가 발생. 2개의 input 이용하기 useRef > react에서 제공하는 hook 중 하나. .current 프로퍼티로

2022년 11월 2일
·
0개의 댓글
·

Unit3 회고

[React]Custom Component 🔆 Component Driven Development > #### CDD🧐 CDD란 컴포넌트를 중심으로 개발 프로세스를 고정하는 개발 방법론이라고 하는데 이게 무슨 뜻일까? 쉽게 말하자면 컴포넌트 단위에서 시작해 컴포넌

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

React - useRef()

위의 코드를 브라우저에 띄워보면이렇게 나온다.저기서 버튼을 클릭하면 count 상태의 값은 1씩증가 될것이다.하지만 num의 값도 1씩 추가될까??아니다! state의 값은 변경될때마다 렌더링되며 리렌더링이 될때마다 함수가 다시 불려와지는거기 때문에 함수내부의 변수의

2022년 10월 28일
·
0개의 댓글
·

TIL - Styled Components, useRef

Styled Components Styled Components를 한마디로 정의하자면 리액트를 이용해 CSS도 자바스크립트 코드에서 다룰 수 있는 것 이다. Styled Components 사용 방법 1. 먼저 터미널에서 설치한다 2. 사용할 파일에 import

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

[pre-project] stack overflow clone 팝업 모달창 외부 영역 클릭 관련 이슈

메뉴 버튼 클릭시 하단에 작은 메뉴 목록이 나오는 모달창 구현모달창 외부 클릭시 모달창이 닫히도록 구현useRef모달창을 on/off 하는 토글 버튼이 모달창을 없애는 외부 영역에 위치하다보니버튼 클릭시 모달창이 꺼지지 않고 다시 창이 뜨는 에러 현상 발생useRef를

2022년 10월 26일
·
0개의 댓글
·

[React]useRef

useRef는 변경된 값을 저장한다는 점에서 useState와 비슷하다.useState는 변경될 때 마다 페이지를 렌더링하며 값을 최신화하지만, useRef는 동작을 해도 값을 변경시키기만 할 뿐, 페이지를 렌더링하지않는다.다음과 같이 선언한다. 선언된 refConta

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

useState vs useRef 란?

🥸 useState / useRef 는 무엇일까? ☝️ useState 란? useState 는 리렌더링이 될 때 새로운 함수를 만들어주며, 각각의 함수는 고유의 state와 props를 기억하고 있습니다. 그래서 상태 유지 값과 그 값을 갱신하는 함수를 반환하

2022년 10월 20일
·
0개의 댓글
·

[React] Ref

네이버 블로그에서 이전, 원글 작성일시 : 2021.07.15.23:13제로초 님은 늘 컴포넌트를 class, hooks 두 가지 방식으로 각각 만들어 설명해주신다.ref를 이용하여 dom에 접근해야할 경우, 두 가지 방식의 사용법이 다르기 때문에 점점 헷갈리기 시작해

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

useRef와 커스텀 훅을 활용하여 모달창 외부 클릭 시, 모달창 닫기 기능 구현

useRef 사용방법 >>useRef()를 이용해서 Ref객체를 만들어준 후, 이 객체를 특정 DOM에 Ref값으로 설정합니다. 이렇게 되면 Ref 객체의 current값이 특정 DOM을 가르키게 됩니다. >DOM을 직접 선택해야 하는 경우들 >>- 엘리먼트 크기를

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