ref의 사용법보다는, 공식문서에서 설명하는 ref에 대한 관점 위주로 설명하고 있습니다
리액트에서 DOM 조작하기
가끔 리액트에서도 DOM을 직접 조작하고 싶은 일이 있는데, 이럴 때 ref 를 사용할 수 있다
Ex) Input focus , 페이지에서 특정 위치로 스크롤해주기 , 사이즈 측정 등등
ref는 escape hatch
리액트 공식문서에서는 ref를 escape hatch 라는 용어로 설명하고 있다
Escape hatch는 보통 긴급한 상황에서 사용되는 비유적인 표현으로, 어떤 상황에서 벗어나거나 대처할 수 있는 마지노선이나 방법을 가리킵니다. 이 용어는 주로 문제나 어려운 상황을 해결하기 위한 간편하고 효과적인 대안을 나타냅니다.
예를 들어, 소프트웨어 개발에서 "escape hatch"는 어떤 프레임워크나 시스템에서 벗어나서 특정한 문제를 해결하기 위한 특수한 기능이나 메커니즘을 가리킬 수 있습니다. 이는 보통 예상치 못한 문제에 대처하거나 특별한 요구사항을 충족시키기 위한 수단으로 사용됩니다.
여기에 덧붙여서, 사용을 최소화하라는 설명을 덧붙인다
Warning : function components cannot be given refs
자식 컴포넌트로 ref를 전달했을 때 나오는 warning이다. forwardRef 를 사용하면 해결되는 문제이지만, 왜 이러한 오류가 발생하게 설계했을까?
React does not let a component access the DOM nodes of other components. Not even for its own children
리액트에서는 다른 컴포넌트의 DOM(자식 컴포넌트 포함)에 접근해서 조작하는 것을 허용하지 않는다고 설명하고 있다
요악하자면 ref 로 DOM 조작은 최소화 하고, ref 를 전달하는 일도 최소화 해야 한다
-
컴포넌트로 분리하는 가장 큰 이유는, 특정 일에만 집중하기 위해서이다(SRP)
컴포넌트가 하는 일을 줄여서 가장 최소한의 일만 하게끔, 본인이 맡은 렌더링만 책임지게 하기 위해서이다
다른 컴포넌트의 DOM에 접근하게 되면 현재 컴포넌트의 일 + 다른 컴포넌트의 일(DOM 조작)까지 해결해야 하고, 조작당하는 컴포넌트의 입장에서는 본인이 해야 하는 일을 다른 컴포넌트에서 하고 있기 때문에 책임 소재가 불분명해진다는 문제점이 생긴다 -
리액트는 가상 돔을 이용하여 실제 DOM 조작을 최소하하는데, 직접 DOM을 조작하는 행위가 많아지게 되면 리액트를 사용하는 의미가 없어진다
