[React] To do list 데이터 배열+1 / map()

CRUD 모두 구현됐지만 id 값이 제대로 넘어가지 않아서 추가되는 항목에 id 값이 존재하지 않았다. 

그래서 삭제할 때도 id 값이 비어있는 항목들은 모두 삭제 되었다. 

 

곰곰이 생각해보니 기존 데이터값은 App.js 에 저장되어있어서 InputComp.js 나 Todo.js에서 아무리 id 값을 App.js에 넘겨도 
추가된 id 값이 없었다. 

 

App.js 에서 해당 이벤트 함수에 id값의 상태값을 알려줘야한다.

추가 이벤트 함수 
App.js 

  addTodoList=(id,todo)=>{
    alert('추가(App)')
    alert('넘어온 id : ' + (this.state.todolist.length + 1)  )
    //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함
    //(string) + (int + int )
    alert('넘어온 할일 : ' + todo)

    id=this.state.todolist.length + 1
    //변경된 id값 저장 
    
    //넘어온 값 확인됐으면 JSON형태로 묶어주기
    const todoObj = {id:id, todo:todo}
    const concatedList = this.state.todolist.concat(todoObj)

    this.setState({
      todolist:concatedList
    })
  }

 

아....항목삭제할때 key값이 안변한다. 

앞에꺼 삭제되면 뒤에 있는 항목들 앞으로 땡겨야하는데 어떻게하지.. 

key값이 변경 안됨

 

 

map() 메서드에 대해서... 

map() 메서드는 JavaScript 의 배열 메서드 중 하나로, 배열의 각 요소에 대해 주어진 콜백 함수를 실행하여 새로운 배열을 생성한다. 

map() 메서드는 기존 배열을 변경하지 않고 새로운 배열을 반환한다. 

 

map()메서드는 주어진 배열의 각 요소를 반복하면서, 각 요소에 대해 콜백 함수를 호출한다. 이 때 콜백 함수는 세 가지 매개변수를 받게 된다. 

1. elemet : 배열의 현재 요소를 나타내는 값

2.index : 현재 요소의 인덱스를 나타내는 값

3.array : map() 메서드가 호출된 원본 배열

 

콜백 함수는 배열의 각 요소에 대해 실행되며, 콜백 함수의 반환값은 새로운 배열의 해당 요소에 저장된다. 

map() 메서드는 반복을 완료하고 나면 새로운 배열을 반환한다. 

 

배열의 각 요소에 대해 동일한 작업을 수행하고 그 결과로 새로운 배열을 생성하는 경우에 유용하다. 

 

예를 들어 React에서 리스트를 렌더링할 때 map()메서드를 사용하여 각 요소를 컴포넌트로 변환하여 출력할 수 있다. 

 

아래는 숫자 배열의 각 요소를 제곱하여 새로운 배열을 생성하는 예시이다. 

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((element) => element * element);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]