09.30.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-10 챕터리뷰

[ 새롭게 알게 된 것 ]

 

---

1. 특정 DOM을 직접 선택해야하는 상황이 발생할땐 useRef라는 Hook을 사용함

---

일반적으로 js를 사용할땐 DOM Selector같은 함수를 사용해 getElementById 또는 querySelector로 특정DOM 선택

리엑트에선 ref라는 것을 사용함

클래스형 컴포넌트에선 콜백함수 또는 React.createRef 라는 함수를 사용하는데 이는 뒷쪽에서 추후 다룬다함

---

2. useRef 활용 상황예시

---

특정엘리먼트 크기를 가져와야 할때

스크롤바 위치를 가져오거나 설정해야 할때

포커스를 설정해줘야 할때

video.js, JWPlayter 같은 HTML5 Video관련 라이브러리 사용시 특정 DOM에 적용할때

D3, chart.js등 그래프관련라이브러리 사용시 특정 DOM에 적용할때

 

---

3. useRef 사용법

---

아래 코드는 inputSample에서 초기화 버튼을 누르면 포커스가 초기화 버튼에 그대로 남아있는걸 input에 포커스가 잡히도록 활용예시임

참고로 함수형 컴포넌트로 작성함

 

useRef()를 사용하여 Ref 객체를 만듦

const nameInput = useRef();

onReset함수에 input 포커스를 하는 focus() 라는 DOM API를 호출해줌

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

 

이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정함

return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      ... 이하생략
)

 

---