$$config title: [React]리액트 틀만들기 Template.jsx keywords: - IT - ... $$ # 리액트 틀만들기 Template.jsx ## Template.jsx ```jsx import "../styles/TodoTemplate.scss"; function TodoTemplate({ children }) {//children이 꼭 들어가야함 대문자도들어가면안됨,TodoTemplate({children)}은 TodoTemplate안에 있는것을 출력가능하게함 return (

Todo list

{children}

// );// scss의 기본적인 틀을 만들어줌 } export default TodoTemplate; ``` children이 꼭 들어가야함 대문자도들어가면안됨 TodoTemplate({children)}은 TodoTemplate안에 있는것을 출력가능하게함 ## Template.scss ```scss .TodoTemplate {// css의 틀을만듬 width: 512px; margin: 6rem auto 0 auto; border-radius: 4px; overflow: hidden; } .app-title { //리스트제목 background: #9c88ff; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { background: white; } ``` ## App.js ```js import React, { useState } from "react"; import TodoTemplate from "./components/TodoTemplate"; function App() { return ( // App.js에 TodoTemplate.jsx 불러와 그안에 app.title,content 출력 )} export default App; ``` #### TIP. TodoTemplate에 펑션이 들어가있으면 App.js에서 import가 없어도 ~~~ ## TodoInsert.jsx ```jsx import React, { useState } from 'react'; import {MdAdd} from "react-icons/md" const TodoInsert = () => { const [value,setvalue] = useState(""); const onChange = () => {}; const onSubmoit = () => {}; return ( ); }; export default TodoInsert; ``` # App.js (TodoInsert 경로연결) ``` import React, { useState } from "react"; import TodoInsert from "./components/TodoInsert"; //경로연결 필수 import TodoTemplate from "./components/TodoTemplate"; function App() { return ( //TodoInsert 가져옴 // TodoTemplate.jsx 안에 app.title,content 출력 )} export default App; ``` ### 결과 ---- ~~~ 검색상자132.png

~~~ ## TodoInsert.scss 입력 타이핑치지말고 어디선가 가져다 쓰길. ```scss .TodoInsert { display: flex; background: #495057; input { width: 100%; background: none; outline: none; border: none; padding: 0.5rem; font-size: 1.125rem; line-height: 1.5; color: white; &::placeholder { color: #dee2e6; } } button { background: none; outline: none; border: none; background: #868e96; color: white; padding: 0 1rem; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; transition: 0.1s background ease-in; &:hover { background: #adb5bd; } } } ``` 입력후에 TodoInsert.jsx로가서 `import "../styles/TodoInsert.scss";` 입력 ```jsx import React, { useState } from 'react'; import {MdAdd} from "react-icons/md" import "../styles/TodoInsert.scss"; const TodoInsert = () => { const [value,setValue] = useState(""); const onChange = () => {}; const onSubmoit = () => {}; return ( ); }; export default TodoInsert; ``` ## 결과 ---- 하지만 입력창이 먹통이다. ~~~ 검색상자+scss.png

~~~ # App.js ```js import React, { useState,useRef } from "react"; //useRef 모듈 꼭 입력해야한다. import TodoInsert from "./components/TodoInsert"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]);//빈배열 입력받은배열을 넣어주는역할 const nextId= useRef(1);//아이디값을 반복해서출력해줌 const onInsert = (text) => { const todo = {//할일을 불러와야한다. id: nextId,//id순서대로 필요하고 text, //어떤일을할건가 문자열로 입력받아야한다 checked: false, }; setTodos((todos)=> todos.concat(todo));//(추가로직)todos는 빈배열이고 온인써트를입력받으면 todo에 값을 받아와서 todos에 담아준다. nextId.current++;//current는 현재값을 받아옴++는1씩증가 }; return ( //온인써트로 입력값 받음 //아직 입력값 콘솔로 출력중 // TodoTemplate.jsx 안에 app.title,content 출력 )} export default App; ``` ```jsx import React, { useState } from 'react'; import {MdAdd} from "react-icons/md" import "../styles/TodoInsert.scss"; const TodoInsert = ({onInsert}) => {//onInsert를 밖에서 받아와야함으로 써줌 const [value,setValue] = useState(""); const onChange = (e) => { setValue(e.target.value)//온체인지가 작동하면 벨류값을 셋벨류에 넣어주는역할 }; const onSubmoit = (e) => { e.preventDefault();//동작때마다 새로고침 중지 setValue("");//입력완료하면 비워줘야하니까 값삭제 onInsert(value);//todos 배열에 추가해주는 역할 }; return ( ); }; export default TodoInsert; ``` ## 결과 --- ~~~ 출력됨.png

~~~ # 여기서 부터 이해가 안간다. 그래도 정리를 해야... ## TodoListItem.scss --- 붙여넣도록하자. ```scss .TodoListItem { padding: 1rem; display: flex; align-items: center; } .TodoListItem-virtualized { & + & { border-top: 1px solid #dee2e6; } &:nth-child(even) { background-color: #f8f9fa; } } .checkbox { cursor: pointer; flex: 1; display: flex; align-items: center; svg { font-size: 1.5rem; } .text { margin-left: 0.5rem; } &.checked { svg { color: #9c88ff; } .text { color: #adb5bd; text-decoration: line-through; } } } .remove { display: flex; align-items: center; font-size: 1.5rem; color: #e84118; cursor: pointer; &:hover { color: #ff7f5f; } } .edit { display: flex; align-items: center; font-size: 1.5rem; cursor: pointer; margin-right: 1rem; } ``` ## TodoListItem.jsx ```jsx import React from 'react'; import { MdCheckBox, MdCheckBoxOutlineBlank, MdModeEditOutline, MdRemoveCircleOutline, } from "react-icons/md"; //아이콘모듈이니 인포트 해주도록한다. import cn from "classnames";//딸려온 아이콘모듈이다 인포트해주자 import "../styles/TodoListItem.scss"; //scss를 연동해준다. const TodoListItem = ({todo, onToggle}) => {//온토글, 할일 이취소선 수정 삭제가 필요해 할당함 const {id,text,checked}= todo;//순서,문자열,취소선 return (

{ onToggle(id);//버튼으로 취소선,수정,삭제가가능하게 할당-----------------------------밑으로는 아이콘,취소선,수정,삭제같은 css양식 }} className={cn("checkbox", { checked: checked })} > {checked ? : }

{text}

{}}>

);//------------------------------------------------------------------------------------------ }; export default TodoListItem; ``` ## App.js ```js import React, { useState,useRef } from "react"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]); const nextId= useRef(1); const onInsert = (text) => { const todo = {//할일을 불러와야한다. id: nextId.current,//id순서대로 필요하고 text, //어떤일을할건가 문자열로 입력받아야한다 checked: false, }; setTodos((todos)=> todos.concat(todo));//(추가로직)todos는 빈배열이고 온인써트를입력받으면 todo에 값을 받아와서 todos에 담아준다. nextId.current++;//current는 현재값을 받아옴++는1씩증가 }; const onToggle = (id) => { setTodos((todos) =>//todos배열을 바꿀꺼임 todos배열에서 todos.map((todo) =>//todos에게 map을 걸고 todo를 순회하면서 todo.id === id ? { ...todo, checked: !todo.checked } : todo /*todo에 id랑 onToggle로 받아온 id랑 같은애면 바꿔준다. 단, '...todo'는 id,text는 냅두고 checked: ! 반전시킨다. todo.checked를 결과적으로 체크드가 반전되므로 취소줄이 생김.*/ ) ); }; return ( // TodoTemplate.jsx 안에 app.title,content 출력 //onToggle을 TodoList에게 넘겨준다. 마찬가지로 todos도 넘겨준다. )} export default App; ``` ## TodoList.jsx --- ```jsx import React from 'react'; import TodoListItem from './TodoListItem'; const TodoList = ({todos, onToggle}) => {//App.js에서 넘겨준 onToggle 받아준다. return (

{todos.map((todo, index) => (//온토글이 눌리면 텍스트가 렌더링되는 로직 ))}

); }; export default TodoList; ``` # 취소선 결과 --- 취소선.png

# 삭제하기 만들기 ----------- ### App.js ```jsx const onRemove = id => { setTodos(todos => todos.filter(todo=>todo.id !== id)) ``` ```jsx ``` 또 Remove 클릭 클레스네임이있는 TodoListItem에 연동하기위해 TodoList에 넣어주고 ### TodoList ---- ```jsx const TodoList = ({ todos, onRemove, onToggle, setSelectedTodo }) => {//넘겨준걸 받으려면 <<<<에 넘겨받을 함수를 적어야한다. onRemove 써준다. return (

{todos.map((todo, index) => (// 온 토글이 눌리면 텍스트가 렌더링되는로직 ))}

); }; ``` TodoList로 와서 TodoList 함수에 onRemove를 써주고 TodoListItem에도 써준다. (TodoListItem에 onClick이있기때문) ### TodoListItem ```jsx const TodoListItem = ({todo, onToggle, onRemove ,setSelectedTodo})

{ onRemove(id); alert(`삭제되었습니다.`) }}> ``` 똑같이 TodoListItem 함수에 onRemove 넣어주고 밑단에 onClick 밑에 onRemove(id);를 써준다. 왜 굳이 지워야하는걸 페이지를 건너건너 여기로 왓냐고 궁금해할수있다. react-icons/md 에서 를 쓰려고 했기때문에 여기까지 함수를 불러온거임 ## 결과 삭제.png

# 수정하기 css창띄우기 ### App.js ```jsx import React, { useRef, useState } from "react"; import TodoEdit from "./components/TodoEdit"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]);//빈배열 입력받은배열을 넣어주는역할 const [insertToggle, setInsertToggle] = useState(false);//useState(false)는 초기값이 거짓이여야 처음에 실행이안된다. const nextId = useRef(1);//아이디값을 반복해서출력해줌 const onInsert = (text) => { const todo = {//할일을 불러와야한다. id: nextId.current,//id순서대로 필요하고 text: text,//어떤일을할건가 문자열로 입력받아야한다 checked: false, }; setTodos((todos) => todos.concat(todo));//(추가로직)todos는 빈배열이고 온인써트를입력받으면 todo에 값을 받아와서 todos에 담아준다. nextId.current++;//current는 현재값을 받아옴++는1씩증가 }; const onInsertToggle = () => {//onInsertToggle 실행되면setInsertToggle 실행 setInsertToggle((prev) => !prev);//prev는 현재값을 !반전시켜주면 실행되게끔 }; const onRemove = (id) => {//onRemove 실행되면 setTodos 실행 setTodos((todos) => todos.filter((todo) => todo.id !== id));//onRemove 함수를 만들어주고 //todos배열에 todos.filter(삭제한다)를 써서 todo입력한 아이디가 아닌것들만남는다. todo.id(배열아이디) !==(아닌것) id(선택한id값) }; const onToggle = (id) => { setTodos((todos) =>//todos배열을 바꿀꺼임 todos배열에서 todos.map((todo) =>//todos에게 map을 걸고 todo를 순회하면서 todo.id === id ? { ...todo, checked: !todo.checked } : todo /*todo에 id랑 onToggle로 받아온 id랑 같은애면 바꿔준다. 단, '...todo'는 id,text는 냅두고 checked: ! 반전시킨다. todo.checked를 결과적으로 체크드가 반전되므로 취소줄이 생김.*/ ) ); }; return ( {insertToggle && } //insertToggle 참일경우 TodoEdit에 함수가 들어감=onInsertToggle={onInsertToggle} ); } ``` ### TodoEidt.jsx ```jsx import React, { useState } from "react"; import "../styles/TodoEdit.scss"; const TodoEdit = ({ onInsertToggle }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault();//새로고침안되게 onInsertToggle();//수정팝업꺼지게 }; return (

); }; export default TodoEdit; ``` ### TodoList.jsx ```jsx import React from "react"; import TodoListItem from "./TodoListItem"; import "../styles/TodoList.scss"; const TodoList = ({ todos, onRemove, onToggle, onInsertToggle }) => {//받아온 함수 return (

))}

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

{//체크박스 id입력되면 취소줄 onToggle(id); }} > {checked ? : }

{text}

{//edit 아이콘이 눌리면 onInsertToggle(); 실행 onInsertToggle(); }} >

{//remove 아이콘이 눌리면onRemove(id); 실행 onRemove(id); }} >

); }; export default TodoListItem; ``` ### TodoEdit.scss ``` .background { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; background-color: rgba(0, 0, 0, 0.548); } .todoedit__insert { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; background-color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; h2 { box-sizing: border-box; width: 100%; margin: 0; text-align: center; padding: 0.5rem; background-color: #9c88ff; color: white; } input { margin: 2rem 0; padding: 0.3rem; border: none; outline: none; border-bottom: 1px solid #9c88ff; } button { cursor: pointer; background-color: #9c88ff; border: none; color: white; padding: 0.5rem 1rem; margin-bottom: 1rem; } } ```