[React] DOM을 꼭 사용해야 하는 상황

앞 예제에서는 state를 사용하여 우리에게 필요한 기능을 구현했다.

❓🤔 가끔 state만으로 해결할 수 없는 기능이 있다. 어떤 상황에서 그럴까?

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기 등

이때는 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데, 이를 위해 바로 ref를 사용한다!

단, 먼저 ref를 사용하지 않고 기능 구현이 가능한지 고려한 후 활용할 것을 권장한다.

👉 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용하는 건 잘못된 사용이기 때문이다. (물론 할 수는 있음;;)

컴포넌트에 ref를 달고 그 ref를 다른 컴포넌트로 전달하고 …… 다른 컴포넌트에서 ref로 전달받은 컴포넌트의 메서드를 실행하고 ……

스파게티 코드가 될 가능성이 다분하다. 특히 앱 규모가 커지면 더욱 꼬여 버려서 유지 보수가 불가능해진다.

따라서 데이터를 교류할 때는 언제나 데이터를 부모 ↔ 자식 흐름으로 교류해야 한다. 이는 추후 리덕스, Context API를 사용해 교류할 수 있다.