js로 작성한 코드들을 ts로 변화시키는 작업을 하고 있다.
useRef는 js나 ts나 큰 변화는 없다. 우리는 이번 포스팅을 통해 보다 똑똑하게 useRef를 사용해보도록 하자.
useRef란?
간단하게 useRef가 무엇인지부터 짚고 넘어가보자.
useRef는 꽤 많은 상황에서 쓰인다.
컴포넌트에서의 어떠한 DOM을 선택해야 할 때 쓰이기도 하고,
컴포넌트 내부에서 다룰 수 있는 변수를 만들어야 할 때에도 쓰인다.
전자의 경우는 예를 들어 특정 input, textarea 등의 태그에 focus를 줘야하는 경우에 쓰이고, 후자의 경우는 setState로 다루지 않는 변수들 (예를 들면 비동기 처리를 할 때 쓰이는 setTimeOut, setInterval에서 id를 담아 중복클릭을 방지할 때 쓰이는 경우가 있겠다)을 담을 때 쓰일 수 있겠다.
typescript에서 useRef를 쓸 때는 Optional Chaining을 이용하자!
대부분의 사람들은 optional chaining을 이용하여 useRef를 다루고 있을 듯 하긴 하지만,
아직 최신 문법에 익숙하지 않거나, 혹은 초보자라면 옵셔널 체이닝에 대해 무엇인지 모를 확률이 높다고 생각한다.
대략 요약하자면 JAVA에서의 Optional 타입과 유사한 문법인데,
`?.` 키워드 앞의 변수가 null이거나 undefined이면 더 이상 진행하지 않고 undefined를 반환해주는 기술이다.
공식 문서를 통해 옵셔널 체이닝에 대해 익혀보고 오자!
https://ko.javascript.info/optional-chaining
옵셔널 체이닝 '?.'
ko.javascript.info
아래와 같이 useRef를 초기화해주었다고 해보자.
const authorInput = useRef<HTMLInputElement>(null);
const contentInput = useRef<HTMLTextAreaElement>(null);각각 작성자 칸, 내용 칸에 대한 DOM을 변수에 담은 것이다.
초기값은 null로 해주었다.
이러한 DOM에 접근하고 싶다면 authorInput.current, contentInput.current로 이동하면 될 것이다.
그러나 한 가지 문제점이 존재한다.
null인 상태에서 current로 접근하려 하면 당연히 에러가 발생할 것이다.
따라서 null check를 위해 아래와 같이 코드를 작성해야 한다.
if (authorInput.current !== null) {
authorInput.current.focus();
}만약 null check를 하지 않으면 아래와 같이 에러가 발생한다.
그런데 이러한 null check를 optional chaining을 이용하면 훨씬 간단하게 처리할 수 있다!
authorInput.current?.focus();코드가 3줄에서 1줄로,
indent도 1에서 0으로 줄은 것을 확인할 수 있다.
가독성과 생산성도 향상된 것을 볼 수 있다.
주의할 점은 authorInput.current가 null이 될 일이 없는 경우에는 ?. 문법 사용을 자제해야 한다.
?. 문법을 남용한다면 디버깅 과정에서 에러를 신속하게 발견하지 못할 확률이 높다.
타입스크립트는 양날의 검에 해당되는 무기같은 존재라 생각된다.
잘 다룰 줄 알면 어플 의문사도 막아주고, 생산성도 증가시켜주지만,
잘 다루지 못한다면 오히려 스트레스받고 엄밀한 타입체크에 고통받게 되는 느낌.
이러한 면에서 개발자는 꾸준히 배우는 것에 익숙해지고 즐길 수 있어야 계속 성장할 수 있다고 생각한다.