리액트로 ToDoList 만들기

1차 팀프로젝트가 끝나고 부족한 점을 많이 느껴서 2차 팀프로젝트 시작하기 4일 전부터 프론트엔드 멘토님께서 투두리스트를 만드는 것이 도움이 될거라는 말씀을 하셔서 바로 시작을 했습니다. 만드는 도중에 부트캠프 session과 과제들이 있을 것을 예상하고 하루하루 목표량을 잡았습니다.

 

 

화요일은 레이아웃 만들기
수요일은 리스트 만드는 기능 구현하기
목요일은 제거 기능 + styled-component 적용하기

 

 

먼저 결과물부터 보여드리겠습니다.🫡

 

SeungMin's To do list

 

 

미흡하지만 계획했던 기간 동안 완성을 했습니다 !! ㅋㅋ 👏

 

레이아웃부터 간단하게 만들기 시작하고 리스트 컴포넌트를 하나 만들 때까지는 생각보다 금방 만들었는데 

Input 버튼에 입력을 한게 리스트 배열에 들어가야하고 이 배열을 렌더링 해주는 것부터 삭제 기능은 어떻게 해야할지 머리 속이 복잡해졌습니다😂

배열에는 map 함수가 사용된다는 것은 알고 있었지만 리스트 삭제를 할 때 필요한 filter 함수에 대해서는 잘 몰랐기 때문에  멘토님에게 힌트를 얻어 TodoList를 완성 할 수 있었습니다.

 

Main 컴포넌트

  const [text, setText] = useState("");
  const [list, setList] = useState([]);

  //input버튼, setText에 저장을 해야한다.
  const onTextChange = (e) => {
    setText(e.target.value);
  };

//입력 버튼
  const handleButton = () => {
    setList([...list, text]); //이전 list에 text를 추가
  };

//삭제 기능
  const handleDelete = (index) => {
    setList(
      list.filter((text) => {
        return list.indexOf(text) !== index;
      })
    );
  };

개인적으로 filter 함수가 거의 처음이라 그런지 어렵게 느껴졌는데 indexof 메소드는 list의 text와 일치하는 부분의 인덱스를 찾고 handleDelete에 받은 index와 비교하여 같지 않은 내용들을 return 한다고 말할 수 있을 것 같습니다.

 

 

List 컴포넌트 

    {/* list 배열에 모든 요소에 접근해서 새로운 배열을 반환한다 */}
        {list.map((contents, index) => {
          return (
            <List text={contents} index={index} handleDelete={handleDelete} />
          );
        })}

contents는 list의 요소입니다.

 

 

Main.scss

.main {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: lightskyblue;

  .contain {
    display: flex;
    height: 600px;
    width: 600px;
    border-radius: 12px;
    flex-direction: column;
    box-shadow: 2px 2px 2px;
    background-color: white;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px 12px 0 0;
      margin: 0%;
      height: 40px;
      font-weight: bold;
      font-size: 36px;
      background-color: aquamarine;
      padding: 16px 0;

      .sub-title {
        margin: 0;
      }
    }

    .input-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      width: 600px;
      padding: 12px 0;

      .input-todo {
        display: flex;
        width: 90%;
        font-size: 16px;
        text-align: center;
        border: none;
        margin: 10px;
        height: 28px;
      }

      .button {
        background-color: white;
        border-radius: 5px;
        width: 80px;
        margin: 10px;
        height: 32px;
        border: 1px solid black;
        padding: 8px 0;
        cursor: pointer;
      }
    }
  }
}

 

scss파일을 Styled-Components 로 변경하기

2차 팀프로젝트 때는 스타일 컴포넌트를 사용한다고 하기에 미리 연습해볼 수 있는 좋은 기회라 생각하여 변경해보겠습니다.

 

스타일컴포넌트를 사용하면 위에 Main.scss 파일의 코드를 Main.jsx 파일 하나에 작성할 수 있습니다.

 

먼저 터미널 창에서 npm install styled-components 합니다.

그리고나서 

import styled from "styled-components";  를 위에 작성해서 스타일 컴포넌트를 사용할 수 있게 해줍니다.

 

const MainContainer = styled.div`
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: lightskyblue;
`

const Container = styled.div`
  display: flex;
  height: 600px;
  width: 600px;
  border-radius: 12px;
  flex-direction: column;
  box-shadow: 2px 2px 2px;
  background-color: white;
`

//return 아래에서

<MainContainer></MainContainer>

 

이런 방식으로 Main.scss에 있던 코드를 컴포넌트처럼 변경하여 사용할 수 있습니다.  👍