리액트 forwardRef 좀..정리

forwardRef란?

-> 상위 컴포넌트에서 전달받은 Ref를 하위 컴포넌트로 전달하는 역할

 

-> 의문 : 리액트에서는 원래 부모에서 자식으로 props를 넘겨주는데 굳이 Ref까지 사용을 해야하나? 라는 생각이 들음

그래서 찾아봄

 

props는 데이터 전달에 사용:

• props는 컴포넌트에 데이터를 전달하기 위한 수단.
  자식 컴포넌트는 전달받은 props를 이용해서 UI를 렌더링하거나 동작을 결정함.
  컴포넌트의 로직이나 상태에 영향을 주고, 주로 데이터나 함수 전달에 사용됨

ref는 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 때 사용:

• ref는 주로 자식 컴포넌트의 DOM 요소나 컴포넌트 인스턴스에 직접 접근하기 위해 사용됨.
  props로는 DOM이나 특정 요소에 대한 직접적인 접근 권한을 줄 수 없기 때문에,
  ref가 필요. ref는 상태나 데이터를 전달하는 게 아니라, 특정 DOM에 접근하거나 제어하는 역할을 함.

—> 리액트의 상태와 무관한 부분을 제어함 

 

—> 의문: 위의 내용은 이해가 갔어.. 그럼 dom요소나 컴포넌트 인스턴스에 직접 접근하는 상황은 뭐지?

예로 dom 관련기능 -> focus(), open(), value, scroll등등을 직접 제어할 수 있음

 

그래서.. 언제 사용하는건데..?

—> 주로 사용자 경험을 향상시키기 위해 입력 필드에 포커스를 맞추거나, 값을 변경하거나, 텍스트를 선택하는 등의 동작을 할 때 사용