개인과제 (todoList만들기)

현재 css도 안 입히고 틀만 만들어 놨습니다. 

 

코드는 추가하기 버튼, 삭제하기 버튼, 완료는 아직 구현중입니다.

state 부분

  const [header, setHeader] = useState("");

  const [contents, setContents] = useState("");

  const [todoList, setTodoList]= useState([]);

  const [doneList, setDoneList]= useState([]);

state는 destructuring(비구조화)를 사용해서 두개의 상수를 선언하고 이 상수들에 useState 훅이 반환한 값들을 할당합니다. 예를들면 header는 현재 상태의 값을 저장하고 setHeader는 저장한 상태값을 업데이트 할수있습니다.
뒤에 useState 부분은 초기값입니다. 

 

추가하기 버튼 코드

const clickAddHandler = () =>{

    const addTodoList = {

      id : todoList.length+1 , header, contents

    }

    setTodoList([...todoList, addTodoList])

    setHeader('');

    setContents('');

  }

우선 추가하기 버튼에 clickAddHandler를 onClick값으로 두고 시작했습니다.

그 후 상수를 지정하고 id값은 생성될 todoList의 길이+1 , header와 contents는 키와 밸류의 이름이 같기 때문에 하나로 합쳐놨습니다.

이런식으로하면 return문 부분의 정해진 값에 map을 써서 넣을수 있는데

{todoList.map((item)=>{

        return (

          <div key={item.id}>

          {item.header},

          {item.contents},    

          <button onClick={()=>{clickRemoveButtonHandler(item.id)}}>삭제하기</button>

          <button onClick={()=>{clickClearButtonHandler(item.id)}}>완료</button>

          </div>

        )

이런식으로 item을 매게변수로 두고 id, header, contents를 순서대로 리턴했습니다.

삭제하기 버튼 코드

  const clickRemoveButtonHandler = (id)=> {

    const removeTodoList = todoList.filter((todoList) =>

    todoList.id !== id )

    setTodoList(removeTodoList)

  }

 

위 map의 삭제하기 버튼을 클릭하면 동작하는 코드입니다. 

역시나 상수를 선언하고 filter메서드를 이용해 클릭한 id값과 맞지않는걸 제외한것을 반환하게끔 했습니다.

 

남은 완료하기 버튼만 구현한다면 취소하기 버튼은 쉽게 만들수 있을거 같고,

내일은 리팩토링한 뒤에 css까지 할 예정입니다.