오늘도 여전히 연봉올려 가방사자는 마음으로 임하고 있음..^^

본격적으로 컴포넌트 구성해보기!
우선 이런 구조로 컴포넌트를 구성할꺼임.

UI는 이런식으로 구성할꺼임.

✨ 컴포넌트 구성하기

1. App.tsx => TodoList.tsx 데이터 props 전달

1 . 임의로 데이터 만들어서 state설정

//App.tsx
import React, { useState } from "react";
import "../style.css";
import TodoList from "./TodoList";
const initialTodo: Array<Todo> = [
  { text: "watch the movie", completed: false },
  { text: "eat the dinner", completed: true },
];
const App: React.FC = () => {
  const [todos, setTodos] = useState(initialTodo);
  return (
    <div className="container">
      <h1>TODOLIST WITH TYPESCRIPT</h1>
      <TodoList />
    </div>
  );
};
export default App;

2 . todoList props 타입 설정

  //TodoList.tsx
 import React from "react";
type TodoListProps = {
  todos: Array<Todo>;
};
const TodoList: React.FC<TodoListProps> = ({ todos }) => {
  console.log(todos);
  return <React.Fragment></React.Fragment>;
};
export default TodoList;

console에 확인해보면, 데이터가 잘 들어온걸 확인할 수 있음!

2. TodoListItem.tsx & TodoInput.tsx UI 만들기

  //TodoInput.tsx
import React from "react";
const TodoInput: React.FC = () => {
  return (
    <div className="inputBox">
      <input type="text" />
      <button>Add Todo</button>
    </div>
  );
};
export default TodoInput;

  //TodoListItem.tsx
  import React from "react";
export const TodoListItem: React.FC = () => {
  return (
    <li className="todoItem">
      <label htmlFor="">
        <input type="checkbox" className="checkBox" />
        <span>오늘 하루 열심히 살기</span>
      </label>
    </li>
  );
};

3. TodoList => TodoItem props전달

//TodoListItem.tsx
import React from "react";
type TodoListItemProps = {
  todo: Todo;
};
export const TodoListItem: React.FC<TodoListItemProps> = ({ todo }) => {
  const { text, completed } = todo;
  return (
    <li className="todoItem">
      <label htmlFor="">
        <input type="checkbox" className="checkBox" checked={completed} />
        <span>{text}</span>
      </label>
    </li>
  );
};

4 . 클릭하면 completed 반전되는 toggleTodo함수 만들기

1. toggleTodo 함수 만들기.

  //App.tsx
  const [todos, setTodos] = useState(initialTodo);
  const toggleTodo= seleted => {
  //onClick 하면 TodoListItem에서 props로 전달받은 todo가 seleted로 들어감.
  	const newTodo= todos.map(todo => {
  		if(todo === seleted) return {...todo,completed:todo.completed} // todo와 지금 클릭해서 선택된 todo가 같다면 completed반전시킴.
  		return todo //아니면 그냥 todo 리턴
  	})
  	setTodos(newTodo) //선택된 todo와 같다면 completed 반전된 state
  }

2. type설정

  type toggleTodoType = (seleted:todo) => avoid
  // toggleTodo의 return 값은 없으므로 avoid로 지정함.
  // 함수 타입 설정  
  // name = param:paramType => returnType

props로 주고 받을 때 다 필요하니까 type 파일에 넣기

  //types.d.ts
  type Todo = {
  text: string;
  completed: boolean;
};
type ToggleTodo = (selectedTodo: Todo) => avoid;

  //App.tsx
  {...생략}
    const toggleTodo: ToggleTodo = (seleted) => {
    const newTodo = todos.map((todo) => {
      if (todo === seleted) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
    setTodos(newTodo);
  };
    {...생략}

5. TodoIistItem checkbox클릭 시 toggleTodo 실행시키기

//TodoListItem.tsx
import React from "react";
type TodoListItemProps = {
  todo: Todo;
  toggleTodo: ToggleTodo;
};
export const TodoListItem: React.FC<TodoListItemProps> = ({
  todo,
  toggleTodo,
}) => {
  const { text, completed } = todo;
  return (
    <li className="todoItem">
      <label className={todo.completed ? `completed` : undefined}>
        <input
          type="checkbox"
          className="checkBox"
          checked={completed}
          onClick={() => toggleTodo(todo)}
        />
        <span>{text}</span>
      </label>
    </li>
  );
};

다음 포스팅에서는 input 값 가져와서 Update하는 부분 할꺼임!