$$config title: [개인/React] Todolist 개인 정리2_수정하기 버튼 클릭시 팝업 및 초기텍스트 설정 keywords: - React - ... $$ # 복습메모 24강~29강 # 1. App.js ```js import React, { useRef, useState } from "react"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/TodoTemplate"; import TodoEdit from "./components/TodoEdit"; function App() { // todos = 할 일 목록. 빈 배열로 생성함. const [todos, setTodos] = useState([]); //insert창을 toggle한다는 소리. = 입력창을 껐다 켰다 하겠다는 의미. //여기서의 insert창은 수정하는 창이기 때문에 평소에는 꺼져있어야 함(false). const [insertToggle, setInsertToggle] = useState(false); //선택된(수정하기 버튼을 누른) 할 일로 배정하기 위한 선언. 첫 값은 null(아무것도 없음). const [selectedTodo, setSelectedTodo] = useState(null); // todo = 할 일 하나(input에서 입력한 값) // const [todo, setTodo] = useState(""); //ID값 설정. 코딩에서의 숫자는 0부터 시작하기 때문에 초기값을 1로 지정함. const nextID = useRef(1); //component > TodoInsert.jsx에서 작성한 onSubmit>onInsert(value) 값을 받아오기 위한 선언. // const onInsert = (text) => { const todo = { id: nextID.current, text: text, checked: false, }; //input으로 입력받은 todo(18번줄)를 todos의 빈 배열(6번줄)에 하나씩 추가(concat)함. setTodos((todos) => todos.concat(todo)); //이 상태로 두면 ID값은 몇 번을 입력해도 1로 고정되기 때문에, 입력이 되면 //자동적으로 숫자가 1씩 증가하도록 설정함. nextID.current++; }; const onInsertToggle = () => { // 반전해줌. → 수정하기 창이 꺼져있을 땐 켜지고, 켜져있을 땐 꺼짐. setInsertToggle((prev) => !prev); }; //변경이 일어나면 이 함수를 실행하겠다는 의미. //이 함수는 각 할 일의 수정하기 아이콘을 클릭하면, 그 내용을 id와 함께 배열에 넣겠다는 의미. //이렇게 작성하지 않고, 각 component에 지정한 onChangeSelectedTodo를 → setSelectedTodo로 바꾼 후 //TodoListItem의

todo)로 해도 결과는 똑같다. // (주석제거&삭제)const onChangeSelectedTodo = (todo) => { //selectedTodo(null, 아무것도 없는 값에 todo를 잡아준다는 뜻.) //수정하기를 클릭하면, 클릭한 할 일을 selectedTodo라는 배열에 넣어주겠다. // (주석제거&삭제)setSelectedTodo((selectedTodo) => todo); // (주석제거&삭제)}; // 리스트의 어떤 체크박스를 눌렀을 때 '어떤'을 특정하기 위해 onToggle로 체크박스 id값을 받아옴. //1번이라면 id에 1, 2번이라면 id에 2. const onToggle = (id) => { //Todos의 빈 배열을 바꿀 것 → 어떻게? setTodos((todos) => //todos에게 map 함수를 걸 것. → todos를 순회 할건데 그 중에 todos.map((todo) => //todo(할일 목록)의 id(todo.id)와 같은 id만 바꿀거야. //id가 같다면 다른 객체는 놔두고(...todo), checked만 바꿔줘(checked). //어떻게?(:) 지금 checked 상태의 반대로(!todo.checked) //나머지는 그대로 todo를 넣어줘(:todo) todo.id === id ? { ...todo, checked: !todo.checked } : todo ) ); }; //삭제버튼을 눌렀을 때 일어나는 함수를 작성. const onRemove = (id) => { //Todos의 배열을 받아와서 바꿀 것. 어떻게? setTodos( //todos가 의 배열에 filter를 걸 것. (filter? → 걸러내는 것) //ex) const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'] //const result = words.filter(word => word.length > 6); // result → ['exuberant', 'destruction', 'present'] // → words의 배열 중 6글자 이상인 것들만 filter로 걸러냄. //todo 안에서 todo.id가 아닌 것만 남기게 됨((todo)=> todo.id!==id). // = id에 해당 되는 것만 사라짐. (todos) => todos.filter((todo) => todo.id !== id) ); }; return ( {/* 37~41줄의 Logic을 TodoList.jsx에서 구현하여 44줄의 TodoList로써 가져오도록 함. */} {/*

{todo.text}

*/} {/* 둘 다 True일 때만 True임. insertToggle이 참이면 TodoEdit(을 띄워주고, insertToggle이 거짓이면 TodoEdit을 안 띄워줌 insertToggle은 아무 것도 들어있지 않기 때문에 기본적으로 True이며 그로인해 TodoEdit 또한 참이므로 항상 발동됨. => 위 선언에서 insertToggle은 false로 해두었기 때문에 평소에는 보이지 않음. 거기에 더해, 클릭하면 TodoEdit의 onInsertToggle을 실행하도록 함.*/} {insertToggle && ( )} ); } export default App; ``` # 2. components > TodoList.jsx ```js import React from 'react'; import TodoListItem from './TodoListItem'; //todo로 입력받은 값(todo(input), index(id))을 todos(빈 배열)에 넣어주겠다. //onToggle로 입력받은 값을 TodoListItem의 onToggle로 받겠다. //onRemove로 입력받은 값을 TodoListItem의 onRemove로 받겠다. //onInsertToggle로 입력 받은 값을 TodoListItem의 onInsertToggle로 받겠다. //setSelectedTodo로 입력 받은 값을 TodoListItem의 setSelectedTodo로 받겠다. const TodoList = ({ todos, onToggle, onRemove, onInsertToggle, setSelectedTodo }) => { return (

{todos.map((todo, index) => ( ))}

); }; export default TodoList; ``` # 3. components > TodoListItem.jsx ```js import React from 'react'; import { MdCheckBox, MdCheckBoxOutlineBlank, MdModeEditOutline, MdRemoveCircleOutline } from 'react-icons/md'; import cn from "classnames"; import '../styles/TodoListItem.scss'; const TodoListItem = ({ todo, onToggle, onRemove, onInsertToggle, setSelectedTodo }) => { const { id, text, checked } = todo; return (

{/* {todo.text}와 아래 내용은 같음(onClick제외). 다만 커스터마이징 차이. */} {/* 체크박스 클릭시 발생하는 내용 */}

{ onToggle(id); }} className={cn("checkbox", { checked: checked })}> {/* 체크됐을 때 ? <된 박스> : (안됐을때?) <안된 박스> */} {checked ? : }

{text}

{ onInsertToggle(); // 이전 상태(null)를 todo(입력값)으로 바꿈. // prev는 다른 단어여도 상관없음. setSelectedTodo((prev) => todo); }}> {/* 수정 아이콘 */}

{/* 삭제 버튼을 클릭 했을 때, id 값을 반환*/}

{ onRemove(id); }}> {/* 삭제 아이콘 */}

); }; export default TodoListItem; ``` # 4. components > TodoInsert.jsx ```js import React, { useState } from 'react'; import { MdAdd } from 'react-icons/md'; //↓style>TodoInsert.scss에 디자인(CSS)을 넣고 불러옴. import '../styles/TodoInsert.scss'; // 할 일 입력창(input, button) 관련 기능을 작성. const TodoInsert = ({ onInsert }) => { //Value값 초기 설정. App.js → 클릭(button)이 일어날 때마다 값을 지정해줘야 함. const [value, setValue] = useState(""); const onChange = (e) => { // input에 입력값을 받으면 그 값을 렌더링(보이게) 함. (=입력이 되게 함.) setValue(e.target.value); }; const onSubmit = (e) => { // 버튼이 클릭될 때마다 페이지 전체가 새로고침 되는 것을 막음. e.preventDefault(); // 할 일을 입력하고 버튼을 누르면 입력창을 초기화시킴. setValue(""); //onInsert → value를 Todos 배열로 추가해주는 함수. onInsert(value); //그러나 여기에서 만들면 App.js에서 사용할 수 없음. //그래서 밖에서 받아오기 위해 11번줄에 ({ onInsert })를 넣음으로써 //App.js에서 사용 가능하게 함. }; return ( ); }; export default TodoInsert; ``` # 5. components > TodoEdit.jsx ```js import React, { useEffect, useState } from 'react'; import '../styles/TodoEdit.scss'; const TodoEdit = ({ onInsertToggle, selectedTodo }) => { //무언가 입력을 해야하기 때문에 useState에는 ""를 넣음. const [value, setValue] = useState(""); const onChange = (e) => { //수정하기 input부분에 입력이 가능하도록 함. setValue(e.target.value); }; const onSubmit = (e) => { //[수정하기]를 클릭하면 새로고침 되는 것을 막기. e.preventDefault(); //[수정하기]를 클릭하면 수정하기 창이 꺼지도록 하기. onInsertToggle(); }; //수정하기를 클릭 했을 때, 클릭한 할 일이 text에 나오게 하기 위한 useEffect. //아래 input > value={value}를 {selectedTodo.text}로 바꿔줘도 되지만, 그러면 입력이 되지 않는다. //그렇기에 value={value}는 그대로 두고, 표시되는 항목만 바꿔야 함. //useEffect로 기본 value를 바꿔주는 작업 진행. useEffect(() => { // 2. value값을 selectedTodo.text로 바꾸겠다. setValue(selectedTodo.text); // 1. selectedTodo 값이 바뀐다면 ↑ },[selectedTodo]) return (

); }; export default TodoEdit; ``` # 6. components > TodoTemplate.jsx ```js import '../styles/TodoTemplate.scss' //전체적 UI 관련 연동 function TodoTemplate({ children }) { return (

Todo List

{children}

); } export default TodoTemplate; ```