 {this.nameInput = ref}}
                /&gt;

소스가 이렇게 되어있는데요. ref 에 arrow function 을 이용해서 input 박스에 focus를 주겠다! 라는 의도는 알겠습니다.

근데 여기서, 매개변수로 넘기는 ref는 뭘 의미하는것인지 헷갈리고, 

중간에 this.nameInput은 어떻게  인 input 엘리먼트에 포커스를 줄수있는거죠..?

거기다가 this.nameInput = ref 이건 뭘 의미하는건지 모르겠습니다..ㅠㅠ 

마지막으로 handleClick 메서드 내에서 마지막에 포커스를 주는건 이해를 하겠는데

왜 this.nameInput.focus() 를 주는건지도 이해가 안가네요.. nameInput이란놈이 어디서 온건가요?

React에서 사용가능한 문법적인 카테고리중 하나인건가요?

답이 늦어서 죄송합니다 :(
이해하신 그대로 입니다. 
&nbsp;
하지만, ref 의 네이밍은, 마음대로 하셔도 됩니다~
만약에 ref="name"
이라고 입력하면, this.refs.name 으로 접근 할 수도 있습니다. (하지만 이 방법은 deprecated 되었습니다)
https://velopert.com/1148 를 참조해보세요~
&nbsp;

React Component가 비동기적으로 렌더링 되다 보니,
렌더링 완료시점 이후에 React Component가 아닌 HTML Element를 컨트롤 할수 있도록 ref를 callback로 받도록 권장하는 듯 합니다.
그래서 ref를 Arrow Function으로 받도록 권장하는게 아닌가 싶고요...
ref로 전달받은 element를 해당 Component Scope의 member로 접근 가능하게 하려고
this.nameInput = ref 로 넣어두는거죠...
저같은 경우에는 jQuery등에서 해당 엘리먼트로 추가 작업을 하려고 할때 ref를 사용합니다...

제가 궁금해서 phone을 name으로 갖는 input 엘리먼트에 ref를 phoneInput으로 줘봤더니 해당 input 엘리먼트로 포커스가 이동하네요... ㅠㅠ
네이밍이 저렇게 자동으로 된다.. 그런뜻으로 이해하면 될까요?

글 수정을 못찾겠어서 여기다가 쓰겠습니다;;
&nbsp;
소스가 다 안올라갓네요
&nbsp;
&lt;input 이라는 엘리먼트의 attribute로 ref = { (ref) =&gt; {this.nameInput = ref} } 이부분 코드를 올리려고 했는데 짤렷네요!

Cộng đồng Hỏi & Đáp của Inflearn

Ref 질문있습니다.