React에서 ref를 사용하는 경우

컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref라는 것을 사용한다.

 

ref란 본래 html과 css, js를 쓸때 id값을 주고 그 DOM에 직접 접근해서 스타일을 바꿔주거나, 이벤트를 처리시키던 것을

 

리액트 스타일대로 해주는 것이라고 생각하면 편하다.

 

리액트는 재사용성이 중요하기 때문에, 리액트 컴포넌트에 id 값을 주면 동일한 아이디가 존재할 가능성이 생기므로 id값은 사용하지 않는게 좋고, 만약 사용해야 한다면 반드시 겹치지 않게 신경써서 짜야한다.

 

ref를 써야하는 경우는 당연히 특정 input이나 box를 기준으로 효과를 주고자 할때, this를 활용해서 ref를 입혀주고 나중에 부모 컴포넌트에서 그 ref를 활용해서 해당하는 ref를 가진 자식 컴포넌트를 조작할수 있다.

 

컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 < - > 자식 흐름으로 교류하고자 하는게 리액트의 사상이다.

 

원본을 항상 가능한한 유지하면서 변화값만 추적하는게 리액트의 사상이니

 

스파게티처럼 서로 엮여있는 것 보다는 부모 - 자식. state와 props, 그리고 ref 정도만 가능하면 활용해서 기존 VirtualDOM을 사용하지 않고, 직접 DOM을 변형하던 시절에 구현했던 기능들을 구현하는게 더 좋겠다.

 

모듈화가 가능하고 재사용이 용이하다는 장점을 살리기위해서, 리액트 코드는 최대한 스파게티가 되지 않도록 해줘야 좋을 것 같다.