WINK-(Web & App)/React.js 스터디 (135) 썸네일형 리스트형 [2025 1학기 React.js 스터디] 이종민 #4주차 useRef 란 ? DOM 을 직접 선택해야 하는 상황에서 사용되는 Hook 함수입니다. 예시로 사용법을 써보겠습니다.import React, { useState, useRef } from 'react';우선 import에 useRef를 써준 뒤const nameInput = useRef();useRef를 사용하여 객체를 만들어줍니다. 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. const onReset = () => { setInputs({ name: '', nickname: '' }); nameInput.current.focus();}; 위 코드의 nameInput.current.focus(); 의 .current를 사용하여 .focus의 DOM AP.. [2025 1학기 React.js 스터디] 정채은 #4주차 1장 10~16 10. useRef 로 특정 DOM 선택하기 ref 가 뭔가? React에서 DOM요소나 클래스형 컴포넌트에 직접 접근할수 있게 도와주는 기능 ! 즉, 포인터 같은 역할 [useRef] 함수의 Hook 중 하나, 함수형 컴포넌트에서 사용되고 DOM 요소나 값을 저장할 때 사용됨.렌더링 유발 X Hook 이 먼지 몰랏다. Hook 이란.. 클래스형 컴포넌트에서만 사용되던 상태 관리와 라이프사이클 메서드를 함수형 컴포넌트에서 간단하게 사용하게 만든것. 대표 훅 들... useState(상태 관리), useEffect(사이드 이펙트 관리), useRef(DOM 접근), useContext(전역 상태 관리) ★ 클래스형 컴포넌트 vs 함수형 컴포넌트구분클래스형 컴포넌트함수형 컴포넌트선언 .. [2025 1학기 React.js 스터디] 강민지 #4주차 1. useRef 기능 (1): ref를 사용하여 특정 DOM 선택하기 !EX) 초기화 버튼 누르고 난 후, 커서가 이름 입력칸으로 포커스 되도록 기능 구현 Ref 객체 만들기 -> 원하는 DOM에 ref값 설정 -> 실행 순서!! 2. 배열 렌더링하기 # 고정적인 배열 렌더링 # 동적인 배열 렌더링 -> map() 함수 사용 !++++++++++key(고유 식별값) props 설정 만약 고유값이 없다면, index를 key로 사용 ! 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문에key 는 꼭꼭 필요하다 !!! 3. useRef 기능 (2) : 변수를 관리 & 설정 후 바로 조회 O / 값이 바뀌어도 컴포넌트가 리렌더링 되지 않음 EX) 배열에 새 항목을 추가할.. [2025 1학기 React.js 스터디] 최은희 #4주차 소리 한 번 지르고 시작.....useRef-리액트는 DOM을 직접 조작하지 않고 가짜를 사용하는데, 직접 조작해야할 때가 생긴다 이때!! ueseRef를 사용(DOM을 조작하거나 변하지 않는 데이터를 기억할 때 사용하는 훅)(리액트 훅은 컴포넌트에서 상태관리 state나 생명주기 관리 useEffect를 가능하게 하는 함수들이라고 한다) -내부적으로 저장만 하고 싶을 때 사용한다 (화면에 보여주고 싶을 땐 useState사용) -> 무엇을 알수 있는가?!useRef로 연결된 HTML 태그는 .current를 통해 언제든지 직접 조작할 수 있다!!만약 useState로 하면 상태를 바꾸고 나면 컴포넌트가 다시 렌더링 되지만 useRef는 몰래 돔만 조작한다map()-여러 데이터를 담은 배열을 map()로.. [2025 1학기 React.js 스터디] 이가인 #4주차 1. useRef 로 특정 DOM 선택2. 배열 렌더링3. useRef로 컴포넌트 안에 변수 만들기4. 배열에 항목 추가5. 배열 항목 제거 6. 배열 항목 수정7. useEffect useRef 로 특정 DOM 선택하는 방법 - !- ref 사용 이유1. DOM에 직접 접근 가능2. useState와 달리 값이 변해도 컴포넌트가 리렌더링되지 않고 값 저장 가능함3. 이전 값이나 상태를 저장해두고 싶을 때 유용함 - useRef라는 Hook 함수 사용React에서 DOM 요소나 값의 참조(reference) 를 저장하고 유지하기 위해 사용하는 Hook 기존 InputSample코드에서 초기화 버튼을 클릭했을 때 포커스가 초기화 버튼에 그대로 남아있음이름 input 에 포커스가 잡히도록 useRef 를.. [2025 1학기 React.js 스터디] 한혜민 #4주차 useRef로 특정 DOM 선택하기이전에 만든 InputSample에서 초기화 버튼을 클릭했을 때 input에 포커스가 잡히도록 해보겠음. 코드 작성하고 브라우저에서 인풋에 값을 입력하고 초기화를 눌러보면이름에 포커스가 잡히는 것을 확인해볼 수 있음 !!!!!!!!!!!!!!!!!!!!!! 배열 렌더링하기반복되는 코드를 사용하는 것은 비효율적임.효율적인 배열을 위해 동적인 배열을 렌더링할 때 쓰이는 map 함수와 각 원소마다 가지는 고유값으로 설정된 key를 사용하여 배열을 렌더링할 것임. useRef로 컴포넌트 안의 변수 만들기이번에는 App 컴포넌트에서 useRef를 사용하여 변수를 관리해볼 거임.용도는 배열에 새 항목을 추가하고, 그 새 항복에서 사용할 고유 id를 관리하는 용도임. useRe.. [2025 1학기 React.js 스터디] 이승준 #4주차 ㅎㅏ 시험 끝나니까 바로 스터디네요;; 달려볼게요🗂️ useRef로 특정 Dom 선택하기JS에서 우리는 특정 DOM을 선택해야 할 때 getElementById, querySelector과 같은 함수들을 사용해서 DOM을 선택합니다. 리액트에서도 직접 DOM을 만져줘야하는 경우가 있을 수 있는데 이때, React에서는 ref 라는 것을 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때에는 useRef 라는 Hook함수를 사용합니다.(useState(),같은거..) 클래스형 컴포넌트에서 하는 방법도 있는데 안다루겠습니다..(이제 별로 안중요하대요) 예시를 한번 보겠습니다🗂️ 배열 렌더링하기React에서 배열을 렌더링하는 방법을 알아보겠습니다.아래에서 보시면 되는데 만약 const us.. [2025 1학기 React.js 스터디] 이서준 #4주차 시작하겠습니다.useRef란 무엇인가JS에서는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.React를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생할 때도 있는데, 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야한다던지, 또는 포커스를 설정해줘야한다던지 등 다양한 상황이 있다. 또한 외부 라이브러리를 사용해야 할 때도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다.이럴 때 React에서는 ref라는 것을 사용한다.함수형 컴포넌트에서 ref를 사용할 때는 useRef라는 Hook 함수를 사용한다. 클래스형 컴.. 이전 1 2 3 4 ··· 17 다음
