리액트 컴포넌트 만들기(todo리스트)[자신감up 실습7]

코드 설명1

아래처럼 List.js의 요소가 될 컴포넌트인 Todo.js에서 스타일 지정 및 동작내용 작성.

- 체크박스를 관리하는 isChecked 와

숨기기 버튼을 누르면 체크박스,  span 창안의 jsx변수와 button이 사라지도록해주는 isHidden

 

import "./App.css";

import React, { useState } from "react";

function Todo({ item }) {

  const style1 = { color: "black" };

  const style2 = { color: "lightgray", textDecorationLine: "line-through" };

  const [isChecked, setIsChecked] = useState(false);

  const [isHidden, setIsHidden] = useState(true);

  const hChecked = () => {

    setIsChecked(!isChecked);

  };

  const hHide = () => {

    setIsHidden(false);

  };

  return (

    <p>

      {isHidden && <input type="checkbox" onChange={hChecked} />}

      {isHidden && (

        <span style={isChecked ? style2 : style1}>

          {item.name}

          {isChecked && <button onClick={hHide}>숨기기</button>}

        </span>

      )}

    </p>

  );

}

export default Todo;

 

 

import "./App.css";

import React from "react";

import Todo from "./Todo";

function List({ items }) {

  return (

    <>

      {items.map((item) => (

        <Todo item={item} />

      ))}

    </>

  );

}

export default List;

---

코드 설명2

input창에 입력하면 useRef를 통한 참조로. current.value로 실시간 입력 값을 받아서 

스케줄 입력 버튼을 누르면 hInput 함수를 실행시켜서 items를 갱신. 

갱신할 때마다 items가 List 컴포넌트로 전해져서 item으로 다시 Todo 컴포넌트까지 바로 전송되어 결과가 렌더링됨

---

setItems((prevTodos) => {...})에서 prevTodos는 상태 업데이트 시점에서의 items 배열의 최신 상태를 나타냅니다.

이를 통해 새로운 아이템을 배열에 추가하거나 기존 아이템을 수정하는 등의 작업을 할 수 있으며, 이는 항상 최신 상태에 기반하여 이루어집니다.

 

 

import "./App.css";

import React, { useRef, useState } from "react";

import List from "./List";

function App() {

  const inputText = useRef();

  const key = useRef(0);

  const [items, setItems] = useState([

    {

      id: 0,

      name: "구독하기",

      date: "오늘까지",

    },

  ]);

  const hInput = () => {

    setItems((prevTodos) => {

      return [

        ...prevTodos,

        {

          id: key.current,

          name: inputText.current.value,

          date: "오늘까지",

        },

      ];

    });

  };

  return (

    <div className="App">

      <input type="text" ref={inputText} />

      <button onClick={hInput}>스케줄 입력</button>

      <hr />

      <List items={items} />

    </div>

  );

}

export default App;

---

코드 추가: 시간 데이터 출력하기

윗 코드 중 일부를 아래처럼 수정해서 시간 데이터 출력.

+

key prop을 추가. props는 값 전달의 역할이지만,

특별하게 key prop은 어떤 요소가 변경되었는지 정확히 알고 해당 부분만을 업데이트 하는 것을 도와주는 역할.

 

  const date = new Date();

const hInput = () => {

    setItems((prevTodos) => {

      return [

        ...prevTodos,

        {

          id: key.current,

          name: inputText.current.value,

          date: `${date}`,

        },

      ];

    });

    console.log(items);

  };

function List({ items }) {

  return (

    <>

      {items.map((item) => (

        <Todo key={item.id} item={item} />

      ))}

    </>

  );

}

return (

    <p>

      {isHidden && <input type="checkbox" onChange={hChecked} />}

      {isHidden && (

        <span style={isChecked ? style2 : style1}>

          할일: {item.name}

          <br></br>

          입력시간: {item.date}

          {isChecked && <button onClick={hHide}>숨기기</button>}

        </span>

      )}

    </p>

  );