React _ ToDoList 만들어보기(2) - 중간점검

목차

• 현재까지 결과물

여태까지 만든 코드들을 하나씩 뜯어보겠습니다.

 

//App.js

import { useState } from "react";
import styled from "styled-components";
import Box from "./box";

const Styled = {
  wrap: styled.div`
    width: 400px;
    height: 500px;
    display: flex;
    flex-direction: column; //(1)
    justify-content: flex-start;
    align-items: center;
    background-color: #49F48C;
  `,
};
function App() {
  const deleteHandler = (i) => {
    var temp = [...workArray]; //(2)
    temp.splice(i, 1); //(3)
    setWorkArray(temp); //(4)
  };
  const [workArray, setWorkArray] = useState([ //(5)
    {
      title: "할 일1",
      detail: "상세 정보1",
    },
    {
      title: "할 일2",
      detail: "상세 정보2",
    },
    {
      title: "할 일3",
      detail: "상세 정보3",
    },
    {
      title: "할 일4",
      detail: "상세 정보4",
    },
    {
      title: "할 일5",
      detail: "상세 정보5",
    },
  ]);
  return (
    <Styled.wrap>
      {workArray.map((v, idx) => { //(6)
        return (
          <Box
            title={v.title}
            detail={v.detail}
            deleteHandler={deleteHandler}
            id={idx}
          ></Box>
        );
      })}
    </Styled.wrap>
  );
}

export default App;

 

(1) flex-direction, justify-content, align-items 등은 css중에서 flex에 해당하는 속성들이니 flexboxfroggy.com/#ko 이 사이트에서 flex에 대해 배우고 오시면 됩니다.

 

(2) [...workArray]는 workArray라는 배열을 하나 더 복사하는 것입니다.

 

(3) list.splice(i,k)는 list의 i번째 인덱스부터 k개 만큼 제거하는 것입니다.

 

(4) setworkArray(temp)는 workArray를 temp로 재설정하는 것입니다.

 

(5) const [workArray, setWorkArray] = useState(x) -> useState는 react에서 바뀌는 값을 관리할때 사용됩니다.

workArray라는 변수와 이 변수가 바뀔때 사용되는 함수 setWorkArray를 묶어서 const [workArray, setWorkArray]로 설정하고 workArray의 초기값 x를 useState(x)에 넣어줍니다.

 

(6) map함수는 파이썬에서와 마찬가지로 리스트의 모든 항목마다 특정 함수를 실행시키는 함수입니다.

 

 

 

//box.js

import styled from "styled-components";

const Styled = { // (1)
  box: styled.div`
    width: 100px;
    height: 100px;
    background-color: red;
  `,
  item: styled.div`
    width: 90%;
    height: 50px;
    background-color: #FCFFA9;
    margin-top: 10px;
    border-radius: 10px;
  `,
  title: styled.div`
    width: 100 %;
    height: 60%;
    font-size: 15px;
    margin-left: 6px;
    margin-top : 2px;
  `,
  sub: styled.div`
    width: 100%;
    height: 40$;
    font-size: 8px;
    margin-left: 6px;
  `,
  delete: styled.button`
    width: 3px;
    height: 88%;
    background-color: aqua;
    float: right;
    margin-right: 8px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 1px;
    border: 1px solid green
  `
};

const Box = (props) => { // (2)
    const deleteHandler = props.deleteHandler
  return (
    <Styled.item>
      <Styled.title>
        {props.title}
        <Styled.delete
          onClick={() => {
            deleteHandler(props.id); //(3)
          }}
        >삭제</Styled.delete>
      </Styled.title>
      <Styled.sub>{props.detail}</Styled.sub>
    </Styled.item>
  );
};

export default Box;

(1) styled 는 저번 포스팅에서 설명했듯 css 파일을 js 파일 안에서 수정 할 수 있도록 합니다.

Styled라는 변수를 설정해준 후 그 안에 객체마다의 css 스타일을 적어주면 됩니다.

 

(2) props라는 인자를 받아서 Box라는 함수가 위에 있는 App.js 파일에서 쓰일때 title, detail, id 등을 각각 설정할 수 있게 합니다.

 

(3) onClick = {함수} 는 특정 객체를 클릭할때마다 함수가 실행되도록 하는 것이다. 위 코드에서는 delete버튼을 클릭 할 떄마다 deleteHandler이 실행되어 props.id에 해당하는 값이 workArray에서 삭제되도록 만든 것입니다.

 

현재까지 결과물

=> 삭제버튼을 조금 더 수정하고 디테일 적인 요소들을 조금 더 손봐야 할 것 같다.