Todo 정리1

2023.04.13

1. TodoList

1. prop - 컴포넌트에 전달되는 속성, 컴포넌트는 부모 컴포넌트로부터 props를 전달 받아서 이를 이용하여 자신의 렌더링 로직을 수행

function Greeting(props) {
  return <div>Hello,{props.name}!</div>;
}

✔ 위와 같은 컴포넌트는 'props'로 'name'이라는 속성을 전달받아 이를 출력함
✔ 부모 컴포넌트에서는 다음과 같이 'name'속성을 지정하여 'Greeting' 컴포넌트에 전달 할 수 있다.

<Greeting name="Alice" />

✔ 위 코드에서 name="Alice"는 Greeting 컴포넌트에 props로 전달되는 값이며, 이를 이용하여 Greeting 컴포넌트는 "Hello, Alice!"를 출력
✔ 이처럼, prop은 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 값이며, 컴포넌트에서 필요한 데이터를 전달하는데 사용됨

2. onAdd - React 컴포넌트에서 새로운 데이터를 추가하는 작업을 처리하는 함수를 호출하기 위한 prop, 콜백함수, 주로 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하여 상태를 업데이트하는데 사용

 const handleAdd = (todo) => {
 	// 새로운 todo를 todos에 업데이트 해야 함
    // setTodos를 돌면서 뒤에 todo추가
 	setTodos([...todos, todo]);
 }

3. <li> 요소의 key 속성은 React에서 리스트 아이템을 렌더링할 때 사용

function TodoList(props) {
  const { items } = props;

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

✔ 이 컴포넌트는 items 배열을 받아서 각 아이템을 <li> 요소로 렌더링함
✔ 각 아이템의 고유 식별자인 item.id를 key 속성에 지정하여 React가 리스트 아이템을 식별할 수 있도록 함

✔ key 속성을 지정하지 않으면 React는 각 아이템을 구분할 수 없게 되어 효율적인 렌더링을 수행할 수 없다
✔ 따라서, 리스트 아이템을 렌더링할 때 key 속성을 지정하는 것은 React에서 리스트 렌더링을 수행할 때 중요한 역할을 한다.

2. AddTodo

1. form에서의 onSubmit - 폼이 제출될때 실행되는 이벤트 핸들러를 지정하는 속성

function MyForm() {
  function handleSubmit(event) {
    event.preventDefault(); // 기본 동작 취소(새로고침)
    // 폼 제출 처리 로직
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 폼 컨트롤 요소들 */}
      <button type="submit">제출</button>
    </form>
  );
}

✔ <button> 요소의 type 속성이 submit인 경우, 폼이 제출되는 역할을 함
✔ 이후, onSubmit 이벤트 핸들러가 호출되어 폼 제출 처리 로직이 실행

2. input에서의 onChange - 사용자가 입력한 값을 처리하는 이벤트 핸들러를 지정하는 속성
   event.target.value - 이벤트 객체에서 발생한 이벤트 대상 요소(target element)의 값을 나타냄

function MyInput() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

✔ 위 코드에서는 useState 훅을 이용하여 value 상태 값을 관리하고, <input> 요소의 값이 변경될 때마다 handleChange 함수를 실행하여 value 상태 값을 업데이트함
✔ <input> 요소의 value 속성은 value 상태 값을 이용하여 설정

3. onAdd - 콜백함수, 주로 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하여 상태를 업데이트하는데 사용(새로운 데이터를 추가하는데 사용)

3. 고유한 아이디 라이브러리

1. 설치

yarn add uuid

2. import

import {v4 as uuidv4} from 'uuid';

3. 호출

uuidv4()

4. Todo

1. onUpdate - 콜백함수, 주로 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하여 상태를 업데이트하는데 사용(기존 데이터를 업데이트하는데 사용)

// map 사용
const handleUpdate = (updated) => {
        /* update되면 updated된 todo객체를 받아와 todo의 배열을 새롭게 만들면서
        하나씩 낱개로 가지고 올건데 기존의 todo id가 update하려고 하는 id와 동일하다면
        update된걸로 바꾸고 아니면 기존의 배열 item사용*/ 
        setTodos(todos.map(todo => todo.id === updated.id ? updated : todo));
    }

2. onDelete - 콜백 함수, 주로 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하여 상태를 업데이트하거나 삭제하는데 사용(할일 항목을 삭제하는데 사용)

//filter 사용
const handleDelte = (deleted) => { 
  // 삭제된 todo를 받아옴
  // todos를 돌면서 todo의 id가 삭제하고자 하는 아이템이 아닌것만 필터링
  setTodos(todos.filter(todo => todo.idx !== deleted.id));
}

3. input과 label

<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" />

✔ 위 예제에서 label 요소는 htmlFor 속성을 사용하여 input 요소의 id 값을 username로 지정하고 있음
✔ label을 클릭하면 input 요소가 초점이 맞춰지며, input요소의 레이블로서 작동
✔ name 속성은 input 요소를 식별하는데 사용되며, 폼 데이터를 전송할 때 name 속성 값이 사용

4. react-icons

1. 설치

yarn add react-icons

2. import

// Fa 접두사 보고 뒤에 fa 붙임
import {FaTrashAlt} from 'react-icons/fa';
<button><FaTrashAlt></FaTrashAlt></button>

4. input checked - 페이지가 로드될 때 체크박스나 라디오 버튼이 미리 선택되도록 지정하는데 사용

<input type='checkbox' 
       id='checkbox' 
       checked={status === 'completed'}
       onChange={handleChange}>
</input>
<label htmlFor='checkbox'>{text}</label>
<span>
      <button onClick={handleDelete}>
      	<FaTrashAlt></FaTrashAlt>
      </button>
</span>