Ref 질문있습니다.
428
投稿した質問数 2
{this.nameInput = ref}} /> 소스가 이렇게 되어있는데요. ref 에 arrow function 을 이용해서 input 박스에 focus를 주겠다! 라는 의도는 알겠습니다. 근데 여기서, 매개변수로 넘기는 ref는 뭘 의미하는것인지 헷갈리고, 중간에 this.nameInput은 어떻게 인 input 엘리먼트에 포커스를 줄수있는거죠..? 거기다가 this.nameInput = ref 이건 뭘 의미하는건지 모르겠습니다..ㅠㅠ 마지막으로 handleClick 메서드 내에서 마지막에 포커스를 주는건 이해를 하겠는데 왜 this.nameInput.focus() 를 주는건지도 이해가 안가네요.. nameInput이란놈이 어디서 온건가요? React에서 사용가능한 문법적인 카테고리중 하나인건가요?
回答 4
0
답이 늦어서 죄송합니다 :( 이해하신 그대로 입니다. 하지만, 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
제가 궁금해서 phone을 name으로 갖는 input 엘리먼트에 ref를 phoneInput으로 줘봤더니 해당 input 엘리먼트로 포커스가 이동하네요... ㅠㅠ 네이밍이 저렇게 자동으로 된다.. 그런뜻으로 이해하면 될까요?
0
글 수정을 못찾겠어서 여기다가 쓰겠습니다;; 소스가 다 안올라갓네요 <input 이라는 엘리먼트의 attribute로 ref = { (ref) => {this.nameInput = ref} } 이부분 코드를 올리려고 했는데 짤렷네요!
잘 배우고있었는데 ㅠㅠ
0
292
1
react hot reloader
0
191
1
this.props.name할때
0
173
1
시작부터 안됩니다.
1
481
2
초급 유료버전과 차이점은 무엇인가요?
0
337
1
localStorage 강좌에서 componentwillmount 관련 질문입니다.
0
360
1
아무것도 뜨지 않아요
0
567
4
아래 화면에 선생님처럼 Codelab이 안뜹니다. 수업진행이 안되네요
0
510
2
쌤 리액트로 앱 만들수 있는건가요?
0
325
0
babel-preset-stage-0 패키지를 인스톨하여 presets에 stage-0 을 넣자 에러가 발생합니다.
0
312
1
rcc 스니펫 안되시는분들
0
270
0
webpack 5 대응
10
445
2
props의 정의에 대한 질문입니다.
0
377
1
section 4까지 수강 후 프로젝트 완성 후 오류 질문
0
373
1
react.min.js:13 Uncaught TypeError: e.render is not a function
0
345
0
화면에 나오는 코드로 하면 propTypes가 먹히지 않습니다.
0
424
2
메모앱 프로젝트 질문있습니다.
0
229
0
codepen.io 에 퀵에드가 없는데요ㅜㅜ
0
311
1
App.js에서 html 빨간줄
0
288
0
리뉴얼 강좌관련 질문드립니다.
0
260
0
App.js에서 오류가 나네요..
0
258
0
react app과의 port 혼용
1
274
0
Atom으로 예제를 따라하고 있는데 브라우저에 아무것도 나오질 않습니다.
0
335
2
여러개의 smart 컴포넌트를 만들어서 connect할 수 있는건가요?
0
252
0