ref는 언제 어떻게?

김서현·2022년 11월 3일
0

React.js

목록 보기
2/2
post-thumbnail

ref: DOM에 이름 달기

🧡 HTML : id를 사용하여 DOM에 이름 달기

<div id="my-element"></div>

💙 React 프로젝트 내부 : ref

  • ref = reference

    ❓ 리액트 내에서 id 사용 불가한가?
    ▶ No! 가능하다.
    그러나 특수한 경우가 아니면 사용 권장 X

    HTML에서 DOM의 id는 유일 해야한다!
    -> 같은 컴포넌트를 여러 번 사용할 때 중복 id를 가진 DOM이 여러 개 생기기 때문.

ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 문제 해결

-> 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황에는 id 뒷부분에 추가 텍스트를 붙여 중복 id 발생 방지
(ex. button01, button02, button03)


5.1 ref는 어떤 상황에서 사용해야 할까?

💬 DOM을 꼭 직접적으로 건드려야 할 때

💻비밀번호 검증 예제

💻 1. 컴포넌트 만들기

state만으로 해결 할 수 없는 기능

  • 특정 input에 포커스 주기
  • 스크롤 박스 조작하기
  • Canvas 요소에 그림 그리기 등
    -> 모두 직접 DOM에 접근해야함!

5.2 ref 사용

📑 콜백 함수를 통한 ref 설정

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

👉this.input은 input 요소의 DOM을 가리킴!

📑 createRef를 통한 ref 설정

  • 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아주고, 해당 멤버 변수를 ref 달고자 하는 요소에 ref props로 넣어주면 완성
input = React.createRef();

handleFocus = () => {
  this.input.current.focus();
}

render() {
  return (
    <div>
      <input ref={this.input}/>
    </div>
    );
}

👉current 써줘야 함

💻 비밀번호 검증 예제

💻 2. input에 ref 달기

5.3 컴포넌트에 ref 달기

  • 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때
<MyComponent
  ref={(ref) => {this.myComponent=ref}}
  />

👉 MyComponent 내부의 메서드 및 멤버 변수에도 접근 가능하다!

💻 스크롤 박스 예제

1. 컴포넌트 초기 설정
  • 최상위 DOM에 ref 달아 주기
2. 컴포넌트에 메서드 생성
  • 스크롤바를 맨 아래쪽으로 내리는 메서드
  • scrollTop : 세로 스크롤바 위치 (0~350)
  • scrollHeight : 스크롤이 있는 박스 안의 div 높이(650)
  • clientHeight : 스크롤이 있는 박스의 높이(300)
    👉 스크롤바 맨 아래쪽으로 내리기 : scrollHeight - clientHeight

5.4 정리

  • ref를 사용하지 않고 원하는 기능을 구현할 수 있는지 확인 후 활용.

  • ❗ 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용하면 잘못된 것!

  • useRef vs ref
    -> class형 컴포넌트에서 ref를 잡아야하는 경우 React.createRef를 사용한다.
    -> 함수형 컴포넌트의 경우 React.createRef와 React.useRef 둘다 사용가능 하지만 React.createRef를 사용할 경우 리렌더링 될때마다 ref 값이 초기화되어 원하는 값을 얻지 못할 것이다. 그러니 useRef를 사용한다.

0개의 댓글