ref: DOM

[ref:DOM 이란?]

jquey에서

jquey

이런 식으로 ID값을 가져와 DOM를 직접 핸들링한다. 

React에서도 DOM를 직접 접근하고 싶을때 사용하는것이 ref DOM 이다.

[예시]

• 컴포넌트에 ref 사용 : 스크롤 박스 조작하기

<ScrollBox ref={(ref) => ( this.scrollBox=ref } }

this.scrollBox.scrollToBottom()

 

• HTML DOM 에 ref 사용 : 특정 input 에 focus 주기

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

this.input.focus()

: 하단 예시를 보면 input에 입력한 값이 0000이면 텍스트필드의 색상을 lightgreen 아니면 lightcoral 으로 변경한다.

실패

성공

우선 CSS를 만들어준다.

css

[ref 사용 전]

component ref사용전

[ref 사용 후]