본문 바로가기
react

[React]Todolist(useState사용)

by 남민섭 2023. 1. 31.
728x90
반응형

 

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  const [id, setId] = useState(3)
  const onChange = (e)=>{
    //console.log(e)
    setTodoState({
      ...todoState,
      InputText: e.target.value
    })
  }
  const onAddtodo = () => {
    const newTodoList = [
      ...todoState.todolist,
      {id: id, text: todoState.InputText, isDone: false}
    ]
    setTodoState({
      todolist: newTodoList,
      InputText: ""
    })
    setId(id + 1)
  }
  const onDelete = (id) => {
    const newTodoList = todoState.todolist.filter(todo=>{
      return todo.id !== id
    })
    setTodoState({
      ...todoState,
      todolist: newTodoList
    })
  }
  const onToggle = (id) => {
    const newTodoList = todoState.todolist.map(todo=>{
      return todo.id === id ? {...todo, isDone: !todo.isDone} : todo
    })
    setTodoState({
      ...todoState,
      todolist: newTodoList
    })
  }
  return (
    <div>
      <HeaderInput 
      InputText={todoState.InputText}
      onChange={onChange}
      onAddtodo={onAddtodo}/>
      <Todolist 
      todolist={todoState.todolist} 
      onDelete={onDelete}
      onToggle={onToggle}/>
    </div>
  );
};

export default App;

 

HeaderInput.js

import React from 'react';

const HeaderInput = ({InputText, onChange, onAddtodo}) => {
    return (
        <div>
            <h2>to do list</h2>
            <input 
            value={InputText}
            onChange={onChange}/>
            <button onClick={onAddtodo}>+</button>
        </div>
    );
};

export default HeaderInput;

 

Todolist.js

import React from 'react';

const Todolist = ({todolist, onDelete, onToggle}) => {
    return (
        <div>
            {todolist.map(todo=>{
                return <li key={todo.id} 
                style={{color: todo.isDone ? '#ccc': '#333'}}>
                    <span onClick={()=>onToggle(todo.id)}>{todo.text}</span>
                    <button onClick={()=>onDelete(todo.id)}>삭제</button></li>
            })}
        </div>
    );
};

export default Todolist;

 

 

 

하나씩 해보자면

 

HeaderInput.js 컴퍼넌트에  h2, input, button 을 그려준 후 App에서 조립하자

HeaderInput.js

import React from 'react';

const HeaderInput = () => {
    return (
        <div>
            <h2>to do list</h2>
            <input/>
            <button>+</button>
        </div>
    );
};

export default HeaderInput;

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';

const App = () => {
  return (
    <div>
      <HeaderInput/>
    </div>
  );
};

export default App;

 

화면에 h2와 input 렌더됬으면 useState 상태관리 만들어보자

 

import React, { useState } from 'react';
const [todoState, setTodoState] = useState

 

상태와 업데이트해주는 함수를 따로 변수로 만들어주기 위해 배열 구조분해 해주고 상태 초기값을 만들어주자

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  
  return (
    <div>
      <HeaderInput/>
    </div>
  );
};

export default App;

 

그리고 내용을 출력해주는 컴퍼넌트 만들고 App에 조립~

 

Todolist.js

import React from 'react';

const Todolist = () => {
    return (
        <div>
         
        </div>
    );
};

export default Todolist;

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  
  return (
    <div>
      <HeaderInput/>
      <Todolist/>
    </div>
  );
};

export default App;

 

HeaderInput.js에 InputText 빈문자열을 props로 보내고 Todolist.js에는 todolist를 props로 보내자

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  
  return (
    <div>
      <HeaderInput 
      InputText={todoState.InputText}/>
      <Todolist 
      todolist={todoState.todolist} />
    </div>
  );
};

export default App;

 

HeaderInput.js

import React from 'react';

const HeaderInput = ({InputText}) => {
    return (
        <div>
            <h2>to do list</h2>
            <input 
            value={InputText}/>
            <button>+</button>
        </div>
    );
};

export default HeaderInput;

 

 

Todolist.js

import React from 'react';

const Todolist = ({todolist}) => {
    return (
        <div>
            {todolist.map(todo=>{
                return <li key={todo.id}></li>
            })}
        </div>
    );
};

export default Todolist;

 

id 상태 관리 생성

const [id, setId] = useState(3)

id상태 3과 id업데이트 해주는 함수

input 에 change 이벤트 함수 생성 해보장~ 그리고 props로 HeaderInput으로 넘겨주자

 

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  //id 상태관리
  const [id, setId] = useState(3)
  
  //onChange
  const onChange = (e)=>{
    //console.log(e)
    setTodoState({
      ...todoState,
      InputText: e.target.value
    })
  }
  
  return (
    <div>
      <HeaderInput 
      InputText={todoState.InputText}
      onChange={onChange}/>
      <Todolist 
      todolist={todoState.todolist} />
    </div>
  );
};

export default App;

 

HeaderInput.js

import React from 'react';

const HeaderInput = ({InputText, onChange}) => {
    return (
        <div>
            <h2>to do list</h2>
            <input 
            value={InputText}
            onChange={onChange}/>
            <button>+</button>
        </div>
    );
};

export default HeaderInput;

 

list추가 click 이벤트 함수 생성 해보장~ 그리고 props로 HeaderInput으로 넘겨주자

App.js

 

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  //id 상태관리
  const [id, setId] = useState(3)
  
  //onChange
  const onChange = (e)=>{
    //console.log(e)
    setTodoState({
      ...todoState,
      InputText: e.target.value
    })
  }
  
  //onAddtodo
  const onAddtodo = () => {
    const newTodoList = [
      ...todoState.todolist,
      {id: id, text: todoState.InputText, isDone: false}
    ]
    setTodoState({
      todolist: newTodoList,
      InputText: ""
    })
    setId(id + 1)
  }
  return (
    <div>
      <HeaderInput 
      InputText={todoState.InputText}
      onChange={onChange}
      onAddtodo={onAddtodo}/>
      <Todolist 
      todolist={todoState.todolist} />
    </div>
  );
};​

 

HeaderInput.js

import React from 'react';

const HeaderInput = ({InputText, onChange, onAddtodo}) => {
    return (
        <div>
            <h2>to do list</h2>
            <input 
            value={InputText}
            onChange={onChange}/>
            <button onClick={onAddtodo}>+</button>
        </div>
    );
};

export default HeaderInput;

 

list삭제 click 이벤트 함수 생성 해보장~ 그리고 props로 Todolist 로 넘겨주자

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  //id 상태관리
  const [id, setId] = useState(3)
  
  //onChange
  const onChange = (e)=>{
    //console.log(e)
    setTodoState({
      ...todoState,
      InputText: e.target.value
    })
  }
  
  //onAddtodo
  const onAddtodo = () => {
    const newTodoList = [
      ...todoState.todolist,
      {id: id, text: todoState.InputText, isDone: false}
    ]
    setTodoState({
      todolist: newTodoList,
      InputText: ""
    })
    setId(id + 1)
  }
  
  //onDelete
  const onDelete = (id) => {
    const newTodoList = todoState.todolist.filter(todo=>{
      return todo.id !== id
    })
    setTodoState({
      ...todoState,
      todolist: newTodoList
    })
  }
  return (
    <div>
      <HeaderInput 
      InputText={todoState.InputText}
      onChange={onChange}
      onAddtodo={onAddtodo}/>
      <Todolist 
      todolist={todoState.todolist}
      onDelete={onDelete}/>
    </div>
  );
};​

 

Todolist.js

import React from 'react';

const Todolist = ({todolist, onDelete}) => {
    return (
        <div>
            {todolist.map(todo=>{
                return <li key={todo.id}>{todo.text}
                <button onClick={()=>onDelete(todo.id)}>삭제</button>
                </li>
            })}
        </div>
    );
};

export default Todolist;

 

list 목록 글자 색을 바꿔보자!!!!  click 이벤트 함수 생성  그리고 props로 Todolist 로 넘겨주자

 

App.js

import React, { useState } from 'react';
import HeaderInput from './components/HeaderInput';
import Todolist from './components/Todolist';

const App = () => {
  const [todoState, setTodoState] = useState({
    todolist : [
      {id: 1, text: "할일1", isDone: true},
      {id: 2, text: "할일2", isDone: false}
    ],
    InputText: ""
  })
  //id 상태관리
  const [id, setId] = useState(3)
  
  //onChange
  const onChange = (e)=>{
    //console.log(e)
    setTodoState({
      ...todoState,
      InputText: e.target.value
    })
  }
  
  //onAddtodo
  const onAddtodo = () => {
    const newTodoList = [
      ...todoState.todolist,
      {id: id, text: todoState.InputText, isDone: false}
    ]
    setTodoState({
      todolist: newTodoList,
      InputText: ""
    })
    setId(id + 1)
  }
  
  //onDelete
  const onDelete = (id) => {
    const newTodoList = todoState.todolist.filter(todo=>{
      return todo.id !== id
    })
    setTodoState({
      ...todoState,
      todolist: newTodoList
    })
  }
  
  //onToggle
  const onToggle = (id) => {
    const newTodoList = todoState.todolist.map(todo=>{
      return todo.id === id ? {...todo, isDone: !todo.isDone} : todo
    })
    setTodoState({
      ...todoState,
      todolist: newTodoList
    })
  }
  
  return (
    <div>
      <HeaderInput 
      InputText={todoState.InputText}
      onChange={onChange}
      onAddtodo={onAddtodo}/>
      <Todolist 
      todolist={todoState.todolist}
      onDelete={onDelete}
      onToggle={onToggle}/>
    </div>
  );
};​

 

Todolist.js

import React from 'react';

const Todolist = ({todolist, onDelete, onToggle}) => {
    return (
        <div>
            {todolist.map(todo=>{
                return <li key={todo.id}
                style={{color: todo.isDone ? '#ccc': '#333'}}>
                <span onClick={()=>onToggle(todo.id)}>{todo.text}</span>
                <button onClick={()=>onDelete(todo.id)}>삭제</button>
                </li>
            })}
        </div>
    );
};

export default Todolist;

 

완성!!!!!!

728x90
반응형

'react' 카테고리의 다른 글

[React]todolist(redux사용)  (0) 2023.02.20
[React]todolist(reducer 사용)  (0) 2023.02.20
[React]redux  (0) 2023.01.27
[React]multer,postman  (0) 2023.01.20
[React]Node.js  (1) 2023.01.19

관련글

댓글

티스토리툴바