무라카미 하루키 - 달리기를 말할 때 내가 하고 싶은 이야기

DOM 요소 선택

HTML에서 요소 선택

• id, class등을 지정한 다음 querySelector혹은 document.getElementById 등을 사용해 요소를 선택하였다.

<div id = "content" > 내용 </div>

<script>
const content = document.getElementById()("content");
const content1 = document.querySelector("content1");
</script>

React에서 요소 선택

id 지정

• HTML에서와 같이 id지정 후 요소 선택가능
• 하지만 같은컴포넌트를 반복해서 사용하면 id가 중복되는 문제 발생
  • 고유한 id가 되지 않음

Ref 지정

Ref란?

• reference
• Ref는 render 메서드에서 생성된 DOM노드나 React 엘리먼트에 접근하는 방법 제공
• 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용 됨
• 동일한 컴포넌트를 반복해 만들어도 각 컴포넌트 내부에서만 동작
  • 값이 중복되지 않음
• DOM을 직접적으로 건드려야 할 때 사용
  • 특정 input에 focus, 스크롤 박스 조작, 비디오 플레이어의 재생/정지 등
• Class 형 컴포넌트에서만 기본으로 제공했으나 함수형에서도 사용 가능
• 컴포넌트 최상위 레벨에서 useRef호출하여 ref선언
• 매개변수에는 ref객체의 current프로퍼티 초기 설정값이며 초디 렌더링 이후 무시됨
• ref.current를 변경해도 컴포넌트 re-rendering 하지 않음
  - 시각적 출력에 영향을 미치지 않는 정보를 저장하는데 적합
  • 일반 변수는 렌더링할 때마다 초기화 되기 때문에 정보를 저장해야할 때 사용
  • 각각 컴포넌트에 로컬로 저장

함수형 컴포넌트에서 Ref사용

• 함수형 컴포넌트에서 ref를 사용하기 쉽게 만들어주는 Hook으로 useRef()사용 가능
• useRef()는 인자로 초기값을 지정해줄 수 있으며 초기값을 지정해주면 초기화 된 변경 가능한 ref객체를 반환
• ref.current로 객체에 접근 가능

const elemnetRef = useRef(); //import {useRef} from 'react'; 필요

const clickFunc() = {
	elementRef.current.focus()//ref.current로 접근 
}
<element ref = {elemnetRef} onClick=></element>

DOM요소에 접근

• document.querySelector()와 비슷하게 dom요소에 접근
  

//버튼을 누르면 focus되는 효과

import {useRef} from 'react';

export default function UseRef() {
    const input = useRef(); //useRef를 이용해 
    
    return (
        <div>
            <h1>UseRef</h1>
            <input type="text" ref={input} placeholder="useRef연습" />
            <button
                onClick={() => {
                    input.current.focus();
                }}
            >
                FOCUS
            </button>
        </div>
    );
}

로컬변수로 이용

• 랜더링되어도 값이 유지되어야할 때 사용!
• ref의 값이 변경되어도 컴포넌트는 랜더링 되지않으면 랜더링될때 그 값이 보임
• 랜더링 되지않고 값만 변경되는 것을 확인가능
  

import React, { useRef } from 'react';

export default function UseRef() {
    const num = useRef(0);

    return (
        <div>
            <h1>UseRef</h1>
            <span>ref : {num.current} </span>
            <br />

            <button
                onClick={() => {
                    num.current += 1;
                    console.log('현재 ref값 : ', num.current);
                }}
            >
                +
            </button>
        </div>
    );
}

• 랜더링 될 때 값이 업데이트되는 것
  을 볼 수 있음

    const num = useRef(0);
    const [numState, setnumState] = useState(0);

    return (
        <div>
            <h1>UseRef</h1>
            <span>state : {numState} </span>
            <br />
            <span>ref : {num.current} </span>
            <br />

            <button
                onClick={() => {
                    num.current += 1;
                    console.log('현재 ref값 : ', num.current);
                    setnumState(numState + 1);
                }}
            >
                +
            </button>
        </div>
    );