ref
라는 것을 사용한다.ref
를 사용 할 때에는 useRef
라는 Hook 함수를 사용한다.💡 DOM
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
1️⃣ 컴포넌트에 focus를 위치시킬 필요가 있는 경우
2️⃣ 속성 값을 초기화(clear)할 필요가 있는 경우
3️⃣ 애니메이션을 직접적으로 실행시킬 때
4️⃣ 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: "", nickname: "", }); const nameInput = useRef(); const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inputs, // 기존의 input 객체를 복사한 뒤 [name]: value, // name 키를 가진 값을 value 로 설정 }); }; const onReset = () => { setInputs({ name: "", nickname: "", }); nameInput.current.focus(); }; return ( <div> <input name="name" placeholder="이름" onChange={onChange} value={name} ref={nameInput} /> <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} /> <button onClick={onReset}>초기화</button> <div> <b>값: </b> {name} ({nickname}) </div> </div> ); } export default InputSample;
📌 useState
import React, { useState } from "react" function App() { const [name, setName] = useState("") const [currentName, setCurrentName] = useState("") console.log("render") return ( <> <input value={name} onChange={e => setName(e.target.value)} /> <button onClick={() => setCurrentName(name)}>제출</button> <div>나의 이름은 {currentName} 입니다.</div> </> ) } export default App
📌 useRef
import React, { useState, useRef } from "react" function App() { const [currentName, setCurrentName] = useState("") const inputRef = useRef("") console.log("render") return ( <> <input ref={inputRef} /> <button onClick={() => setCurrentName(inputRef.current.value)}>제출</button> <div>나의 이름은 {currentName} 입니다.</div> </> ) } export default App
input에서 setName함수를 실행시켜 해당 state값을 변경할 때마다 일어나던 rendering이 아예 사라졌다.
화면을 처음 받아올 때와 제출 버튼을 눌렀을 때만 rendring이 일어난다는 것을 알 수 있다.
📩 참고 자료