ref : Naming DOM object

<div id='div1'>division</div>

vanilla javascript에서는
개별 div등 unique한 식별자를 부여하기 위해 id라는 속성을 사용했다.

그러나 react에서는 id라는 속성을 사용하면 문제가 발생할 여지가 있다.

props을 달리 부여하여 생성한 복수의 동일 Component가 한 페이지에 같이 render되는 경우가 이에 해당한다.

그 결과, 동일한 id를 갖는 div들이 render의 결과로 생성되게 되고,
의도하던 unique한 식별&조작을 하지 못하게 된다.

반면 ref는 전역이 아니라, 컴포넌트 내부에서만 작동하기 때문에 unique한 식별 및 조작이 가능하다.

Dom객체에 ref를 부여하는 방법은 두가지가 있다.

<input ref = {(ref)=>{this.input1 = ref}}/>

첫번째는 위와 같이 ref라는 속성을 이용해 콜백함수로 부여할 수 있다.

input1 = React.creatRef();
<input ref = {this.input1}/>

두번째는 콜백함수가 아닌, 생성한 ref를 지정하는 방식이다.

import {useRef} from 'react'
const input1 = useRef(null);
<input ref = {this.input1}/>

세번째는 함수형 컴포넌트에서 hook을 이용한 방법이다.

이후

eventHandler = ()={
this.input1.current.focus()}

노드에 대한 참조에 ref의 ‘current’ 어트리뷰트로

‘마운트된’ 컴포넌트의 인스턴스를 받는다.

그리고 태그 뿐만 아니라,
컴포넌트 단위로도 ref를 부여할 수 있다.

<ComponentA ref={(ref)=>{this.CompoA = ref}} />
<Button onClick={()=>{this.CompoA.scrollDown()}}>
  스크롤 아래로
</Button>

버튼에 온클릭 이벤트를 부여할 때,

onclick = {this.CompoA.scrollDown}

형식으로 작성을 하게 되면, 컴포넌트가 최초 렌더링 될 시,

CompoA가 undefined이므로, 오류가 발생한다.

따라서 이미 CompoA가 렌더링 된 시점에 클릭하는 시점에 익명함수내부의 값을 호출하기 때문에 에러를 방지할 수 있다.

! 함수형 컴포넌트에서 ref어트리뷰트를 사용하지 말 것,
왜냐하면 인스턴스를 가지고 있지 않기 때문이다.

컴포넌트끼리 교류할 때, prop이 아닌 ref를 통해 데이터를 주고받지 말 것.
react기본 철학을 거스르게 되어, 구조가 지저분해진다.
필요에 따라 redux 혹은 ContextAPI를 사용하는 방식을 사용…