React Project 책으로 삽질하기 3(나를위한 기록)
배열 내장함수 filter?
- 메모를 작성해서 추가하는 기능까지 완료했다면 이번에는 메모를 삭제하는 기능을 구현해보겠습니다. 메모 삭제기능을 구현 할 떄는 배열 내장함수인 filter 를 사용합니다. filter 함수는 기존의 배열은 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 따로 추출하여 새로운 배열을 만들어 주는 기능이 있습니다.
const array = [1,2,3,4,5,6,7,8,9,10];
const biggerThanFive = array.filter(number => number > 5);
// 결과 [6,7,8,9,10]
위의 코드를 보면 배열에 1부터 10까지 담은 후 filter 를 이용해 5 보다 큰 숫자만 베열에 담아 출력합니다. 단 filter 함수에는 조건을 확인해 주는 함수를 파라미터로 넣어 주어야 합니다. 파라미터로 넣는 함수는 true 나 false 로 값을 반환해야하며 true를 반환하는 경우만 새로운 배열에 포함됩니다.
항목 지우기_1 (App.js)
- filter 함수를 사용하여 App.js에 onRemove 함수를 작성해줍니다. App.js 에 id를 파라미터로 받아온 후 같은 id를 가진 항목을 todos 배열에서 지우는 함수입니다.
import React, { useState } from 'react'; import './App.css'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/ToddInsert'; 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, } ]) const onRemove = useCallback( id => { setTodos(todos.filter(todo => todo.id !== id)); }, [todos], ); return ( <> <TodoTemplate> <TodoInsert /> <TodoList todos={todos} /> </TodoTemplate> </> ); } export default App;
항목 지우기_2 (TodoList.js/TodoListItem.js)
- 다음으로 할 일은 App.js에서 만든 onRemove 함수를 사용하기 위해 TodoList에 코드를 추가해줍니다. onRemove 함수를 사용하기 위해선 TodoList 를 거쳐얃 하기 때문입니다. 아래와 가이 props로 받아온 onRemove 함수를 TodoListItem에 그대로 전달해 줍니다.
import React from "react"; import TodoListItem from './TodoListItem'; import './Todo.css'; const TodoList = ({todos, onRemove}) => { return ( <div className="TodoList"> {todos.map(todo => ( <TodoListItem todo={todo} key={todo.id} onRemove={onRemove} /> ))} {/* <TodoListItem/> <TodoListItem/> <TodoListItem/> */} </div> ); }; export default TodoList;
import React from "react";
import {MdRemoveCircleOutline, MdCheckBoxOutlineBlank, MdCheckBox } from 'react-icons/md';
import cn from 'classnames';
import './Todo.css';
// import './TodoListItem.scss';
const TodoListItem = ({ todo, onRemove }) => {
const { id,text,checked } = todo;
return(
<div className="TodoListItem">
<div className={cn(`checkbox`, { checked })}>
{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
{/* <MdCheckBoxOutlineBlank /> */}
<div className="text">{text}</div>
</div>
<div className="remove" onClick={() => onRemove(id)}>
<MdRemoveCircleOutline />
</div>
</div>
);
};
export default TodoListItem;
- 위와 같이 코드를 작성한 후 확인을 하면 할 일 매모에서 삭제버튼을 눌렀을 때 메모가 정상적으로 삭제되는 것을 확인할 수 있습니다.
항목 체크하기_1(App.js)
- 다음으로 구현할 기능은 항목 체크기능입니다. 체크기능의 경우 삭제 기능과 매우 비슷합니다. 아래와 같이 코드를 작성해주세요.
import React, { useState , useRef, useCallback } from 'react'; import './App.css'; 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, } ]) const nextId = useRef(4); const onInsert = useCallback( text => { const todo = { id: nextId.current, text, checked: false, }; setTodos(todos.concat(todo)); nextId.current += 1; // nextId +1씩 증가 }, [todos], ) const onRemove = useCallback( id => { setTodos(todos.filter(todo => todo.id !== id)); }, [todos], ) const onToggle = useCallback( id => { setTodos(todos.map(todo => todo.id === id ? {...todo, checked: !todo.checked} : todo, ),); }, [todos], ) return ( <> <TodoTemplate> <TodoInsert onInsert={onInsert}/> <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle}/> </TodoTemplate> </> ); } export default App; - 체크 코드에서는 배열 내장함수 map 을 사용하여 특정 id값을 가지고 있는 객체의 checked 값을 반전시켜줍니다.
항목 체크하기_2(TodoListItem.js/TodoList.js)
- 다음에는 삭제 기능처럼 TodoListItem에서 사용할 수 있도록 TodoList 를 거쳐가도록 코드를 추가해줍니다.
import React from "react"; import TodoListItem from './TodoListItem'; import './Todo.css'; const TodoList = ({todos, onRemove, onToggle}) => { return ( <div className="TodoList"> {todos.map(todo => ( <TodoListItem todo={todo} key={todo.id} onRemove={onRemove} onToggle={onToggle}/> ))} {/* <TodoListItem/> <TodoListItem/> <TodoListItem/> */} </div> ); }; export default TodoList;
import React from "react";
import {MdRemoveCircleOutline
, MdCheckBoxOutlineBlank
, MdCheckBox } from 'react-icons/md';
import cn from 'classnames';
import './Todo.css';
// import './TodoListItem.scss';
const TodoListItem = ({ todo, onRemove, onToggle }) => {
const { id,text,checked } = todo;
return(
<div className="TodoListItem">
<div className={cn(`checkbox`, { checked })} onClick={() => onToggle()}>
{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
{/* <MdCheckBoxOutlineBlank /> */}
<div className="text">{text}</div>
</div>
<div className="remove" onClick={() => onRemove(id)}>
<MdRemoveCircleOutline />
</div>
</div>
);
};
export default TodoListItem;
- 여기까지 작성하고나면 간단하게 할 일 메모 기능의 구현이 완료됩니다. 일단은 개인 공부할 겸 기록해놓는 포스팅이다보니 모든 내용이 책과 동일하며.. 아직까지 자세한 설명은 할 자신이 없습니다… 아주 많이 공부한 후에 직접 다양한 기능을 구현하도록 하겠습니다… 감사합니다!
Comments