useRef

Ref

• 리액트를 사용하기 전까지 우리는 특정 태그에 접근할 때 document.getElementById() 를 사용했었습니다.
• 하지만, 리액트는 실제 DOM 이 아닌 virtual DOM 을 다루기 때문에 위의 방법으로 접근했을 때 문제가 생길 수 있습니다.
• 따라서, Ref 를 이용해 태그를 직접 변수에 저장합니다.

class 형 컴포넌트 createRef()

• class 형 컴포넌트에서는 createRef() 메소드를 이용해 특정 태그에 접근합니다.

//메서드 임폴트
import {createRef} from 'react'

// Ref코드 생성
inputRef = createRef()

// Ref를 적용하고싶은 input태그(=접근하고싶은 태그)
<input type="text" ref={this.inputRef}/>

//태그에 접근해서 실행시킬 함수
componentDidMout(){
		console.log("마운트 됨")
		this.inputRef.current?.focus()
	}

함수형 컴포넌트 useRef()

• 함수형 컴포넌트에서는 useRef 훅을 이용해 특정 태그에 접근합니다.

// 훅 임폴트
import {useRef} from 'react'

//Ref코드 생성
const inputRef = useRef()

// Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
<input type="text" ref={inputRef}/>

//태그에 접근해서 실행시킬 함수 _ useEffect참고는 바로 아래에서!
useEffect(()=>{
		console.log("마운트 됨")
		inputRef.current?.focus()
	})

레벨업

• 리액트는 SPA(Single Page App) 구조입니다.
• SPA는 하나의 페이지를 가지는 구조로, virtual DOM으로 여러 컴포넌트를 만들고 필요할 컴포넌트를 조합하고 조합된 컴포넌트를 진짜돔에 얹어서 보여줍니다.