항해99 3주차 -2

과제) 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다.
domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

 

리액트에서는 가상돔 개념이 있다. 
특정 페이지에서 데이터가 변했다고 가정했을 때 
1.변화된 버전을 가상돔으로 바꾼다.
2.가상돔끼리 비교한다.
3.바뀐 부분만 적용한다.(바뀐 부분만 실제 돔에 적용)

 

getElementsByClassName등은 진짜돔을 건드리게 된다.

만약 가짜돔에서 input요소를 만들었는데 진짜돔에 업데이트를 안한 상태라고 가정해보면, 

진짜돔에 적용되는 getElementsByClassName를 사용해도 input값은 찾을 수 없을 것이고 오류가 나게된다.

 

+react 페이지에서 설명하는 ref

일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다.

Ref를 사용해야 할 때

Ref의 바람직한 사용 사례는 다음과 같습니다.

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.

예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.

 

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

Ref와 DOM – React

참고하기

 

****

일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우가 어떤 것인지 이해가 잘 안된다. 이부분을 더 공부해보자!