내일 배움 캠프 23_06_14 TIL

리액트에서 재렌더링을 위해 상태를 반영할 수 있는 state에 대해서 배웠는데

const [Todo, setTodo] = useState([

    {

      id: id,

      Title: "리액트 공부하기",

      Content: "리액트 기초를 공부해봅시다.",

    },

  ]);

이런식으로 Todo라는 배열에 State를 사용한다고 선언해주고

const clickAddButtonHandler = (event) => {

    event.preventDefault();

    const newTodo = {

      id: id,

      Title,

      Content,

    };

    //입력된 내용을 Todo 객체 배열을 불러와서 풀어준 후 newTodo를 추가해서 다시 디스플레이

    setTodo([...Todo, newTodo]);

    //아래 두개는 입력 폼 비워주는 코드

    setTitle("");

    setContent("");

  };

setTodo를 통해서 ...Todo는 Todo라는 배열의 내용을 얕은복사를 통해 가져오는것이고 newTodo라는 새로운 배열을 Todo 배열에 추가한 후 State덕분에 변경사항이 일어나게된다면 재렌더링을 통해 수정사항이 반영되게 된다.

 

그리고 컴포넌트화를 통해서

 return (

    <div className="Layout">

      <TopBar />

      <Input

        Title={Title}

        Content={Content}

        TitleChangeHandler={TitleChangeHandler}

        ContentChangeHandler={ContentChangeHandler}

        clickAddButtonHandler={clickAddButtonHandler}

      />

      <h2>Working..</h2>

      <div className="Working-Container">

        {Todo.map((item) => (

          <NotDoneList

            item={item}

            clickRemoveButtonHandler={clickRemoveButtonHandler}

            clickDoneButtonHandler={clickDoneButtonHandler}

          />

        ))}

      </div>

      <h2>Done..!</h2>

      <div className="Done-Container">

        {DoneTodo.map((item) => (

          <DoneList

            item={item}

            clickRemoveButtonHandler={clickRemoveButtonHandler}

            clickCancelButtonHandler={clickCancelButtonHandler}

          />

        ))}

      </div>

    </div>

  );

이런식으로 

const DoneList = ({

  item,

  clickRemoveButtonHandler,

  clickCancelButtonHandler,

}) => {

  return (

    <div className="Todo-Box" key={item.id}>

      <h2>{item.Title}</h2>

      {item.Content}

      <div className="Button">

        <button

          className="DeleteButton"

          onClick={() => clickRemoveButtonHandler(item.id)}

        >

          삭제하기

        </button>

        <button

          className="DoneButton"

          onClick={() => clickCancelButtonHandler(item.id)}

        >

          취소

        </button>

      </div>

    </div>

  );

};

export default DoneList;

분리해준다음 export 시키고
사용할 곳에서

import DoneList from "./components/DoneList";

import 시켜준 후 
<DoneLis
이런식으로 상속받아서 사용하게되는데 위 코드에서는

 item={item}

            clickRemoveButtonHandler={clickRemoveButtonHandler}

            clickCancelButtonHandler={clickCancelButtonHandler}

이 배열객체의 값이 필요해서 item과
버튼 클릭 이벤트 핸들러 함수가 필요하기에 

두 함수를 할당해 준 후 사용하였다