[💎React] useRef

const ref = useRef(value)
useRef는 크게 다음 두 가지의 기능이 있다.
첫 번째는 변수 관리, 두 번째는 DOM 요소 접근.

변수 관리

함수형 컴포넌트에서 useRef를 부르면 {current:value}로 생긴 ref 오브젝트를 반환해준다. useRef의 인자로 들어간 value는 ref 오브젝트의 current 값으로 저장된다. 반환된 ref는 컴포넌트의 전생애주기를 통해 유지된다. 컴포넌트가 계속 렌더링되어도, 언마운트되기 전까진 값을 계속 유지할 수 있다.

변화는 감지하지만, 그 변화가 렌더링은 유발하게 하고 싶지 않을 때 빛을 발한다 ✨

DOM 요소 접근

useRef는 ref 라는 오브젝트를 반환해주는데, 이 ref를 우리가 접근하고자 하는 요소 태그에 ref 라는 속성을 넣어주면 된다.(ex. <input ref={ref}/> )
대표적으로 이러한 기능을 사용하는 예시로는, 로그인 페이지에서 굳이 input을 클릭하지 않아도 자동으로 focus 되어있어 사용자가 바로 타이핑해줄 수 있게 하는 것이다. 마치, 바닐라자바스크립트의 document.querySelector 같은!

import React, { useRef, useEffect } from 'react'

function Login() {
    const inputRef = useRef()
    useEffect(() => {
        inputRef.current.focus()
    }, [])
    const onLogin = () => {
        alert(`안녕하세요 ${inputRef.current.value}`)
    }
    const onEnter = (e) => {
        if (e.key === 'Enter') {
            onLogin()
        }
    }
    return (
        <div>
            <input ref={inputRef} type="text" placeholder="id를 입력해주세요" onKeyDown={onEnter} />
            <button onClick={onLogin}>로그인</button>
        </div>
    )
}

export default Login

• 오늘 새롭게 알게 된 점:

• 오늘 배운것들 중 궁금하거나 더 알고 싶은 점:
  두번째 로그인창 구현하는 페이지에서 버튼을 클릭하면 괜찮은데, Enter key 를 치면 alert창이 두번 뜬다. React.StrictMode랑 관련이 있나 싶어 지워봤는데 여전하다. 뭔지 잘 모르겠다. 일단 오늘은 Hooks 모두 공부하는 게 목표라, 나중에라도 다시 해결해봐야겠다.

• 오늘의 소감:
  공부하는 게 재미없었는데, 점점 공부할수록 내가 구현할 수 있는 기능이 많아지고, 또 아는 것들이 이어지니까 재밌어지는 것 같다. 당장 잘할 수는 없어도, 매일매일 조금씩 점점 더 성장하는 사람이 되면 좋겠다.