Todo List만들기 #03_useState 사용ㄱㄱ

1. app.js에서 useState를 정의해주고, props로 넘겨줄 수 있게 해줘야함.
   
   
   

2. TodoList.js에서 props를 통해 받아온것을 map함수를 써서 array의 개별 항목들을 props해줘야함.
   
   

3. TodoListItem.js에서 최종적으로 array로 데이터 덩어리를 받아온것을 text, checked 항목들을 원하는 div위치에 배치해주면 됨. checked 여부 true, false에 따라 ternary expression을 사용해서 체크박스 아이콘을 표시되게 하면 됨.

app.js

import React, { useState } from ‘react‘;
import TodoTemplate from ‘./components/TodoTemplate‘;
import TodoInsert from ‘./components/TodoInsert‘;
import TodoList from ‘./components/TodoList‘;

const App = () => {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: ‘리액트의 기초 알아보기‘,
      checked: true,
    },
    {
      id: 2,
      text: ‘컴포넌트 스타일링해 보기‘,
      checked: true,
    },
    {
      id: 3,
      text: ‘일정 관리 앱 만들어 보기‘,
      checked: false,
    },
  ]);

return (
    <TodoTemplate>
      <TodoInsert />
      <TodoList todos={todos} />
    </TodoTemplate>
  );
};

export default App;

app.js에서 useState를 import 해주고,

이걸 이용해서 const [변수명, setValue] = useState(초기값); 이런식으로 설정해줘야함.

아무튼 여기서는 useState를 정의해주고, 자식 요소로 props를 통해 넘겨주도록 해주면됨.

TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';

const TodoList = ({ todos }) => {
    return (
        <div className="TodoList">
            {todos.map(todo => (
                <TodoListItem todo={todo} key={todo.id} />
            ))}
        </div>
    );
};

export default TodoList;

app.js에서 props로 받아온 data(todos)를 map함수를 이용해서 TodoListItem으로 보내주면됨. 이때 중요한것은 key가 있어야함. 이번 경우에는 id를 key로 사용했음.

TodoListItem.js

import React from 'react';
import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = ({ todo }) => {
    const { text, checked } = todo;

    return (
        <div className="TodoListItem">
            <div className={cn('checkbox', { checked })}>
                {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
                <div className="text">{text}</div>
            </div>
            <div className="remove">
                <MdRemoveCircleOutline />
            </div>
        </div>
    );
};

export default TodoListItem;

array에 있던는1개 object 데이터에 담긴 항목 text와 checked를 원하는 div에 배치되게 해주면 됨. 이때, props로 넘겨받았던 todo를 destruct 해주면됨. { text, checked } = todo;

그리고 ternary expression을 이용해서 체크박스 표시되게 해주면 됨.

classnames라는 모듈도 사용했다. 이거 은근 편리한 모듈같다.
상태에 따라 ternary expression하고 같이 사용하면 좋은듯하다.