React의 Ref

React의 Ref

Javascript의 사용자라면 this에 대해 많은 고민을 해봤을것이다.

this는 대체 지금 무엇을 가리키고 있는가는 초보개발자라면 한번쯤 고민해본 문제이며 이 때문에 시련을 겪어보았을것이다.

React에서의 Ref는 this의 연장선 상에 있다고 본다.

아주 쉽게 Ref에 대해 얘기한다면 자식 클래스의 변수, 메서드 등의 프로퍼티들을 현재의 클래스에 사용(호출)하기 위한 도구 수준으로 생각할 수도 있다.

예를들어, 이런것이다.

자식 클래스에 fetchUserInfo라는 메서드가 있다.

그런데, 현재 작업중인 부모클래스에서 어떠한 경우에 자식클래스의 fetchUserInfo를 호출하고 싶은 경우가 생길 수 있다.

생각보다 이런일은 자주 생긴다.

이럴때 간단히 자식클래스에 ref를 해주면 간편하게 호출할 수 있다.

자식클래스가 User와 관련되었다면, 부모클래스에서 호출한 자식클래스에 다음과 같이 작성해주면 그만이다.

<User ref={ (user) => { this.user = user;  }} />

그러고 나면 this.user.fetchUserInfo(); 와 같이 자식클래스의 메서드를 호출할 수 있게된다.

뿐만아니라 state, props등에도 접근할 수 있으니 아주 편리하다고 볼 수 밖에 없다.