선생님 개인프로젝트 도움 요청 드립니다

[Marco]

해당 컴포넌트는 db에 있는 리스트를 받아와서 수정하는 컴포넌트입니다
불러온 db 리스트에 id를 따로 설정해 놓지 않아서
해당 배열 길이로 임시 id를 붙여 추가와 삭제 작업이 가능하게 하려고 합니다


기존 리스트를 보여주는 것 까진 작업이 되었고
nextId 변수를 이용해 리스트가 새로 추가될 때 마다 
기존 리스트 총 갯수 + 1
가 되게 코딩을 하였는데요
1개까지는 id 숫자가 올라가는데 그 이후로는 고정이 되어 오류가 발생합니다

3일째 이것저것 해봐도 해결이 되지않아 선생님께 도움을 요청드립니다!

import React, { useCallback, useEffect, useRef, useState } from 'react';
import Insertlist from './Insertlist';
import Insertprogram from './Insertprogram';

function AddInput({addOpt, selectedShow}) {
const prg = selectedShow.program;
const anc = selectedShow.anchor;
const [ array, setArray ] = useState([]);
 
let nextId = useRef(0);

// db에 있는 데이터를 미리 뿌려줌
if (addOpt == 'program') {
let totalNumber = prg.artist.length;
for ( let i = 0; i <= totalNumber - 1; i++ ) {
 array.push({
 id: i,
 artist: prg.artist[i],
 title: prg.title[i]
 });
 }
 nextId = totalNumber;
 } else if (addOpt == 'anchor') {
let totalNumber = anc.artist.length;
for ( let i = 0; i <= totalNumber - 1; i++ ) {
 array.push({
 id: i,
 artist: anc.artist[i],
 title: anc.title[i]
 });
 }
 nextId = totalNumber;
 }

const [ programs, setPrograms ] = useState(array);

// 리스트 추가
const onInsert = useCallback((artist ,title) => {
let program = {
 id: nextId,
 artist,
 title
 }
setPrograms(programs.concat(program));
 nextId += 1;
 console.log(programs)
 },[programs])

// 해당 리스트 삭제
const onRemove = useCallback(id => {
const copy = [...programs];
const deleted = copy.filter(program => program.id !== id);
 
setPrograms(deleted);
 },[programs]
 )

return (
<>
{/* 기존 or 추가 되는 리스트 */}
<Insertlist programs={programs} onRemove={onRemove} addOpt={addOpt} />

{/* 데이터 추가하는 input */}
<Insertprogram onInsert={onInsert} />
</>
 );
}

export default AddInput

[codingapple]

useRef로 만든 변수는 변경할 때 useRef변수.current 같은걸 변경해줘야 변경될걸요

[Marco]

답변 감사드립니다 썬생님!

[글쓴이]

글