📚 Reference

• 공식 문서 1
• 공식 문서 2
• 공식 문서 3
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4
• 참고 자료 5
• 참고 자료 6: forwardRef, ref

📜 Chapter

useState

useRef

forwardRef

Class component

Function component

‣

‣

ref

• ref
• React 19부터 ref를 Prop으로 받을 수 있다. React 18 또는 그 이전 버전에서는 ref를 받기 위해 forwardRef를 사용해야 한다.
• React는 렌더링 출력과 일치하도록 DOM을 자동으로 업데이트하므로 구성 요소가 DOM을 자주 조작할 필요가 없다.
• 그러나 때로는 노드에 초점을 맞추거나 스크롤하거나 크기와 위치를 측정하기 위해 React에서 관리하는 DOM 요소에 액세스해야 할 수도 있다.
• React에는 이러한 작업을 수행할 수 있는 기본 제공 방법이 없으므로 DOM 노드에 대한 참조가 필요하다.
• Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.
• 일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단이다.
• 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 한다.
• 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있다.
• 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있다. React는 두 경우 모두를 위한 해결책을 제공한다.

사용

• 일반적인 데이터 흐름 외에 자식을 수정해야 할 때 사용한다.