[React] Ref와 DOM

https://reactjs.org/docs/refs-and-the-dom.html

Refs and the DOM – React

 

Ref는 돔의 노드나 혹은 렌더 메소드안에서 생성된 리액트 요소에 접근하는 방법을 제공한다. 

전형적인 리액트의 데이터 흐름에서는 오직 props만이 부모와 자식요소간 상호작용하는 방법이다. 

이 방식에서는 자식요소를 수정은, 새로운 props와 함께 재렌더링하는 방식으로 이뤄진다. 

하지만,   어떤 경우는 어쩔 수 없이 전형적인 데이터흐름과 다르게 자식을 수정해야한다. 

재렌더링할 자식요소는 리액트 요소의 한 인스턴수가 될 수도 있고 또는 DOM요소가 될수도 있다. 

이 두 경우 모두에 대해 리액트는 탈출구를 제공한다.

 

Refs를 사용하는 때

Ref를 사용한 몇가지 좋은 사용예 

• 포커스, 텍스트 선택 또는 미디어 재생을 해야할 때 
• 어쩔 수 없는 애니메이션들의 트리거
• 서드파티의 돔라이브러리와의 통합

선언적으로 수행되는 모든 것들에 ref를 사용하는 것을 피하라 

예를 들어 대화창 요소의 open과 close함수를 드러내는 대신, isOpen이라는 프롭을 넘겨라.

 

Refs를 남용하지 말 것! 

당신은 본능적으로 당신의 앱에서 "어떤 것을 일어나게 하기"위해 ref를 사용할지 모른다. 만약 그런 경우라면, 좀 더 시간을 가지고, 컴포넌트의 계층안에서 상태를 소유해야하는 곳에 대해 비판적으로 생각해본다. 종종 이런 생각들이 계층 내 상위 레벨에 있는 상태의 적절한 위치가 명확해질 수 있다. 

React.createRef() API는 리액트 16.3에 제공된다. 이전 버전의 경우 callback ref를 대신 사용하는 것을 권한다. 

 

ref의 생성 

ref들은 React.createRef()를 사용해 생성되고,  ref속성을 통해 리액트 엘리먼트들에  부여된다.

ref들은 대개 컴포넌트들이 생성될 때 인스턴스 속성값에 할당이 되는데, 이 덕분에 컴포넌트의 전체를 참조할 수 있다.  

 

Ref 접근 

렌더링 과정에서 ref가 요소에 전달될때, 노드에 대한 참조는 ref의 현재 속성에 접근할 수 있다.

ref값은 노드의 타입에 따라 달라진다. 

• ref속성이 HTML요소에 적용된 경우, ref는 생성자에서 React.createRef()로 생성된 ref는 현재 프로퍼티로 DOM요소를 받게 된다. 
• ref속성이 임의로 정의된 클래스 컴포넌트에 적용된다면, ref 객체는 현재 프로퍼티로 컴포넌트에 할당된 인스턴스를 받게 된다. 
• 함수 컴포넌트에 ref 속성을 쓰지 않는데, 왜냐하면 그들은 인스턴스를 갖지 않기 때문이다. (클래스 컴포넌트는 인스턴스를 생성하지만, 함수의 경우 생성자를 통한 인스턴스 생성을 하지 않는다. )

돔 요소에 Ref추가하기

리액트는 컴포넌트가 마운트되거나, 언마운트를 위해 null를 할당할 때 현재 프로퍼티에 돔요소를 할당한다. 

ref의 갱신은 componentDidMount 또는 componentDidUpdate  이 두 라이프사이클 메소드의 실행 전에 일어나게 된다.

 

 

Ref적용후 달라진 코드 전후 비교  habit-tracker프로젝트

https://github.com/amy4229/habit-tracker/commit/db20aef78451e119168e1085ecf7ffd32953aaaa?diff=split 

220603 Improve input태그 입력 방식을 ref방식으로 변경 · amy4229/habit-tracker@db20aef

처음엔 최상단 컴포넌트에 text를 state로 관리해서 input요소에 change 이벤트리스너를 달아서 관리했다. 

그러다 보니 렌더링이 키보드 하나 눌릴때마다 되기도하고, 굳이 입력하는 중간과정을 관리해야하나 싶었다. 

리액트가 아무리 컴포넌트 위주라지만, 이렇게 빈번히 쓰이는 요소들을 굳이 그 요소의 이벤트 하나하나에 변화에 주목을 해야하나 싶었다. 

근데 ref방식을 적용하니, 간단하게 돔요소의 밸류를 가지고 와서 전달하는 것이 가능했다. 

입력을 받을 때가 아니라 버튼을 누르는 순간 인풋태그의 속성을 참조할 수 있게 된 것이다.