React Ref current 문제 해결하기

타이틀: “React ref current is NULL” 문제 해결하기

소개

React는 상호작용적인 사용자 인터페이스를 만들기 위해 사용되는 인기있는 JavaScript 라이브러리입니다. 여러 기능 중 하나로 DOM 요소나 React 컴포넌트에 접근할 수 있는 “refs”를 만들고 관리하는 기능이 있습니다. 그러나 “React ref current is NULL” 오류와 같이 refs에 문제가 있는 경우가 있을 수 있습니다.

문제점

일부 경우에는 current 속성을 사용하여 ref 값을 가져오려고 할 때 null 값이 반환될 수 있습니다. 이는 당혹스럽고 DOM 요소에서 필요한 작업을 수행하는 것을 방해할 수 있습니다.

원인 파악하기

제공된 코드 예제에서는 React.createRef() 메서드를 사용하여 ref를 만들고, focusTextInput 메서드 내에서 해당 ref에 접근하려고 합니다.

focusTextInput() {
  // "current"를 사용하여 DOM 노드에 접근하여 텍스트 입력란에 집중합니다.
  console.log(this.textInput);
}

여기서 문제는 코드 자체가 아니라 사용 중인 react-dom 패키지의 버전입니다. React.createRef() API는 React 16.3에서 도입되었으므로 이 기능을 사용하려면 react와 react-dom 버전 모두가 16.3 이상이어야 합니다.

여기서 사용하는 react-dom 버전은 16.2.0이며, 이는 refs의 current 속성을 지원하지 않습니다. 따라서 focusTextInput 메서드 내에서 this.textInput에 접근하려고 하면 "current: null"이 기록됩니다.

해결책

이 문제를 해결하려면 react-dom 패키지를 React.createRef() API를 지원하는 버전으로 업데이트해야 합니다. 제공된 코드에서는 react-dom 버전을 적어도 16.3으로 업데이트해야 합니다. 이를 위해 package.json 파일을 수정하세요:

"dependencies": {
  "react": "16.6.3",
  "react-dom": "16.6.3"
},

버전을 업데이트한 후에는 ref의 current 속성에 접근할 수 있으며, DOM 요소를 성공적으로 조작할 수 있습니다.

예시 데모

CodeSandbox에서 필요한 패키지 업데이트된 코드 버전을 제공했습니다. 여기에서 확인할 수 있습니다.

결론

“React ref current is NULL” 문제가 발생할 때는 React.createRef() 사용에 호환되는 react-dom 버전을 사용하는 것이 중요합니다. 적절한 버전으로 패키지를 업데이트하면 이 문제를 해결하고 React에서 refs를 사용하여 DOM 요소에 접근하고 조작할 수 있습니다.

항상 React와 관련 패키지의 최신 버전을 유지하여 최신 기능과 버그 수정을 활용하는 것을 기억하세요.

참고 자료 : 

reactjs