인프런 커뮤니티 질문&답변
작성한 질문수
Ref 질문있습니다.
작성
·
278
0
{this.nameInput = ref}}
/>
소스가 이렇게 되어있는데요. ref 에 arrow function 을 이용해서 input 박스에 focus를 주겠다! 라는 의도는 알겠습니다.
근데 여기서, 매개변수로 넘기는 ref는 뭘 의미하는것인지 헷갈리고,
중간에 this.nameInput은 어떻게 인 input 엘리먼트에 포커스를 줄수있는거죠..?
거기다가 this.nameInput = ref 이건 뭘 의미하는건지 모르겠습니다..ㅠㅠ
마지막으로 handleClick 메서드 내에서 마지막에 포커스를 주는건 이해를 하겠는데
왜 this.nameInput.focus() 를 주는건지도 이해가 안가네요.. nameInput이란놈이 어디서 온건가요?
React에서 사용가능한 문법적인 카테고리중 하나인건가요?
답변 4
0
velopert(김 민준)
지식공유자
답이 늦어서 죄송합니다 :(
이해하신 그대로 입니다.
하지만, ref 의 네이밍은, 마음대로 하셔도 됩니다~
만약에 ref="name"
이라고 입력하면, this.refs.name 으로 접근 할 수도 있습니다. (하지만 이 방법은 deprecated 되었습니다)
https://velopert.com/1148 를 참조해보세요~
0
React Component가 비동기적으로 렌더링 되다 보니,
렌더링 완료시점 이후에 React Component가 아닌 HTML Element를 컨트롤 할수 있도록 ref를 callback로 받도록 권장하는 듯 합니다.
그래서 ref를 Arrow Function으로 받도록 권장하는게 아닌가 싶고요...
ref로 전달받은 element를 해당 Component Scope의 member로 접근 가능하게 하려고
this.nameInput = ref 로 넣어두는거죠...
저같은 경우에는 jQuery등에서 해당 엘리먼트로 추가 작업을 하려고 할때 ref를 사용합니다...
0
Marchisio
질문자
제가 궁금해서 phone을 name으로 갖는 input 엘리먼트에 ref를 phoneInput으로 줘봤더니 해당 input 엘리먼트로 포커스가 이동하네요... ㅠㅠ
네이밍이 저렇게 자동으로 된다.. 그런뜻으로 이해하면 될까요?
0
Marchisio
질문자
글 수정을 못찾겠어서 여기다가 쓰겠습니다;;
소스가 다 안올라갓네요
<input 이라는 엘리먼트의 attribute로 ref = { (ref) => {this.nameInput = ref} } 이부분 코드를 올리려고 했는데 짤렷네요!