# useRef

186개의 포스트

[개발자되기: CDD] Day-37

조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 개발 진행CSS가 구조적으로 작성될 수 있게 도움주는 도구CSS 전처리기 중 가장 유명한, CSS를 확장해 주는 스크립팅 언어SCSS 코드를 읽어서 전처리한 다음 컴파일 해서 전역 CSS 번들 파일을 만들어 주는

3일 전
·
0개의 댓글

React hooks

리액트 훅이란 초기에 리액트는 클래스 컴포넌트 형태로 작동을 하게 되었고 클래스 컴포넌트에서 사용되는 함수들을 함수형 컴포넌트에서 사용을 할 수 있게 해주는 함수이다.\[] 의존성 배열(dependency array)에 따라 다르다.전부 실행되고서 실행이된다.리액트를

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

React Custom Component

컴포넌트 기반 개발에서의 CSS 적용 : Styled-components, storybook 작성법, useRef

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

useRef를 더 공부해보자 [변수관리]

원하지 않는 렌더링 때문에 state값이 초기화가 된다면, ref를 사용하여 값의 초기화를 막을 수 있다.useRef는 또한 DOM 요소에 접근해서 여러가지 일들을 할 수 있다. => focus()로 예를 들 수 있고, 마치 바닐라 자바스크립트의 Document.que

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

[TIL] 0617 | React with Redux, Next.js, TypeScript

✍🏻 0617 | React with Redux, Next.js, TypeScript ✓ 무엇이 폼을 복잡하게 하는가 ✓ 양식 제출 처리 및 사용자 입력 값 가져오기

2022년 6월 17일
·
0개의 댓글

TypeScript로 특정 DOM 요소 조작하기 - useRef()

위와 같은 에러가 발생했다. useRef 괄호 안에 null을 넣어서 해결했다.

2022년 6월 14일
·
0개의 댓글
post-thumbnail

[React] Hook 간편 설명서

useState, useEffect, useMemo, useCallback, useRef 간단 정리!

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

useRef()

React에서 useRef를 사용하는 경우는 다음과 같다\-예를 들면, 값을 여러개 입력하고 첫 번 째 칸으로 이동한다고 해보자,: Ref 객체를 만들어준다.: 선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.: Ref 객체의 current 값은 우리가 선택하고

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

20) useRef

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다..일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우이다.useRef는 리렌더링 하지

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

[20220607_useRef(): DOM요소에 접근]

useRef() 1. 예시

2022년 6월 7일
·
0개의 댓글
post-thumbnail

React | UseRef

리액트를 사용하기 전까지 우리는 특정 태그에 접근할 때 document.getElementById() 를 사용했다.하지만, 리액트는 실제 DOM이 아닌 virtual DOM(가상돔)을 다루기 때문에 document.getElementById()으로 접근했을 때 문제가

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

useRef : Object is Possibly null 오류와 관련해서

overview 이번에 진행하는 airbnb 클론 코딩미션을 관련해서 양방향 레인지 버튼을 구현했다. input 값을 range로 관리하고 이러한 인풋을 두개 만들어 겹치고, div 를 위에 올리고 재미있었다. 그런데 타입스크립트로 코드를 수정하는 중에 useRef를

2022년 6월 2일
·
0개의 댓글
post-thumbnail

[React] useRef

The useRef Hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue).uesRef

2022년 6월 1일
·
0개의 댓글
post-thumbnail

[20220601_useRef hook(1 - 변수관리)]

• 반환된 ref는 컴포넌트의 전생에주기를 통해 유지가 됨→ 컴포넌트가 계속해서 렌더링되어도, 컴포넌트가 unmount되기 전꺼지는 값을 그대로 유지 가능• ref는 state와 비슷하게 어떠한 값을 저장해두는 공간으로 사용• State의 변경하면 → 자동으로 컴포넌트

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

useRef와 useEffect

useRef , useEffect

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

useMemo, useRef, useCallback

useMemo > ### Memoization 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 다시 발생했을 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높여주는 최적화 기법이다. 일반적으로 React의 컴포넌트 함수는 렌더링이 일어날 때마다

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

useRef

useRef란? 우리가 리액트를 사용하기 전에는 DOM선택자 queryselector 등을 통해 아이디 값을 찾아 해당하는 태그에 자바스크립트를 이용했다. 하지만 리액트를 사용하면서 Dom선택자는 더이상 사용하지 않는다. 그렇다면 어떤 방식으로 태그를 선택해 자바스크립트 효과를 줄것인가? 여기서 useRef를 사용하면 ...

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

useRef

useRef() 함수가 왜 필요하고, 언제 사용하는지에 대해 알아보자. > 상태 변경 -> 컴포넌트 재렌더링 React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때마다 다시 렌더링이 된다. 예를 들어 아래 컴포넌트의 버튼을 5번 클릭하면 count 상태값은 5번 바뀌게 된다. import React, { useState } from...

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

useRef

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

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