인프런 커뮤니티 질문&답변

Marchisio님의 프로필 이미지
Marchisio

작성한 질문수

React & Express 를 이용한 웹 어플리케이션 개발하기

Contact 엑스트라 기능 구현 i | KeyPress, ref

Ref 질문있습니다.

작성

·

286

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(김 민준)님의 프로필 이미지
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님의 프로필 이미지
Marchisio
질문자

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

0

Marchisio님의 프로필 이미지
Marchisio
질문자

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

작성한 질문수

질문하기