useState와 useRef를 사용하는 input 내부의 값 관리
useState로 하면 많은 값을 같이 불변성을 지키면서 눈으로 즉각 보며 관리를 할 수 있어서 좋고
useRef는 그 부분의 값을 저장하고 해당 부분을 콕 짚어서 제어할 수 있어서 좋아서
같이 필요한 곳에 쓰믄 좋은 것 같아.
input값의 변화를 ref로 다룬다면 이렇게 가독성은 떨어지는 것 같아.
const test = () => {
const inputOneRef=useRef(Number)
const inputTwoRef=useRef(function(){})
const inpuThreetRef=useRef(String)
const inputfiveRef=useRef(boolean)
const inputfiveRef=useRef()
const inputSevenRef=useRef()
return(
<>
<input ref={inputOneRef}>
<input ref={inputTwoRef}>
<input ref={inpuThreetRef}>
<input ref={inputfiveRef}>
<input ref={inputfiveRef}>
<input ref={inputSevenRef}>
</>
)
}
둘의 차이는
useState는 변하는 state값을 리렌더링을 통해 화면에 즉각 보여주지만,
useRef같은 경우는 useEffect같은 콜백함수를 쓰지 않는 이상 값의 변화를 react가 트래킹할 수 없어서 즉각 화면에 보여지지 않아.
만약 보여진다면 useState를 썼을 때 리렌더링 됐을 때 변화를 한 꺼번에 모아서 반영이 되는그징.
const Contrast = () => {
const [count, setCount]=useState(0)
//ref 변화를 보고싶으면 이걸 써야함, 혹은 state값을 넣어 같이 변화시켜주거나 state값이 렌더링될 때 같이 변행
useEffect(() => {
inputRef.current = inputRef.current + 1
},[inputRef.current])
return (
<p>{count}</p>
<button onClick=((e) => setValue(count + 1) ) />
<button onClick=((e) => inputRef.current = inputRef.current + 1;
console.log(inputRef.current);/>
)
}
export default Contrast;
무엇이 더 효율적일까? 어떤 방법이 맞는 것일까? 왜 일까?
효율적인 면에선 useState이 불변성을 지키거나 많은 값들을 관리할 때 좋은 것 같아. 화면에 렌더링 즉각되기도 해서 좋은 것 같고. 가독성에선 좀 떨어질 수 있지만 state 관리하는 커스텀 훅처럼 관리하면 가독성이 많이 좋아지는 것 같아.
이런 input값 관리하는 훅이 있으면 좋을 거구 이외에 react-hook-form같은 걸 이용하면 더 좋을 거구.
import { useCallback, useState } from "react";
const useInputs = (initialForm) => {
const [form, setForm] = useState(initialForm);
//onChange
const onChange = useCallback((e) => {
const { name, value } = e.target;
setForm((preForm) => ({ ...preForm, [name]: value }));
}, []);
const reset = useCallback(() => setForm(initialForm), [initialForm]);
return [form, setForm, onChange, reset];
};
export default useInputs;
// 출처 : 벨로퍼트님 리액트 블로그
ref같은 경우는 사용하기 간편할 수 있지만 많은 값들을 지정하고 저장할 때 가독성이 별로거나 유지보수가 어려운 것 같아. 화면에 나타낼 땐 다른 함수를 써줘야 즉각 나타나고. 렌더링해야 적용되는 게 아니라면 값을 저장하고 지정할 때 쓰면 효율적일 것 같아.
그 외에, 아래처럼 공식 문서에서도 필요할 때 아니면 선언적으로 해결하고 ref를 지양하라고 권장하고 있어.
Ref를 사용해야 할 때
Ref의 바람직한 사용 사례!
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양.
참고
https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs
'개발일지' 카테고리의 다른 글
[TIL] 24_0202 필터 오류 (0) | 2024.02.02 |
---|---|
[TIL] 24_0201 Redux Ducks Pattern (0) | 2024.02.01 |
[TIL] 23_0130 Redux -Action Value Creator (0) | 2024.01.30 |
[TIL] 24_0129 useDispatch의 역할 (2) | 2024.01.29 |
[TIL] 24_0128 리덕스 세팅하면서 useSelector로 state확인하며 경고발생 (0) | 2024.01.28 |