Udemy - React완벽가이드

"ref"로 작업하기

Hanachoi 2023. 5. 14. 14:21
  • ref는 참조를 뜻한다. reference의 줄임말.
  • ref의 가장 기보넉인 기능은 다른 DOM요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다. 
  • 연습프로젝트에서 했던 코드를 보면, 우리는 form을 가지고 있었고 <input>요소를 가지고 있었다. 사용자가 값을 입력할 때마다 state로 만든 set 함수가 값을 변경시켜 줬다. 이 말인 즉슨 사용자가 키를 누를 때 마다 업데이트하고 그것을 state에 저장하고 그 state를 인풋에 다시 피드해준다. 그리고 나중에 그 state를 사용해 input을 재설정하고 데이터가 필요한 곳으로 보내준다. 
  • 하지만 우리는 form을 제출할때만 업데이트가 필요하다. 하지만 키가 입력될때 마다 state가 업데이트되고 있는건 불필요한 동작이다.
  • 이때 사용해야 하는게 ref!
  • 마지막에 랜더링되는 HTML 요소와 다른 자바스크립트의 코드를 연결해 활용가능하다.
  • useRef 훅을 사용하면 된다. 이것도 역시 훅이라 함수형 컴포넌트에서만 활용 가능

  • useRef는 초기화하려는 기본값이 필요하다. 아무것도 설정하지 않으면 기본값이 초기값이 된다.

  • 이제 ref를 사용하고 싶은 곳에 가서 ref props를 사용해준다. 이것도 하나의 내장프롭이기 때문에 사용하고 싶은 HTML 태그에 가서 사용을 해주면 된다. 
  • nameInputRef는 현재 첫번째 ref를 저장하는 상수이다. 

  • 이제 이 컴포넌트가 랜더링 될때 ref를 랜더링해 이 ref 안에 있는게 나중에 실제 DOM 요소가 될 것이다. 
  • age부분도 똑같이 ref를 넣어준다

  • 이렇게 만든 ref 상수를 console.log로 찍어보면 객체가 출력된다

  • 이렇게 useRef로 만든 얘는 항상 객체가 된다. 항상 current 프롭을 가지고 있다. current 프롭은 그 ref가 연결된 실제값을 가진다. 
  • 우리가 useRef()를 만들때 초기값을 지정하진 않았지만 코드가 실행되자마자 ref 프롭때문에 nameInputRef로 연결된다. 
  • 이 객체에 저장된건 실제의 DOM 노드이다. 그래서 조작하거나 다른 여러가지 작업이 가능하다. 하지만 작업하지 않는게 좋음.
  • 이제 current 객체가 들어오는걸 알았으니 이 current객체안에 저장된 값을 볼 수 있다. 

  • 이제 우리는 사용자가 입력하는 값을 확인할 수 있게 된다

  • 이제 기존에 state로 값을 받아오던 부분을 모두 ref의 값을 받도록 새로만든 이 변수들로 바꿔주면 된다. 그리고 원래 쓰던 set함수들과 관련 props들을 지워준다 
  • 하지만 이렇게 값을 바꿔주면 원래 우리가 초기에 설정했던 form에서 버튼을 누르면 input창을 지워주던 기능이 사라져버린다. 이걸 수정하기 위해서 DOM을 직접적으로 조작하는 방법도 있다.원래는 직접적으로 조작하면 안된다고 했지만 사용자가 입력한 값을 재설정하려는 경우에는 간간히 사용되기도 한다.

  • 값만 빠르게 읽고 다른 변화가 필요없다면 state를 사용할 필요가 없다. 그때 ref를 써주면 된다.