리액트 Ref

컴포넌트 내부에서 DOM에 직접 접근할 경우가 생기면 ref를 사용한다.

 

먼저 ref를 사용하지 않고 원하는 기능을 구현가능한지 살펴보는게 먼저이다.

 

1. DOM을 꼭 사용해야 하는경우

  1) 특정 input 박스에 포커스 주기

  2) 스크롤 박스 조작하기

  3) canvas 요소에 그림그리기 등

 

2. 사용방법

  1) props 설정하듯이 하면 된다. 

  2) 아래처럼 원하는 DOM에다가 ref를 주면된다.

     (...)
     return (
            <div
                style={style}
                ref={(ref) => {this.box = ref}}  //부모꺼에만 ref다니깐 자식 컴포넌트까지 볼수있음.
                >
                <div style={innerStyle} //ref를 자식에게 두면 부모꺼는 못봄.
                />
            </div>
        );