[22.12.12] TIL

오늘은 Todolist 혼자 만들어보기를 했는데, ㅎㅎ 잘 안된다.
뭐부터 해야될지 조금 막막한 느낌이랄까?
익숙해지지 않아서 그런 것 같다.
그리고, 오늘 TIL에 꼭 적고싶은 오류가 있었다.

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TodoList`. See https://reactjs.org/link/warning-keys for more information.
    at Todo (http://localhost:3000/static/js/bundle.js:362:5)
    at TodoList (http://localhost:3000/static/js/bundle.js:480:5)
    at main
    at div
    at App (http://localhost:3000/static/js/bundle.js:36:76)

이 오류메세지를 보면, 말그대로 TodoList.jsx에 key값이 없다고 하길래 보니 Todo.jsx에 key값은 있었다.

return (
    <div
      style={{
        border: '1px solid black',
        margin: '10px',
      }}
      key={item.id}
    >
      <h5>{item.title}</h5>
      <p>{item.content}</p>
      <button onClick={handleSwitchButtonClick}>
        {isActive ? '완료' : '취소'}
      </button>
      <button onClick={handleDeleteButtonClick}>삭제</button>
    </div>
  );

TodoList에 key값이 props 되지 않았나 싶어서 props를 줘보았는데도 계속 동일한 오류가 떴다.
근데 알고보니 key={key} 이렇게 멍청하게 키값을 줘서 안됐던 것..
key={item.id} 이렇게 동일하게 줘야됐는데..나는 멍청이였던거시다..
이 오류를 해결하려고 알아본 key값의 여러가지 정보들이 있는데,

• key값은 주민등록번호 같은 기능을 하기에 각각 독립적인 값을 가지고 있어야 한다.
• key값은 "형제"들중에서 유일한 독립적인 key값 이면 된다.
• 그래서 uuid로 만든 id값을 주는게 최선의 선택이다.

그리고 매니저님이 추가적인 질문을 해주셨는데, filter가 뭔지 찾아보고 map과 filter의 차이를 알아봐야 했다.
map,filter의 공통점은 새로운 배열을 반환한다는 것이다.
차이점은,
filter는 조건에 맞는(값이 true인) 아이들을 필터링(골라내어) 그 값들만 새로운 배열에 반환한다는 것이고,
map은 length만큼 반복을 하는데, 조건식 대신 값을 변환할 수 있는 식을 넣어주어 새로운 배열에는 변경된 값을 반환할 수 있다.

오늘 정말 매니저님 덕분에 좋은 공부를 했고, 자바스크립트 메서드들과 친해지는 경험이 필요할 것 같다.