# useRef

sjkang930

🐾 React 랑 연결하기 express.js로 >먼저, react폴더안에 npm install express --save express를 설치해줘야함 설치하면 package.json 에 "express": "^4.18.2" 확인가능 >nodemon도 설치해줘 껏다켯다 귀찮으니깐 npm install nodemon 설치하기 ❗️ 근데, 나는 저번에 global로 전역으로 설치해줘서 설치 안해줘도됨 설치하면 package.json 에 "nodemon": "^3.0.1" 확인가능 🐾 지금까지 서버를 킬때 React와 express를 따로따로 실행시켰지❓ express 와 react를 동시에 실행가능❓ >🔎 Concurrently 라는 라이브러리를 활용하면 한번에 실행시킬수가 있어 ❗️ 📝 package.json start 명령어를 둘다 실행할수있도록 설정하여 npm start 를

ghkfqkf675

HTML에서 input에 포커스 주거나 스크롤 박스 조작하거나 Canvas 요소에 그림을 그리는 등 특정 DOM에 직접적으로 건드려야 할 때는 id를 사용하여 DOM에 이름을 달지만, React는 ref (reference)를 이용해서 이름을 달 수 있다. ref 사용 1 : 콜백함수를 통한 ref 설정 ref를 만드는 가장 기본적인 방법은 콜백함수 ()=>{} 를 사용하여 달고자 하는 요소에 ref라는 콜백함수를 props로 전달해주는 것이다. >ex) ref 사용 2 : useRef 통한 ref 설정 useRef는 함수형 컴포넌트 코드로 리액트 훅(useState, use~, ...)에서 많이 이용하는 코드이다. ref에 현재 접근한 DOM의 value값을 가져오기 위해서는 inputRef

qmflf556

Ref 로 값을 참조하기 컴포넌트가 어떤 정보를 기억하길 원하나 그 정보가 새로운 렌더를 유발하는것을 원하지 않는다면 ref 를 사용할 수 있다. 이때의 ref 는 다음과 같다. 따라서 현재의 값은 ref.current 프로퍼티를 통해 접근할 수 있다. 이 값은 읽거나 수정할 수 있는데 React 는 이 ref 를 추적하지 않는다. 이게 React 가 단방향 데이터 흐름의 탈출구를 만드는 이유이다. !codesandbox[beautiful-waterfall-7mj59l?fontsize=14&hidenavigation=1&module=%2FApp.js&theme=dark&view=editor] 위의 코드를 실행하면 ref.current 가 매 클릭 때마다 증가한다. ref 와 state 의 공통점과 차이점 ref 는 state 처럼 숫자, 문자열, 객체, 심지어 함수도 될 수 있다. 단, state 와 달리 plain JavaScript o

do_dam

useRef는 언제 사용할까? 1. 특정한 값을 저장할 때 state를 사용할 경우, state가 변경될 때 리렌더링되면서 컴포넌트 내부 변수가 초기화된다. 따라서, 변하지 않는 값이 필요하다면 useRef를 사용할 수 있다. useRef의 값이 변경될 때는 리렌더링이 되지 않는다. 즉, state 대신 useRef를 사용하면 불필요한 렌더링을 막을 수 있고, 컴포넌트가 렌더링되어도 useRef의 값이 변경되지 않고 유지된다. 2. DOM 요소에 접근할 때 예를 들어 input창에 focus()를 주고 싶다면 useRef를 사용할 수 있다. input 박스를 마우스로 클릭하지 않아도 자동으로 포커스가 맞춰져 있다면, 불필요한 동작(ex. 마우스 클릭 등) 없이 키보드를 바로 입력할 수 있는 등의 효율적인 작업이 가능하다. 1. useRef로 특정한 값 저장하기 대부분의 경우, 상태가 변할 때마다 React 컴포넌트 함수가 호출되어 화면

seok990301

1useRef란 변수임. 크게 두 가지로 쓰임. 2. DOM 요소에 직접 접근 intput이라는 놈은 참조해서, 지금 위치인 함수형 컴포넌트에서 얘에 대한 조작을 할 수 있음. 3. 렌더링과 무관한 변수 용도 그냥 변수 만드는 용으로 사용됨 그럼 그냥 let으로 만들지 뭐하러 useRef 쓰나? Lifecycle을 이해하고 있어야 함. 기본적으로 react 컴포넌트들은 아마 리렌더링 되는 경우가 많음 let으로 만들면 리렌더링 될 때마다 초기화됨 반면 useRef로 만들면 컴포넌트가 처음 마운트될 때 한 번만 생성됨 그리고 리렌더링에 영향을 받지 않음. 즉 초기화 되지 않음 심지어 useState랑 다르게 이걸로 리렌더링 되지 않음. 그러니까 컴포넌트 리렌더링될 때 값이 초기화되지 않고 계속 유지되는 변수로 만들기 위함임.

kh8640

시리즈 이전 글을 보시고 읽으시는 걸 추천드려요! > 1. 부모의 overflow 속성에 영향을 받지 않으면서, 최상단 고정 배치 body 및 모든 엘리먼트 스크롤 방지 콘텐츠 외부 영역 클릭 시 닫힘 콘텐츠 위치 자동 변경 (콘텐츠의 남은 공간에 따라 위치 변경) 합성 컴포넌트로 구현 마운트/언마운트 시 transition 적용 이번 글에서는 DropDown의 콘텐츠의 외부 영역 클릭 시 닫힘을 구현하려고 한다. 외부 영역 클릭 시 닫히는 여러가지 방법을 알아보자 외부 영역 클릭 시 닫힘 먼저 간략하게 구조를 살펴보자. ("외부 영역 클릭 시 닫힘" 기능과 무관한 이전 코드는 제외) 구조와 사진을 보면 스크롤을 막기 위해 추가한 전체 영역을 차지하는 ``(붉은색 영역)를 클릭하면 쉽게

codenest

들어가기 전에 멋사가 끝난지 벌써 두 달이 지났고, 7월과 8월을 뭔가 어영부영 보내다가 이대로 가다가는 아무것도 못 하겠다! 라는 생각이 정말 강하게 들어서, 8월부터 (사실 정말 하자! 라고 마음 먹은 건 7월 부터였지만) 팀을 꾸려서 사이드 프로젝트를 진행중이었습니다. 소셜 서비스 프로젝트를 진행중이었는데,이번 주차에는 다음과 같은 디자인을 구현해야 했습니다. 나는 디자인이 싫어요! 카테고리를 분류하는 탭 전환 효과를 만들어야 했는데, 전혀 감이 안 잡혔습니다. 버튼 클릭 시 IndicatorBar 크기 맞추기 하지

jeong_lululala

키워드 useRef Hook의 규칙 최종 목표 간단한 서버를 만들고, custom hook 을 사용하여 서버에서 데이터를 받아올 수 있다. 현재 목표 useRef 에 대해 알아보자. 그리고 custom hook 에 대해 알아보자. useRef 란? 컴포넌트의 생애주기 전체에 걸쳐서 유지되는 객체이다. 즉, 컴포넌트가 없어질 때까지 동일한 객체가 유지된다. useRef 의 특징은? 동일한 useRef 객체를 참조하면 이들은 동일한 객체를 공유한다. 객체 자체는 값은 아니고, 값을 참조하기 위한 객체이다. 그래서 값을 언제든지 변경할 수 있다. 만약, 여러 컴포넌트에서 동일한 useRef 객체를 참조하면 이들은 동일한 객체를 공유하게 된다. 아래 TimerControl 컴포넌트가 10번 호출된다면 ref.value 는 10이 된다. 객체의 현재 값이 바뀌더라도 렌더링에 영향을 주지 않는다. 상태(state)가 변경되면

ddoddiworld

🔗 이미지 : React hooks best practices in 2021 React를 사용하다 보면 훅! 이라는 것을 자주 접하게 된다. 🎣 Hook 이 뭔데? > 리액트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 📖 React를 다루는 기술 책 내용 문장만 봐서는 도저히 훅에 대해 감이 안오는데, 사실 리액트를 막 처음 배우면서 값을 만지는 작업을 했는데 그때 이미 훅을 사용하고 있었다는 사실...! 아래에서도 다루겠지만 바로 useState라는 훅이다. 우선 훅을 사용하기 위해서는 **상단에 사용할 훅을 impo

junnkyuu

2. React hook(심화) useRef useRef는 함수형 컴포넌트 안에서 DOM 요소 혹은 변수를 저장하고 관리할 수 있게 해준다. useRef를 사용하면 컴포넌트가 리렌더링될 때마다 값이 유지되고, 값의 차이를 비교하거나 임시 데이터를 저장할 수 있다. React 공식문서에서는 useRef를 다음과 같이 설명한다. useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다.

dudwns

리액트 프로젝트 시작하기 component에 props 전달하기 객체 비구조화 할당을 사용하면 좀 더 간단하게 작성할 수 있다. defaultProps를 정의 할 필요가 없다. 컴포넌트 내부에 작성한 요소를 전달하려면 children 속성을 이용할 수 있다. children의 타입은 node(JSX 및 각종 Element 요소를 받을 수 있는 타입)이다. isRequired: 필수 요소 조건부 렌더링 논리곱 연산자(&&)를 사용해서 조건부 렌더링을 할 수 있다. 삼항 연산자도 사용 가능하다. 반복 map 함수를 사용하여 특정 요소를 반복 출력할 수 있다. 이 때 최상위 요소에 key 속성을 반드시 명시해야 한다. -> 내부 최적화 지역 상태 관리 useState 훅을 사용해서 지역 변수를 생성할 수 있다. 이벤트 바인딩

taehyung

이번 포스팅은 리액트의 함수형컴포넌트에서의 UseRef 를 다루어보려 합니다. 현재 프론트엔드를 공부중이고 자바스크립트와 리액트를 병행하여 시작하고 있는데요, 아직 주니어도 못되는 수준이라서 틀린 부분에 대해서는 댓글로 알려주시면 감사하겠습니다^^ UseRef useRef 는 프로퍼티에 변경 가능한 값을 담고있는 '상자' 같은 녀석입니다. useRef 는 생성되면 current 라는 객체를 생성하고, 만들어진 current 객체는 다른 렌더링이 발생해도 변경되지않고 고유한객체를 유지합니다. 렌더링에 영향을 받지않고, 영향을 끼치지도 않습니다. ref의 변경은 감지되지도 않으니 useEffect의 디펜던시로도 사용할 수 없습니다. ( 아직 useEffect를 잘 모르니 나중에 알아보겠습니다 ) Current 객체가 만들어지는 시점 컴포넌트가 평가될 때 만들어질까요?? 컴포넌트가 평가되고 실행되는 일련의 과정을 거치는 중 current

orodae

다양한 사용자 입력 처리하기 한 줄 입력 처리 여러 줄 입력 처리 선택 박스 입력 처리 사용자 입력 데이터 핸들링 DOM 조작하기 > 일기 저장 버튼을 클릭했을 때, 작성자와 일기가 정상적으로 입력되었는지 확인하고 입력이 정상적이지 않으면 focus하기 useRef 조건에 따라 focus

alchogh

1. useRef를 사용 한 이유 react의 장점 중 하나 dom을 직접 건드려도 되지 않아도 되는건데 굳이 알아야하나 라고 생각을 했지만 useRef는 리렌더링을 하지 않기 때문에 불필요한 데이터를 가져오지 않는다고 생각하여 사용하게 되었습니다. 프로젝트를 하게 되면 모달창을 만들 일이 많아지는데 처음에는 하나의 큰 div 태그를 위에 덮어주는 형식으로 만들어 useState로 켰다 껐다 하면서 만들었습니다. 하지만 이렇게 되면 너무 많은 state가 생겨 보기 불편하더라구요. 2. 수정 전 모달 영역 ref 위 코드는 ref로 사용한 것입니다. stlyed-components로 코드를 구현했기 떄문에 DropDown이 모달 컴포넌트 입니다. 하지만 위처럼 코드를 치면 굳이 모달 컴포넌트를 사용할 필요가 없겠죠? 3. 수정 후 메인 컴포넌트 영역 DropDown컴포넌트를 사용하는 곳마다 함수를 정의하고 해야하니까 그

sorin44

Window.getComputedStyle? getComputedStyle() 메서드는 계산된 CSS 속성과 HTML 요소의 값을 가져옵니다. getComputedStyle() 메서드는 CSSStyleDeclaration 객체를 반환합니다. Syntax window.getComputedStyle(element, pseudoElement) Parameter | Parameter | Description | | --- | --- | | element | 필수 사항, 계산된 스타일을 가져올 요소 입니다. | | pseudoElement | 옵션 사항, 가져올 pseudo-element입니다. | Return Value |Type|Description| |---|---| |An object|요소의 모든 CSS 속성 및 값이 포함된 CSSSStyleDeclaration 개체입니다.| Example 위처럼 작성했을 때 `divR

hyeonjoonpark

useRef 기본형태 useRef를 호출하면 ref 오브젝트를 반환해준다 ref 오브젝트 구조 ref 오브젝트는 다음과 같은 구조를 가진다 예를 들어 food 라는 이름의 ref 오브젝트를 만들고 value 값으로 pizza라는 값을 넣었을 떄 food = 가 된다는 의미이다 ref 오브젝트 value 값 변경 ref 오브젝트 안에 value를 변경하고 싶을 때는 이렇게 변경 할 수 있다. 이렇게 반환된 ref 오브젝트는 컴포넌트가 계속 랜더링 되어도 컴포넌트가 언마운트 되기 전에는 값을 유지할 수 있다 ref를 어떻게 사용할 수 있을까? 1. 저장공간 useState를 사용해서 state를 변화 시키면

gazero_

⭐ useEffect 리액트 훅 입니다. 사실 이미 정리했었음. 근데 또 공부하고 있음. 나 이번엔 진짜 다 확실히 이해함👏 . 완전 완벽. 오늘은 그러함. useEffect는 요.. > #### 리액트 컴포넌트의 생명주기에 따라 동작을 제어할 수 있는 기능을 제공 예🤔? > #### 콜백함수를 입력받아 특정 생명주기 마다 호출 ㅇㅖ😨? > #### 두번째 인수로 의존성 배열을 전달받아 콜백함수의 호출 타임을 결정하기도 함 😱? ![](https://velog.velcdn.com/images/gazero_/post/ac9880e2-99f1-42dd-a6da-98da7b06d4

seungrok-yoon

ref, forwardRef ref, forwardRef는 제가 리액트를 공부하면서 생소하게 느낀 부분 중 하나였습니다. 특히 타입스크립트랑 같이 사용하는 경우에는 이 녀석의 타입이 MutableRefObject 와RefObject로 나뉘더라구요? 그래서 ref, forwardRef를 확실히 알고 넘어가려합니다. ref 가 뭘까요? React공식문서 ref ref는 DOM node를 부모 컴포넌트에 노출시켜, 부모 컴포넌트가 해당 DOM node를 직접 조작할 수 있도록 하는 리액트만의 기술입니다. 함수형 컴포넌트에서 사용을 할 때는 useRef()훅을 사용하는데요, useRef는 current 프로퍼티가 들어있는 객체를 리턴합니다. 그런데 리턴타입이 두 종류입니다. MutableRefObject, 그리고 RefObject 이렇게요.

yhko1992

리액트에서 어떤 값을 변수에 저장하고 갱신하려고한다. 그 값은 closure여서 reference가 바뀌지 않아야 한다. 만약 새로운 값으로 갱신하려할때 컴포넌트가 리랜더링 되지 않으면 좋겠다. 할때!! useState가 아닌 useRef를 쓰면 된다. useInterval을 만들어보면서 배워보자 그럼 딱 current라는 공간에 callback이 들어가면서 리랜더링은 되지 않는다.

orlein

요구사항 6자리 번호를 입력받는다 번호별로 입력칸이 달라야 한다 한 칸에 입력하면 다음 칸으로 focus가 옮겨가야 한다 React Native로 구현해야한다 구현 안(못)한 요구사항 무조건 숫자만 들어가야한다 일반적인 텍스트입력과 완전히 같은 UX를 보여줘야한다 구현내용 이렇게 한 칸 입력을 만들고 이렇게 여러 칸 입력을 만든다 https://snack.expo.dev/@orlein/six-digits-input 결과물 고찰 react-dom에서 사용 가능? -> 당연하다 대신 'react-native' dependency에 있는 컴포넌트는 알아서 잘 바꿀것... custom hook으로 만들기 가능? -> 당연하다 근데 굳이? 아 react-dom에서도 똑같이 사용하고싶다면야 뭐... 왜 React 팀은 forwardRef의 순서를 파라미터 순서에 맞춰 로 하