48강_220706_React(TODO LIST 제작)

 

 

 

 

---

과제내용

TODO LIST 제작

• 노출되어야 할 내용
  • 순번
  • 내용
  • 할일 처리 체크
  • 리스트를 작성할 수 있다.
• 자유작업
  • 상세페이지

자유 작업은 진행하지 않고, 필수 작업만을 진행하였다.

 

 

 

---

결과물

#. 폴더의 경로는 다음과 같다.

1. main.jsx_전체를 그리는 컴포넌트 Main을 정의한다.

import React from "react";
import { Header, Input } from "../components";

const Main = () => {
  // Todo 내용을 입력받아 값을 보내준다.
  // input의 기능을 함
  // 내용을 리스트로 보내준다.
  return (
    <>
      <Header />
      <Input />
    </>
  );
};

export default Main;

 

2. Input.jxs_내용을 입력받는 input을 그려주고, 입력받은 내용을 그리는 컴포넌트인 List에 보내준다.

• 입력값을 받을 state를 배열로 생성한다. setText에 input으로 입력받은 상태값을 스프레드 연산자를 이용하여 추가해준다.
• Change 함수를 통해 input 으로 입력받은 값을 엔터키로 setText에 넣어준다.

import React, { useState } from "react";
import List from "./List";

const Input = () => {
  // Todo 입력값을 받는 state
  // text에는 입력받은 todo의 값이 배열형태로 담긴다.
  const [text, setText] = useState([]);

  // input에서 enter를 누르면 실행되는 함수
  const Change = (e) => {
    if (e.keyCode === 13) {
      setText([...text, e.target.value]);
      console.log(e.target.value);
      console.log(text);
      e.target.value = "";
    }
  };

  return (
    <>
      <div>
        <span className="putImg">✏️</span>
        <input onKeyUp={Change} className="put"></input>
      </div>
      <List text={text} />
    </>
  );
};

export default Input;

 

3. Lists.jsx_입력 받은 값을 각 포스트잇안에 그려줄 Lists 컴포넌트를 생성한다.

• setSelectI로 입력받은 내용을 담는다.
• function a 로 입력받는 내용을 그려주고 Check 컴포넌트에서 index 값을 받아와 클릭함수를 실행한다.
  • 클릭 시, 완료 / 미완료를 확인할 수 있도록 색상이 변한다.

import React, { useState } from "react";
import Check from "./Check";

const Lists = ({ text }) => {
  const [selectI, setSelectI] = useState([]);

  function handleClick(index) {
    if (selectI.includes(index)) {
      setSelectI(selectI.filter((i) => i != index));
    } else {
      setSelectI([...selectI, index]);
    }
  }

  function a(text) {
    text = text.map((i, index) => {
      const ispop = selectI.includes(index);
      const className = ispop ? "item pop" : "item";
      return (
        <div key={index} className={className}>
          <div className="add"></div>
          <div className="num">{index + 1}</div>
          <div className="text">{i}</div>
          <Check onClick={() => handleClick(index)} />
        </div>
      );
    });
    console.log("asd", text);

    return text;
  }

  return a(text);
};

export default Lists;