useRef

alajillo·2021년 10월 6일
0

React

목록 보기
5/12
post-thumbnail

useRef

import { useRef } from 'react'

function App(){
	const testRef = useRef(1)
	console.log(testRef) // {current : 1}
  const writeGood = ()=>{
    testRef.current.innerText = "Good!!"
  }
  return (
   <div>
     <h1 ref={testRef}>test</h1>
     <button onClick={writeGood}>write Good!!!</button>
   </div>
  );
}

useRef의 기본적인 기능은 고유의 값을 저장하는 것이다. 만약 태그에 사용된다면 해당 엘리먼트를 참조할수 있다. 인자로 받는 값은 useState와 동일하게 초기값이다.

useRef는 왜 current 속성에 값을 저장하는가?

useRef는 React내부에서 생성된 객체이며 해당 객체는 값을 저장하는 것이 아니라 특정 메모리 주소 의 값을 저장하기 때문에 useRef가 가지고 있는 값을 변환가능한 값으로 만들기 위해서는 객체 내부의 property에 값을 담아야한다.

ref속성을 쓰는 이유

document.querySelector(선택자)

위 코드를 통해 이미 원하는 엘리먼트를 찾아서 참조할수 있는데 굳이 왜 ref를 쓰는걸까?

그 이유는 document.querySelector와 같은 엘리먼트를 찾아주는 함수를 쓸 경우 dom tree를 하나씩 탐색하면서 찾기 때문에 ref속성을 이용해서 바로 해당 엘리먼트의 값이 참조되어있는 메모리주소 값을 저장하는 것이다.

그럼 useState랑 차이점이 엘리먼트 참조 하나인가?

useRef는 반응형이 아니다.

import { useState, useRef } from 'react'
function App() {
  const testRef = useRef(1)
  const increaseRef = ()=>{
    testRef.current++
    console.log(testRef)
  }
  return (
   <div>
     <h1>{testRef.current}</h1>
     <button onClick={increaseRef}>change Ref</button>
   </div>
  );
}

export default App;

위에 코드로 React를 실행 시킨 뒤 버튼을 눌러도 콘솔창에는 변화한 testRef값이 찍히지만 렌더링된 화면속에는 그대로이다.

다른말로 useRef는 상태가 변경되어도 다시 렌더링 되지 않고 useState는 상태가 변하면 다시 렌더링된다.

useState와 useRef의 쓰임새

useState는 화면단에 출력해야할 변화가 많은 데이터를 넣고

useRef는 비교적 정적인 데이터와 엘리먼트를 참조할때 쓰면 좋을 것 같다.

React.forwardRef를 이용해서 하위 컴포넌트 조작하기

상위 컴포넌트

import React from 'react'
import FancyButton from './components/FancyButton'

function App() {
  console.log('test')
  const ref = React.createRef();
  const handleClick =()=>{
    ref.current.innerText = "sucess"
  }
  return (
   <div>
     <h1>App Component</h1>
     <FancyButton ref={ref}>   test   </FancyButton>
     <button  onClick={handleClick} >change innerText</button>
   </div>
  )
}

export default App;

상위 컴포넌트에서 React.createRef()를 통해 ref를 생성한뒤 하위 컴포넌트에 전달한다.

하위 컴포넌트

import React from 'react'

const FancyButton = React.forwardRef((props, ref) => (
  <button className="FancyButton">
    <h1 ref={ref}>{props.children}</h1>
  </button>
))
export default FancyButton

하위 컴포넌트는 React.forwardRef()를 통해 props와 ref를 전달 받고 전달받은 ref를 통해 엘리먼트를 참조하면 상위컴포넌트에서도 하위 컴포넌트의 엘리먼트를 ref를 통해 참조할수 있다.

profile
Developer's High

0개의 댓글