리액트 ref 관련 질문 드립니다!

Question

현재 데이터를 관리하는 사이트를 만들고있습니다.그리고 사이트에 처음 들어가면 input이 수백개가 있습니다.제가 하려는건적용 버튼을 눌렀을 때 빈 input이 있으면 해당 input에 focus해줍니다.이제 focus 기능은 잘 되는데 다른 오류가 생겼어요근데 이래도 저래도 잘 되질 않아서 이렇게 다시 질문하게 됐습니다. 컴포넌트 구조는 아래와 같습니다. Row 컴포넌트에서 ref 정적배열을 선언하고서 마운트 할 때 useEffect로 phoneDataAddRef refData state를 초기화해줍니다.그 후 Input에게 ref를 넘겨줬습니다./////////Row.js//////// const Row = () =>{ const inputsRef = Array(8).fill(0).map(() => createRef()); useEffect(()=>{ dispatch(phoneDataAddRef(rowId,inputsRef)) },[]); return( inputs.map( ( val, i ) => { }); }; 그러고서 Input 컴포넌트를 forwardRef로 선언 후 ref를 받아와 input에 넣어줬습니다.//////////Input.js///////////// const Input = forwardRef(({colIndex, id},inputRef) =>{ ... ... return( ); }); 마지막으로 Contents 컴포넌트에서 refData state를 사용해적용 버튼을 누르면 빈칸이 있으면 focus하게 했습니다.//////////Contents.js//////// const Contents = () =>{ const handleApplyButton = () =>{ if( isEmpty ){ refData.current.onfocus(); } }; return( {rows.map(row =>{ }) ); }; 이렇게 해서 일단 포커싱은 잘 되는데 문제가 원래 row삭제가 잘 됐었는데 삭제버튼을 눌러 삭제를 하려고 하니Uncaught TypeError: Cannot assign to read only property 'current' of object '#

코린이듈리 · Accepted Answer

자문자답입니다. 안됐던 이유는 redux에 넣은 모든 것은 변경 불가능하고 직렬화 가능해야했습니다.하지만 ref는 위에서 말한 두가지를 모두 위반하기떄문에 안됐습니다.그래서 상위 컴포넌트에서 useState를 사용하여 관리해주니 잘 작동합니다. 관련 링크(스택오버플로)

리액트 ref 관련 질문 드립니다!

1개의 답변

#ref 목록