리액트 고수님들 useRef 사용에 대해 질문드립니다.

Question

코딩을하다 useEffect 를 쓰면 그냥 let 변수에 담은 값들은 다 날라가 버리더라구요? 그래서 찾아보니 let a = useRef() 안에 값을 넣으면 useEffect를 써도 값이 날아가지 않던데 실무에서는 어떤식으로 쓰는지 궁금합니다. 1. 일단 useRef를 사용해 변수를 만들어 데이터를 유지해주고 그후 렌더 하고싶으면 useState를 만들어서 useRef의 값을 useState값에 넣어주는식으로 하나요??예를들어 let a = useRef(0)const [Item , setItem] = useState(0)const onClick= () => {a += 1setItem(a) }

{item}

------------------------이런식으로요??----------------------------2. 맨처음 db에 담아주는 model ? 은 무조건 useRef() 로 만들어주며 그 후 그냥 let 을 사용하던 const를 사용하던 상관없는거 같은데이런식으로 만드나요?? 실무에서 어떻게 쓰는지 궁금하며 좋은코드가 먼지 고민하게 만드네요 ㅠㅠ

초보자1212 · Answer

1. a &#61; useRef 로 담으면 a.current 로 접근하셔야 제대로된 값에 접근이 가능합니다2. 뭐가 좋다라고 말씀드리기 어렵습니다정말로 말하기 힘들어요useRef 는 리렌더링에서 제외하고 싶은 경우에 사용이 가능합니다만 useXXX 류의 것들은 전부 리액트가 내부적으로 관리합니다useRef 역시 { current: T } 형식의 객체일 뿐이지만 리액트가 추적하고 관리하죠렌더링에서 제외시키려고 전부 다 useRef 로 하는게 안티패턴이 될 수 있다는 뜻입니다상황에 맞게. 적소에 필요한 것을 알맞게 필요한 형태로만 사용하시는게 제일 좋습니다

얍얍얍 · Answer

&#64;초보자1212 감사합니다. 말씀대로 그때그때 알맞게 사용해야할거 같네요 ㅎ...

초보자1212 · Answer

그 외에도 성능 개선을위해서 useMemo, useCallback 을 적절히 사용하는 경우도 있습니다 !

moonti · Answer

값이 바뀔때 업데이트 해주고 싶으면 useStateref로 돔에 직접 접근하거나 바로 업데이트 하지 않는 상태값 useRef

리액트 고수님들 useRef 사용에 대해 질문드립니다.

4개의 답변

#useref 목록