안녕하세요! 리액트 ref 질문 드립니다.

Question

안녕하세요 지금 만들고 있는 사이트는 db에 저장된 정보들을 수정하는 사이트 입니다.그런데 ref 문제를 어떻게 할 지 계속 고민만 하다간 답이 안나올것 같아 이렇게 질문을 올립니다.그리고 state는 redux를 사용해 관리하고 있습니다. 현재 한 페이지에 <input /> 이 160개 있습니다. 정보들을 수정 후 수정 버튼을 눌렀을 때 비어있는 칸을 focus 해 주려고 합니다.그런데 100개가 넘는 ref를 어느 시점에 어디서 만들어 줘야 할 지 고민입니다.데이터를 불러왔을 때 fetchSuccess dispatch를 실행할 때 만들어줘야 할까요?아니면 input 컴포넌트를 생성할 때 만들어 줘야 할까요?이것도 아니면 어디에서 어떻게 관리해주는게 좋을까요?

수박수박 · Answer

input 컴포넌트를 forwardRef로 만들고 부모에서 컨트롤하면되려나요? 저도 사용해본적은 없어서 궁금하긴하네요

코린이듈리 · Answer

집에와서 수박수박님 말대로 일단 해결은 했는데 또다른 문제가 생겼네요 ㅠㅠㅠㅠ 컴포넌트 구조는 아래와 같습니다. 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 '#

안녕하세요! 리액트 ref 질문 드립니다.

2개의 답변

Q&A 목록