[2주차] 강다혜 미션 제출합니다.

package.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.13",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/SubjectList/index.js

@@ -14,7 +14,7 @@ export default function SubjectList({ state }) {
     <Container>
       {state === OPEN && <SubjectInput addSubject={addSubject} />}
       {subjectList.map((subject) => (
-        <Subject subject={subject} />
+        <Subject key={subject.id} subject={subject} />
       ))}
     </Container>
   );

src/hooks/useSubject.js

@@ -1,10 +1,12 @@
 import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 export default function useSubject() {
   const [subjectList, setSubjectList] = useState([]);
 
   const addSubject = (newSubjectTitle) => {
     const newSubject = {
+      id: uuidv4(),
       title: newSubjectTitle,
       taskList: [],
     };