# useRef

28개의 포스트

TIL44 l React - 함수 컴포넌트와 리액트 훅

클래스 컴포넌트는 멤버변수가 클래스 생성 시 한번만 만들어지고, state나 props가 변경되야 render 함수가 호출되는 반면에, 함수 컴포넌트는 컴포넌트 내 코드블럭 전체가 계속 반복적으로 호출된다. 로컬변수, 콜백함수 등 매번 새로 생성하고 새로운 참조값을 전

약 2시간 전
·
0개의 댓글

[항해99] 미니프로젝트(Day2)

2021.04.13(화)Nickname \-> 사용자는 input창에 사용하고 싶은 닉네임을 입력하고, 중복확인버튼을 누른다.📍input에 값을 받아서 그 값으로 뭘 해보자 -> useState 사용! 1.1 사용자가 input창을 클릭하면 info가 출력되고('bl

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

Twitter-Clone (12~13)

Twitter-Clone (12~13)

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

React-hooks

기존의 class component는 호출이 한번 되면 맴버변수 또한 호출된 처음을 제외하고는 다시 호출 되지 않는다. 데이터 변화에 따라 랜더 함수만 여러번 호출되고, 맴버변수는 일회성 호출이다. 그러나 function Component는 호출이 되면 함수 전체가 데

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

TIL. 입력 값을 실시간으로 수정/ 삭제하기

Toy Project(Teta Card Maker)의 진행 기록. 실시간으로 입력한 데이터를 수정/삭제해보았다!

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

TIL. React - Basic 개념 정리(4)

👩🏻‍💻 면접 기출 문제를 준비하면서, React를 이해할 때 반드시 필요한 기본 개념들들 추가로 정리해보았다. Class ComponentFunction Componentfunction component이기 때문에 변수 선언하는 const를 붙여주었고, this

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

[React Hook] useRef의 forwardRef에 대해 알아보자

요즘 개츠비로 포트폴리오 작업을 하고있다.포트폴리오니까 보는 사람이 보기 편하게 single page로 구성하고 싶어서, navbar의 Home, About, Projects, Contact를 클릭하면 해당 위치로 이동할 수 있도록scrollIntoView() 메소드를

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

React Hook + API

함수 컴포넌트의 핵심인 Hook와 API 몇 가지를 정리했습니다.

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

React Hooks 이해하기 (2)

앞서 살펴본 기본적인 3가지 hook 이외에도 React에는 다양한 hook이 존재한다. useReducer useState와 역할은 비슷한데, useState가 제공하는 기능 이외에도 상태 업데이트 로직을 외부 함수로 분리할 수 있는 기능을 제공한다. 그래서 상태를

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

useRef로 sliding bar 구현하기

Typescript로 햄버거 메뉴 클릭 시 sliding bar를 구현해보았습니다.🗂 Structure전체적인 구조는 생략하고 slidebar 구현에 필요한 파일만 보였습니다.HeaderContainer.tsxSlidebar.tsxuseRef를 사용하여 UList c

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

React Hooks에 대해

useStateuseState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하시면 됩니다.1.1 useState 를 여러번

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

TIL 90 | useRef로 글줄에 따라 인풋박스의 높이 바꾸기

일반적인 메신저나 댓글에서는 입력한 내용의 길이에 따라 인풋 상자의 크기가 변하는 것을 볼 수 있다. useRef로 간단하게 위 기능을 구현해보자.

2020년 12월 16일
·
0개의 댓글

[리액트] useRef, useEffect

리액트에 내장된 Hook에 대해 더 알아보자.특정 DOM을 가리킬 때 사용하는 Hook 함수.Ex. 포커스 설정, 특정 엘리먼트의 크기/색상 변경 등..: ref는 JS의 getElementById()처럼, component의 어떤 부분을 선택할 수 있게 해주는 방법이

2020년 11월 23일
·
0개의 댓글
post-thumbnail

hooks 에서 ref 사용하기

hooks 에서는 ref를 사용할 수 없는데, 가능하게 해준 것이 바로 useRef 이다.그리고, 자식 컴포넌트에서 ref를 사용하기 위해선 useImperativeHandle을 사용해야 한다. 사용 예시를 보자.하고자 하는 것 : 버튼을 누르면 input 에 focu

2020년 11월 23일
·
0개의 댓글
post-thumbnail

[React] 8. react-hooks(useState, useEffect, useRef)

Hooks 는 React 16.8 에서 추가 되었습니다.기존에는 함수형 컴포넌트에서 상태를 관리하기 위해서는 클래스 컴포넌트 다시 작성해야 했던 반면에, Hooks가 나오면서 함수형 컴포넌트에서도 상태를 가질 수 있게 되었습니다. Hooks는 이것 외에도 다양한 기능들

2020년 10월 20일
·
0개의 댓글
post-thumbnail

[JavaScript] React - useRef로 컴포넌트 안의 변수 생성

React useRef를 통한 컴포넌트 안의 변수 생성 > 컴포넌트가 리렌더링 될 때마다 기억할 수 있는 값을 관리하고 싶을 때, useRef를 사용할 수 있습니다. > 아래 예제를 통해서 어떻게 사용하는지 알아봅시다. >

2020년 10월 1일
·
0개의 댓글

React useRef()

const commentUnputRef = useRef()const submitComment = useMutation(SUBMIT_COMMENT_MUTATION, { update() { setComment(''); commentInputRef.c

2020년 9월 26일
·
0개의 댓글

React Hooks - useRef를 이용한 스크롤 이동

위 사진은 클론코딩을 진행한 클래스101의 클래스 상세페이지이다. 각각의 탭을 클릭하면 해당하는 위치로 이동을 하는데 처음에는 바로 화면이 바뀌길래 active tab인줄 알았다. 클론코딩을 진행하면서 이 부분이 조금 불편하다고 생각되어서 스크롤 이동을 부드럽게 만들어주었다. 각 탭에 해당하는 element는 각자 ref를 가지고 있었고 이동을 하려면 하...

2020년 8월 16일
·
0개의 댓글

React Hooks #9 useImperativeHandle()

리액트 공식문서 - useImperativeHandle(https://ko.reactjs.org/docs/hooks-reference.html자식컴포넌트의 메서드 호출할 수 있도록 한다.forwardRef() 와 함께 사용한다.부모 컴포넌트에서 입력한 ref객

2020년 7월 13일
·
0개의 댓글