[07-React] 6-3. React Hook :: useRef

3. useRef

: useState, useReducer와 동일하게 컴포넌트 내부의 리렌더링에도 상태 값 저장 가능

: useRef를 통한 지정은 외부 변수(= 비제어 컴포넌트로, 변경 시에도 리렌더링 X)

     -> ref객체는 js엔진 내의 Heap 내를 포인트

     -> Heap 내의 객체를 바꾸는 것이기 때문에 주소 자체는 미변동

const refPoint = useRef(); // 초기 값 미지정시, undefined

- DOM지정 시, 초기 값은 null  || 다른 값의 경우 알아서....

<input ref={refPoint} />
// refPoint.current객체 안의 value로 해당 input안의 값에 접근 가능

- 값을 리렌더링 없이 따로 저장하거나, DOM에 대한 직접 조작 시, 해당을 사용

 

- Ex

import '@/App.css'
import { useEffect, useRef } from 'react'

function Header({ title, reference }) {
  return (
    <div
      style={{
        position: 'sticky',
        top: 0,
        height: 60,
        backgroundColor: 'white',
        // opacity: '0',
      }}
    >
      <div
        id='header-title'
        className='hidden-header-title'
        style={{ backgroundColor: 'black' }}
        ref={reference}
      >
        {title}
      </div>
    </div>
  )
}
function Title({ title, references }) {
  const reference = useRef(null)
  useEffect(() => {
    console.log(reference.current)
    console.log(reference.current.innerText)
    // 옵져버 설정
    // 1. 정의
    const observer = new window.IntersectionObserver(([entry]) => {
      if (!entry.intersectionRatio) {
        // 타이틀 노출
        // document.getElementById('header-title').classList.add('show-header-title')
        // document.getElementById('header-title').classList.remove('hidden-header-title')
        references.current.className = 'show-header-title'
      } else {
        // 타이틀 비노출
        // document.getElementById('header-title').classList.remove('show-header-title')
        // document.getElementById('header-title').classList.add('hidden-header-title')
        references.current.className = 'hidden-header-title'
      }
    })
    // 2. 부착
    observer.observe(reference.current)
    // 3. 탈착
    return () => {
      // 소멸자
      observer.disconnect()
    }
  }, [])
  return <h3 ref={reference}>{title}</h3>
}
function Content({ content }) {
  return <div>{content}</div>
}

function Post({ title, content, reference }) {
  return (
    <div>
      <Title title={title} references={reference} />
      <Content content={content} />
    </div>
  )
}
function App() {
  const post = {
    title: 'Lorem ipsum',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim',
  }
  const topRef = useRef(null)
  return (
    <>
      <Header title={post.title} reference={topRef} />
      <Post title={post.title} content={post.content} reference={topRef} />
    </>
  )
}
export default App

 

---

참조

asac 수업자료

모던 리액트 Deep Dive