[스터디-우아한반상회] useRef

rladpwl0512·2022년 5월 15일
1
post-thumbnail

이번주는 React에 내장 된 Hook API 중, useRef에 대해서 공부해봤다.
useRef를 다루기 전에, Hook에 대해서 한번 정리하고, useRef에 대해서 살펴보자.

Hook


Hook이란?

Hook은 React 16.8 버전부터 React에 새로 추가 된 요소이다. Hook을 사용하기 이전에는, Class형 코드를 작성했다. Class형 코드에는 다양한 문제가 있었기 때문에, React팀은 Hook을 통해 문제를 해결하고자 했다. 그렇다고 해서 Class형과 완전 다른 개념이 아니다. Hook은 Class형 코드에서 사용하던 코드들을 더 쉽게 사용할 수 있도록 직관적인 API를 제공한다.

Hook이 해결한 문제

  • 컴포넌트 사이에서 상태 로직을 공유하기 더 좋아졌다
  • 생명주기 기반으로 메서드를 쪼개는 것 보다, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나눈다.
    Class 컴포넌트에서는 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount...)를 사용했다. 각 생명주기 메서드에는 관련 없는 로직이 섞여들어가곤 했다. 따라서, 이러한 문제를 해결하기 위해 생명주기 메서드를 기반으로 쪼개는 것보다, Hook의 useEffect를 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용한다.
  • Class형은 사람과 기계를 혼동시킨다. Hook은 Class없이 React의 기능을 사용하는 방법을 제공한다.

useRef


Hook API 중 하나인, useRef에 대해서 알아보자.

useRef란?

const refContainer = useRef(initialValue);

useRef.current 프로퍼티로 전달된 initialValue 인자로 초기화 된, 변경 가능한 ref 객체를 반환한다.

useRef의 사용

특정 DOM을 선택 및 조작하고 싶을 때

Javascript에서는 특정 dom을 선택하고 싶을 때 querySelector, getElementById와 같은 dom selector 함수를 사용해서 dom을 선택했다.
리액트에서도, dom요소를 선택해야하는 상황이 발생할 때가 있다. (특정 엘리먼트의 크기를 가져와야할 때, 포커스를 설정해줘야할 때, 특정 dom에 라이브러리를 사용해야할 때 ...)
그럴 때, react에서는 ref를 사용한다. 클래스형 컴포넌트에서는 React.createRef를 사용하고, 함수형 컴포넌트에서는 useRef라는 hook을 사용한다.
예제 코드를 통해, 버튼을 클릭했을 때 input dom 요소에 포커스가 잡히도록 만들어보자.

컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하고 싶을 때 (리렌더링 X)

  • useRef로 컴포넌트 안의 변수를 만들 수 있다.
    이때, useRef로 만든 변수의 값이 바뀌어도 useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 따라서 값이 바뀌어도 렌더링이 불필요해서 막고싶을 때 useRef를 사용해서 관리해준다.
  • setState하면 return이 다시 실행된다.
    하지만, useRef를 써서 값을 변경하면 return이 다시 실행되지 않는다.
    즉, useRef는 불필요한 렌더링을 막아서, 성능 최적화에 사용되기도 한다.
    useRef는 dom을 조작하고 싶을 때도 쓸 수 있지만, 값이 바뀌어도 렌더링이 불필요해서 막고싶을 때도 useRef를 사용해서 관리해준다. 즉, 상태로 관리할 필요가 없는 변수는 useRef로 관리할 수 있다.

  • 리액트에서 상태는, 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후에 업데이트 된 상태를 조회할 수 있지만 useRef로 관리하는 변수는 설정 후 바로 조회할 수 있다.

  • 리렌더링 예제 코드

  • useRef의 사용 예제 코드

+) 예제 코드에 더해, setTimeout, setInterval을 통해서 만들어진 id를 useRef를 통해 관리하고, clear 할때에도 사용된다. 이를 통해 메모리를 확보할 수 있다.

✅ 질문

  • 전역 변수로 관리하는 것과 무슨 차이인가? 굳이 useRef를 사용해서 관리하는 이유?

참고

profile
내가 짱이다 😎 매일 조금씩 성장하기🌱

0개의 댓글