# useRef

56개의 포스트
post-thumbnail

<07.28> TIL

useEffect ![](https://images.velog.io/images/tjsals0406/post/915212f9-367e-4583-bf8f-da84b541c547/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-07-...

2021년 7월 29일
·
0개의 댓글

Effect Hook (feat. lifecycle in React)

클래스 컴포넌트의 생명주기와 함수 컴포넌트의 이펙트 훅을 통해서 작동 순서를 비교

2021년 7월 28일
·
0개의 댓글
post-thumbnail

React react-h5-audio-player 랜더링 시 자동재생 문제 해결

요번에 프로젝트를 진행하면서 음악을 변경하면 바로 자동 재생이 되는 문제가 생겼다.대략 위와 같은 플레이어 인데 react-h5-audio-player를 사용했다.첫번 째 도전 플레이어에서 autoPlay를 props로 제공하니 이걸 이용하자! 영락 없이 실패열심

2021년 7월 27일
·
0개의 댓글

[TIL] React 재학습하며 배운 기법들

useState는 한 컴포넌트에서 한번만 선언하고, 필요한 보든 state를 해당 useState안에 때려넣어 사용하는 방법이 있다.조건부 렌더링3항 연산자보다 단축평가 논리 계산법을 활용하면 좀 더 깔끔하다{isSpecial && &lt;b>\*&lt;/b>}prop

2021년 7월 27일
·
0개의 댓글
post-thumbnail

캠프 4주 1일차

useEffect

2021년 7월 26일
·
0개의 댓글
post-thumbnail

2021.07.26

완주하지 못한 선수for 안에 if 안에 includes 안에 splice를 활용했다간 N^4 빅오의 쓴맛을 경험해 볼 수 있으니 주의!배열에 사용해주는 메서드로서 하나의 문자열이 다른 문자열에 포함되어있는지를 판별하고 결과를 true 혹은 false로 반환해준다.베열

2021년 7월 26일
·
0개의 댓글
post-thumbnail

DOM API를 활용하여 Y축 좌표 따오는 방법

혼자서 진행하는 프로젝트를 진행하면서 중첩된 Navbar를 작성해주는 중 어떻게 작성해야할지 막막하여 구글링과 다양한 시도를 하게되었다. 우선 처음 Navbar는 최상단에 위치하여야 하며, 두번째 Navbar는 css의 속성 position 의 옵션중 하나인 fixed

2021년 7월 24일
·
0개의 댓글
post-thumbnail

[TIL #13] React (Hooks) - useRef 란?

앞에서부터 계속 다루고 있는 Hook API.. 강의를 들으면서, 혼자 토이 프로젝트를 진행하면서 그때그때 마주치게 되는 개념들을 하나씩 쓰다보니 Hooks 관련 포스트만 5개로 나눠져버렸다..모아서 좀 쓰시지 그러셨어요 하핫😘...아무튼 오늘은 간단하지만 가끔 헷갈

2021년 7월 22일
·
0개의 댓글

리액트 입문(1장) 복습 및 정리

1. 리액트란? 리액트란 페이스북에서 만든 사용자 UI 구축을 위한 라이브러리입니다. 리액트는 처음엔 페이스북 핵심 기능인 뉴스피드 개발 목적으로 만들어졌고 나중에는 인스타그램에서도 리액트를 사용하게 되었습니다. 2013년도에는 페이스북 직원이 아니여도 쓸 수 있도

2021년 7월 19일
·
0개의 댓글
post-thumbnail

[React] useRef 알아보기

useRef? 🤨 useEffect, useState 만 사용하다 useRef 같이 우리를 헷갈리게 만드는 훅이 있습니다. JS를 사용하면 getElementById, querySelector 등 DOM Selector 함수들을 이용하여 DOM에 접근할 수 있습니

2021년 7월 18일
·
0개의 댓글
post-thumbnail

React Hooks로 Carousel 만들기

React의 useState, useEffect, useRef을 이용하여 캐러셀 슬라이더를 만들어 보겠습니다. create-react-app을 통해 리액트 프로젝트를 만들어 줍니다. 스타일링은 styled-components를 사용하겠습니다.

2021년 7월 17일
·
0개의 댓글
post-thumbnail

TIL - 55

React 에서 DOM 을 접근할 수 있다? (O/X)접근 할 수 있다. useRef()를 사용하자!

2021년 7월 4일
·
0개의 댓글

(React) useRef

useref 함수useRef 로 특정 DOM 선택하기JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.리액트를 사

2021년 6월 27일
·
0개의 댓글
post-thumbnail

useRef로 초기 렌더링 때 DOM 요소에 접근하는 법

스크롤 작업때문에 useRef로 DOM 엘리먼트들에 접근 후 offsetTop 값을 따로 구하고 싶었는데,초기 렌더링 시에는 useRef 객체를 선언할 때 사용했던 초기값으로 세팅되어스크롤 이동이 안되는 문제가 있었다.문제는 다른 방법으로 해결했지만, useRef로 선

2021년 6월 24일
·
0개의 댓글
post-thumbnail

useRef로 여러개의 DOM제어하기

저 회색 점들이 선택되는 페이지에 따라서 주황색 길쭉한 점으로 바뀌어야 했다. 사실 state를 사용해서 props로 element에 넘겨주고 css조작하는 방법도 있었지만 useRef로도 가능한 방법을 찾아서 useRef를 이용해보았다.다음과 같이 useRef의 초기

2021년 6월 18일
·
0개의 댓글

useRef, forwardRef

아래에 있는 CustomTextInput 컴포넌트의 인스턴스가 마운트 된 이후에 즉시 클릭되는 걸 흉내내기 위해 CustomTextInput 컴포넌트를 감싸는 걸 원한다면, ref를 사용하여 CustomTextInput 컴포넌트의 인스턴스에 접근하고 직접 focusTe

2021년 6월 16일
·
0개의 댓글
post-thumbnail

[Modern React with Redux] 00 주말 리액트 복습

벨로퍼트와 함께 하는 모던 리액트의 코드를 따라 쳐보며 주말동안 리액트를 복습! 사실 부트캠프 수료 후, 과제를 하고 또 복습을 하며, 리액트를 정말 수박 겉핥기 식으로만 알고 있었다는 걸 다시 한 번 실감한다. Fragment 리액트에서는 JSX문법을 사용하기 때문

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

TIL 79 | useState, useRef로 변수 관리

React 컴포넌트 내부에 어떤 값을 관리하고자할 때 사용할 수 있는 방법 3가지를 발견했다. 일반 변수 선언 방식, useState, useRef를 전부 적용해본 과정을 정리해둔다. useRef는 DOM을 선택하여 값을 추출하는데 주로 사용되는 Hook이지만 컴포넌

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

[react] useRef 사용하기

개발환경react - v17.0.2typescript - v4.3.2reference의 줄임말로, DOM을 직접 참조하기 위해 사용한다. 클래스형 컴포넌트에서는 createRef, 함수형 컴포넌트에서는 useRef를 사용하는데, 둘의 동작 방식은 동일하다.HTML에서

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