온보딩 과제중 만난 에러

온보딩에 지원하기 위해 과제를 만들던 중에 'TypeError: Cannot read properties of null (reading 'style')' 라는 에러를 만나게 되었다. 토글이나 탭을 만들면서 css를 조건에 맞춰 바꾸기 위해 document.getElementById을 이용해서 바꾸려고 했지만 이 과정중에서 첫 렌더링때에 토글이 사용이 안되고 한번 렌더링 후 다시 저장하였을때만 작동하는 것을 발견하였다.

해결 과정

해결은 사실 간단하였다 HTML을 먼저 랜더링하고 자바스크립트를 가져오면 되는것이었다. 하지만 나는 지금 리액트를 이용하여 만들고 있기 때문에 그것보다는 useRef를 사용해 보기로 하였다.

useRef?

useRef란 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환해준다. 이 객체에는 일반 변수뿐 아니라 DOM을 담을 수도 있다. 변환된 객체는 컴포넌트의 전 life cycle을 통해서 유지된다. .current의 프로퍼티를 변경하더라도 리렌더링이 발생되지 않는다. ref 객체 안의 값은 리액트 생명주기에 독립적이기 때문에 리렌더를 발생시키지 않을 뿐더러 리렌더 되더라도 값이 유지된다. 라고 하지만 아직은 '리액트에서 dom을 사용하기 위한것' 정도로 생각하고 다음에 다시 정리 해보도록 하겠습니다.