State VS Ref

State(상태)

- 컴포넌트의 내부 데이터를 나타낸다.

 

- 업데이트 함수를 통해 변화가 이루어졌을 때 컴포넌트들의 재실행을 야기한다.

=> UI에 바로 반영되어야 하는 값들이 있을 때 사용한다.

=> 시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들을 갖고 있을 경우에는 상태를 사용하지 말아야 한다.

 

Ref(참조)

- 리액트 요소에 대한 참조를 나타낸다.

 

- 컴포넌트들이 재실행되게 하지 않는다.

=> 리액트의 렌더링 주기와는 관련 없는 데이터를 관리할 수 있다. (DOM 조작이나 애니메이션, 포커스 관리 등)

=> DOM 요소에 직접적인 접근이 필요할 때 혹은 외부 라이브러리를 통해 관리하기 어려운 상태를 관리할 때 사용한다.