[React] To-do List 만들기 & 컴포넌트 분리

 

 

미리보기

리액트 기본적인 문법을 익히기 위해서 간단한 To-do list 사이트를 만들어 봤다.

기능적인 부분만 수행해서 디자인은 전혀 안해주었다.

대표적으로 쓰인 기능으로는 UseState, uuid(), 구조분해 할당 이다.

---

화면에 리스트 띄우기

const initState = [
    { id: uuid(), title: "공부하기", contents: "리액트", isDone: false },
    { id: uuid(), title: "낮잠자기", contents: "30분", isDone: true },
    { id: uuid(), title: "밥먹기", contents: "점심", isDone: false },
  ];
  
  const [todos, setTodos] = useState(initState);

일단 임의로 obj형태의 todo 변수들을 만들어주어서 useState에 저장해두었다.

useState를 활용해야 그 변수들을 UI로 표현시켜줄 수 있다.

 

입력 폼 기능

<form
            onSubmit={(event) => {
              event.preventDefault();
              const newTodo = {
                id: uuid(),
                title,
                contents,
                isDone: false,
              };
              setTitle("");
              setContents("");
              setTodos([...todos, newTodo]);
            }}
          >
            <input
              placeholder="제목"
              type="text"
              value={title}
              onChange={function (event) {
                setTitle(event.target.value);
              }}
            ></input>
            <input
              placeholder="내용"
              type="text"
              value={contents}
              onChange={function (event) {
                setContents(event.target.value);
              }}
            ></input>
            <button type="submit">입력완료</button>
          </form>

<button>을 클릭하면 submit이 발동돼서 form안에 있는 콜백함수가 작동한다.

입력값으로 들어있던 변수들을 가지고 새로운 todo obj를 만들고 기존값에 추가해서 붙여준다.

 

---

컴포넌트 분리하기

진행&완료 To-do 리스트 생성하는 파일

<TodoList todos={todos} setTodos={setTodos} isDone={false}/>
 <TodoList todos={todos} setTodos={setTodos} isDone={true}/>

진행중인, 완료된 todo를 만들어 주기 위해 isDone만 다른 컴포넌트 두 개를 불러와주었다.

 

---

각각의 To-do List 생성하기

export const TodoList = ({todos,setTodos,isDone}) => {
  return (
    <div>
        <h3>[TODO-LIST 영역입니다.]</h3>
          <div>
            <h4>{isDone?"완료된":"진행중인"} TODO-LIST 영역입니다.</h4>
            {todos
              .filter((t) => t.isDone === isDone)
              .map((todo) => {
                return (
                  <div style={{ border: "1px solid black", padding: "10px" }}>
                    <p>{todo.id}</p>
                    <p>{todo.title}</p>
                    <p>{todo.contents}</p>
                    <p>{todo.isDone.toString()}</p>
                    <button
                      onClick={() => {
                        const list = todos.map((work) => {
                          if (work.id === todo.id) {
                            return { ...work, isDone: !work.isDone };
                          } else {
                            return work;
                          }
                        });
                        setTodos(list);
                      }}
                    >
                      {isDone?"완료취소":"완료"}
                    </button>
                    <button
                      onClick={() => {
                        const list = todos.filter(
                          (work) => work.id !== todo.id
                        );
                        setTodos(list);
                      }}
                    >
                      삭제
                    </button>
                  </div>
                );
              })}
          </div>

    </div>
  )
}

매개변수로 구조분해 할당으로 분리되어서 받아온 값들을 변수처럼 사용해주고

isDone에 따라 <h> 태그의 제목 내용이 변경되게끔 삼항 연산자식을 활용해 나누어 처리해주었다.

버튼도 isDone에 따라 내용이 바뀐다.

 

---

 

마무리

어려웠던 부분은 배열 안에 있는 todos를 map이나 filter를 통해 걸러주고 새로운 todo를 만들고

리스트를 생성시켜주는 부분에서 헤맸다.

기본적인 부분인만큼 반복 숙달되게끔 해야한다.