5. Dom Name

HTML은 id를 이용
Ex)

React Comonent에서는 id값을 이용할 경우 DOM 렌더링시 충돌이 일어 날 수 있어서 ref를 이용

 

ref
- DOM을 직접 접근 할 시 사용
  포커스 등
- props 설정과 동일하게 처리
- 콜백 함수 전달
- 컴포넌트 상에 ref 이용 가능, 외부에서 접근 시 사용

Ex)

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

 

컴포넌트 내부 메서드
Component를 extends 받은 컴포넌트 내부에 구현
Ex)ScollBox
const { scrollheight, clientHeight} = this.box;
메서드명 = () =>{
this.box.sctollTop = scrollheight - clientHeight;
}

ref 연결 후 내부 메서드 사용

<div>
<ScrollBox ref={(ref)=>this.scrollBox=ref}/>
<button onClick={()=>this.scrollBox.메서드명()}>클릭</button>

</div>