[JavaScript] React - useRef 특정 DOM 선택

React

useRef를 사용한 특정 DOM 선택

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리엑트에서도 DOM을 선택해야될 때가 있는데 이때, 리액트에서는 ref 라는 것을 사용합니다.

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 됩니다.

import React from 'react';			//<App.js>
import InputSample1 from './InputSample1';

function App() {
  return (
    <div>
      <InputSample1 />
    </div>
  );
}
export default App;

    //useState와 useRef를 사용하기 위하여 import
import React, { useState , useRef} from 'react'  

function InputSample1() {
    //갹채를 업데이트하기위해 useState안에 객체를 사용
    const [inputs, setInputs] = useState({  
        name: '',
        nickname: '',
    })
    //값을 가져오기 위해 inputs에 name으로 가져왔다
    const { name, nickname } = inputs   

    const onChange = (e) => {
       //input에 name을 가진 요소의 value에 이벤트를 걸었다
    const { name, value } = e.target   

   // 변수를 만들어 이벤트가 발생했을때의 value를 넣어줬다
    const nextInputs = {            
   //스프레드 문법으로 기존의 객체를 복사한다.
            ...inputs,  
            [name]: value,
        }
   //만든 변수를 seInput으로 변경해준다.
        setInputs(nextInputs)       

    }
   //안의 값을 초기화하는 객체를 변수에 넣었다
    const onReset = () => {
        const resetInputs = {       
            name: '',
            nickname: '',
        }
   //초기화 객체값을 넣은 변수로 변경하도록 셋인풋 실행
        setInputs(resetInputs)    
   //current가 돔을 가르킨다. 그리고 돔API focus를 사용  
      nameInput.current.focus()    
    }

    return (
        <div>
            <input         
                name="name"      //위에서 name의 값을 가져와 타겟을 가져온다.
                placeholder="이름"
                onChange={onChange}
                value={name}     //가져온 타겟의 벨류값을 변경할때 사용한다.
            />
            <input
                name="nickname"  //위에서 nickname의 값을 가져와 
              			 //타겟을 가져온다.
                placeholder="닉네임"
                onChange={onChange}
                value={nickname} //가져온 타겟의 벨류값을 변경할때 사용한다.
            />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name}:({nickname})
            </div>
        </div>
    )
}

export default InputSample1

이번 블로그에서 가장 기억해야 할 점은 nextId.current 값이 변경된다고 해서 컴포넌트가 리렌더링 되지 않는다는 점을 꼭 기억해주세요!! (불필요한 렌더링은 좋지 않습니다!)