풀스택 웹개발 부트캠프 13주차 (1)

Ref

• Reference
• 전역적으로 작동 ❌ 컴포넌트 내부에서 선언 및 사용 ⭕
• 동일한 컴포넌트 반복 사용해도 각 컴포넌트 내부에서만 동작 → 중복 ❌
• DOM을 직접적으로 건드려야 할 때 사용
  • ex) 특정 input에 focus 주기, 스크롤 박스 조작, 비디오 플레이어 재생 / 정지 등
• 가능한 한 그 사용을 최소화하는 것이 좋음
• 💥 클래스형 컴포넌트에서만 기본 기능으로 제공 (함수형에서는 useRef를 통해 사용)

React 요소 선택 - id vs ref

• id 지정
  • 같은 컴포넌트 반복 사용 → id 중복 (고유한 id ❌)
• ref 지정
  • 컴포넌트 내부에서만 작동

클래스형 컴포넌트 - Ref

콜백 함수

<input ref={ (ref) => { this.input = ref } />

• 사용하고자 하는 DOM 요소에 ref라는 콜백 함수 작성 & props로 전달
• ref를 컴포넌트의 멤버 변수로 설정
• ref는 원하는대로 사용 ⭕

createRef( )

input = React.createRef();

• React.createRef( )를 이용해 컴포넌트 내부에서 변수에 ref 요소를 담음
• input 요소는 실제 DOM 요소의 prop에 연결해야 함
• 사용할 때에는 this.input.current 이용

함수형 컴포넌트 - Ref

useRef( )

• 함수형 컴포넌트에서 ref를 사용하기 쉽게 만들어주는 Hook
• useRef( )는 인자로 받은 값으로 초기화된 변경 가능한 ref 객체를 반환
• ref.current로 현재 가리키는 객체에 접근 가능

// 1. ref 객체 만들기
const myRef = useRef();
// 2. 선택하고 싶은 DOM에 ref 값으로 설정 
<element ref={myRef}></element>
// 3. useRef( )로 만든 객체 안의 current가 실제 요소를 가리킴
myRef.current;

• useRef( ) 용도

  1. DOM 요소에 접근
  • ex) 버튼 클릭 시, input 요소에 focus 주기 → input 요소에 직접 접근 필요
  • document.querySelector( )와 유사

  2. 로컬 변수로 사용

     import { useRef } from "react";
     
     const RefSample2 = () = {
        const idRef = useRef(1);
     
        const plusIdRef = () => {
          idRef.current += 1;
          console.log(idRef.current);
        };
     
        return (
          <div>
            <h1>Ref Sample</h1>
            <h2>{idRef.current}</h2>
            <button onClick={plusIdRef}>PLUS Ref</button>
         </div>
        );
      };
     
      export default RefSample2;

  • ref는 재렌더링이 되지 않기 때문에 ref 값이 바뀌어도 보여지는 것은 1 (state는 재렌더링 되기 때문에 값이 변할 때마다 보여지는 것도 바뀜)