1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!!
💎 TodoList
li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으로 key값을 넣어줘야한다!!
- 각 엘리먼트에 안정적인 고유성을 부여하기 위해서 key 값을 써야한다.
- 고유성을 통해서 React가 이름이 똑같은 컴포넌트를 각각의 항목을 변경, 추가 또는 삭제할지 식별
한마디로 ** key값을 지정해주지않으면 변화한값만 리렌더링되야하는데 전체가 리덴더링되게된다!! **
- 체크박스에 기본 cheked = 속성은 체크가되었을때는 true , 체그가 안되어있을대는 false 값을 가지고있다.
💥 배열.map( (배열요소,인덱스) => { return (값)} ) 💥
기존 배열을 이용해서 새로운 배열을 만드는 함수 - 새로운 배열의 요소는 map에서 return되는 값으로 이루어짐
- const todoChange = ( index ) => index는 위에 선언된 todos에 인덱스값 == 길이
- const newTodos = todos 하게되면 주소값만 가져오는 얕은복사이기 때문에 전개구문을 사용하여 새로운배열을 생성
[...todos] 모양을 이용해 배열에 깊은복사를 진행한다
- newTodos[index].completed : 기본 completed 값이 모두 false 이기때문에 ! 연산자를 이용해서 true를 대입해준다.
- checked={todo.completed} = false
<span className = {todo.completed ? 'completed' : ""> : 삼항연산자를 사용해서 todo.completed 가 true이면
className = 'completed' 가되고 false라면 className만남게된다 ↓ 어쩔수없는 리액트의 단점.. 😅
// 체크박스 값 변경 시
const todoChange = (index) =>{
const newTodos = [...todos]; // todos를 풀어서 새로운 배열 생성
// 전개 연산자를 이용한 배열 깊은 복사
// boolean값 반대로 변경해서 대입
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
}
return(
<>
<hr/>
<InputName/>
<hr/>
<h1>Todo List1</h1>
{/* 입력 */}
<InputTodo/>
{/* 할 일 목록 */}
<ul>
{todos.map( (todo,index)=>{
return(
<li key={index}>
<input type='checkbox' checked={todo.completed}
onChange={(e)=>{todoChange(index)}}
/>
<span className={todo.completed ? 'completed' : ''}>{todo.text}</span>
</li>
);
})}
</ul>
</>
);
};
