ref에 함수를 입력하는 부분에서 질문이 있습니다.
import React, { useState } from 'react';
export default function App() {
const [text, setText] = useState(INITIAL_TEXT);
const [showText, setShowText] = useState(true);
return (
<div>
{showText && (
<input
type="text"
ref={(ref) => {
ref && setText(INITIAL_TEXT);
console.log(ref);
}}
value={text}
onChange={(e) => setText(e.target.value)}
/>
)}
<button onClick={() => setShowText(!showText)}>보이기/가리기</button>
</div>
);
}
const INITIAL_TEXT = '안녕하세요';
답변 1
1
안녕하세요
> 저 함수에서 리턴값은 어떻게 되는건가요?
ref 함수의 반환값은 사용되지 않습니다 (의미 없음)
> ref = {}에서 ref에는 실질적으로 값이 담기는 것은 아닌가요?
우리가 전달한 ref 함수가 레퍼런스(돔 참조) 값이 되는 것은 아닙니다.
단지 레퍼런스가 변경될 때 실행되는 콜백 함수일 뿐입니다.
0
렌더링 할 때마다 새로운 ref 함수가 입력되서 그렇습니다
리액트는 ref 속성으로 새로운 함수가 입력되면 이전 함수를 null 매개변수와 함께 호출하고, 새로 입력된 함수는 돔 요소의 레퍼런스와 함께 호출합니다
성능 최적화를 원한다면 아래처럼 작성할 수 있습니다
const onRef = useCallback(ref => {
ref && setText(INITIAL_TEXT);
console.log(ref);
}, []);
// ...
<input ref={onRef} ...
로그가 2개가 아니라 4개가 찍히는 이유는 strict mode 때문일 수 있는데요
React.StrictMode 가 사용됐는지 봐주시면 될 것 같아요
https://reactjs.org/docs/strict-mode.html
0
답변 감사합니다!! React.StrictMode가 index.js 파일에 있었는데 이를 삭제하고도 로그가 4개 찍힙니다..ㅠㅠ App.js는 같고 다음은 index.js 파일입니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<>
<App />
</>,
document.getElementById('root'),
);
자동완성기능이 안되네요 ..
0
532
3
화면에 에러가나네요 ...
0
538
2
setValue 함수 질문 있습니다.
0
855
1
찾아야한다 실습 문의
0
484
1
훅 기초 익히기 - 배치 처리와 순차적 처리의 차이
0
492
1
cra, next.js 관련 질문 드립니다!
0
613
1
useState 배열 비구조화 문법 질문!
0
260
1
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
1
1091
2
Saga 오류 이거 혹시 왜이런지 알수 있을까요?
0
379
2
http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요
0
681
1
match
1
499
1
버튼이 생성되지 않습니다 .
0
288
1
혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?
0
263
1
saga 문제
0
250
1
에러가 발생하는데 이유가뭘까요..?
0
396
2
선생님과 똑같이 했는데 다 rendering 됩니다.
0
209
1
컴포넌트와 컨테이너의 기준
0
322
1
커스텀훅의 개념과 함수차이
1
1204
1
useEffect 실전 활용법(1) 강의에서 질문있습니다.
0
344
1
리덕스, 사가파일들의 관리
0
212
1
useImperativeHandle 질문 입니다.
0
286
1
컴파일 문의드립니다.
0
211
1
React.memo 관련 질문이 있습니다.
0
380
1
Context API vs Redux 사용 빈도
0
218
1