리액트의 ref 알아보기

ref의 역할은 무엇일까요?

특정 엘리먼트를 사용해야 할 때 우리는 그 엘리먼트에 아이디를 주고, 그 아이디를 통해서 해당 엘리먼트를 사용합니다. jsx를 통해서 엘리먼트에 아이디 값을 주면 어떻게 될까요? 리액트 컴포넌트의 경우 여러번 사용될 수 있습니다. 그래서 jsx를 통해서 전달된 아이디를 가진 엘리먼트들이 재사용된 만큼 나타나게 됩니다. 즉 동일 아이디를 가진 엘리먼트들이 생기게 되는 것이죠. 그래서 리액트 컴포넌트에서는 아이디값을 주지 않고, className으로 클래스 값만 주는 것입니다. 아이디는 없지만 특정 엘리먼트를 지정해야할 때 사용하는 것이 ref입니다.

리액트에서 엘리먼트나 컴포넌트의 id 역할을  하는 것이 ref(reference) 입니다.  

ref 사용해보기

버튼을 누르고 난 뒤에 input 창에 포커스를 주는 예제를 만들어서 ref를 사용해보도록 하겠습니다.

해당 코드를 통해서 간단한 입력창을 만들 수 있습니다. 입력창에 아무거나 입력하고 버튼을 눌러주세요.

코드를 통해서 해당 입력창을 만들 수 있습니다.

버튼을 누르고 나면 입력창 안에 포커스가 활성화 되지 않습니다. ref를 추가해서 버튼을 누르고 난 뒤에 입력창 안에 포커스가 활성화 되도록 만들어 보겠습니다.

달라진 코드를 한번 볼까요?

우선 생성자 함수 안에 ref를 만들어주시면 됩니다. 이름을 input이라고 지었지만 여기엔 다른 이름을 사용하셔도 됩니다.

this.input 대신에 this.focusing처럼 다른 이름을 한번 사용해보세요.

그리고 만든 ref를 jsx 안에서 사용할 엘리먼트에 ref로 전달해주세요. 저는 ref={this.input}으로 전달해주었습니다. 마지막으로 버튼을 클릭했을 때 발생되는 이벤트를 만들어주세요. 

current는 ref가 html 엘리먼트에 설정되면 해당 엘리먼트를 가리키고, 리액트 컴포넌트에 설정되면 해당 컴포넌트를 가리킵니다. 

함수 안에 this.input.current는 입력창을 가르키고, 여기에 포커스를 주도록 설정했습니다.

새로워진 입력창에 입력해보세요.

제출 버튼을 누른뒤에 입력창에 다시 포커스가 가는 것을 확인할 수 있습니다. 

ref 속성에 콜백함수를 전달해서 설정할 수도 있습니다. 위의 코드는 콜백함수를 전달해서 똑같이 구현했습니다. 함수를 전달할 때는 생성자 안에서 ref를 만들필요도 없이 바로 함수를 전달해주면 되고, current가 사라진다는 것을 주의해주세요.

ref를 사용할 때 조심할 점

ref는 엘리먼트 뿐만 아니라 리액트 컴포넌트에서도 똑같이 사용할 수 있다고 설명드렸습니다. 컴포넌트를 지정했을 때는 그 안에 메소드에도 접근할 수 있습니다. 즉 함수를 전달했을 경우엔 this.component.method, createRef를 사용했을 땐 this.component.current.method의 형태가 되겠지요.

이처럼 간편해 보이지만 꼭 필요한 경우가 아니라면 ref의 사용은 자제해야 합니다. 대부분의 경우 컴포넌트의 위치가 상하(부모-자식)의 관계에서 적절한 state를 설정하면 해결될 수 있는 일이 많기 때문입니다. 그리고 이렇게 설정하는 것이 리액트에서 가장 이상적으로 생각하는 일반적인 데이터 흐름입니다.

ref를 통해서 연결된 것들이 너무 많으면 나중에 유지보수 하기가 아주 어렵게 되기 때문입니다. 꼭 필요한 경우에 적절하게 사용할 수 있도록 하셔야합니다.

리액트에 대해서 여러 기능들을 다시 돌아보며 포스팅을 하고 있습니다. 공감은 제작자에게 큰 힘이 됩니다.