4. Todo List 컴포넌트 기능 구현(4)

아이템 리스트 출력 TodoList 컴포넌트

 

[ TodoItem(  )의 파라미터 ]

const TodoItem = ({ id, isDone, content, createdDate, onUpdate, onDelete }) => {

props를 구조분해 할당한다.

[ TodoItem(  )의 return문 ]

return(         <div className="TodoItem">             <div className="checkbox_col">                 <input onChange={onChangeCheckbox} checked={isDone} type="checkbox" />             </div>             <div className="title_col">{content}</div>             <div className="date_col">{new Date(createdDate).toLocaleDateString()}</div>              <div className="btn_col">                 <button onClick={onClickDelete}>삭제</button>             </div>         </div>     )

체크박스 input의 체크여부를 isDone으로 설정 할 일을 표시하기 위해 content렌더링 타임스탬프값을 인수로 저장해 Date문자열형식으로 변환

import './TodoItem.css'

const TodoItem = ({ id, isDone, content, createdDate, onUpdate, onDelete }) => { 
    const onChangeCheckbox = () => {
        onUpdate(id);
    }
    const onClickDelete = () => {
        onDelete(id)
    }
    
    return(
        <div className="TodoItem">
            <div className="checkbox_col">
                <input onChange={onChangeCheckbox} checked={isDone} type="checkbox" /> {/* 체크여부를 isDone으로 설정 */}
            </div>
            <div className="title_col">{content}</div> {/* 할 일을 표시하기 위해 content렌더링 */}
            <div className="date_col">{new Date(createdDate).toLocaleDateString()}</div> {/* 타임스탬프값을 인수로 저장해 Date문자열형식으로 변환 */}
            <div className="btn_col">
                <button onClick={onClickDelete}>삭제</button>
            </div>
        </div>
    )
}

export default TodoItem