React Todo App

https://velog.io/@soonmac/React-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

[React] 간단한 투두리스트 만들기

 

nodejs, react 설치하고

create-react-app 앱을 생성

 

 

**폴더 이름 만들때 반드시 소문자 **  

create-react-app .

 

npm install classnames react-icons saas

 

 

 

npm start run

 

https://react-icons.github.io/react-icons/

React Icons

 

 

App.js

import './App.css';
import TodoInsert from './components/TodoInsert';
import TodoTemplate from './components/TodoTemplate';

function App() {
  return (
    <TodoTemplate>
      <TodoInsert></TodoInsert>
      {/* <TodoListItem></TodoListItem> */}
    </TodoTemplate>
  );
}

export default App;

 

 

TodoListItem.js

import {
        
        MdCheckBoxOutlineBlank,
        MdCheckBoxckBox,
        MdRemoveCircleOutline
    } from 'react-icons/md';
import './TodoListItem.scss';

const TodoListItem = ({children}) => {
    return(
        <div className='TodoListItem'>
            <div className='checkbox'>
                <div className='text'>할일</div>
            </div>
            <div className='remove'>
                <MdRemoveCircleOutline/>
            </div>
        </div>
    )
}


export default TodoListItem;

 

 

TodoInsert.js

import {MdAdd} from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = ({children}) => {
    return(
        <form className='TodoInsert'>
            <input placeholder='할 일 입력하세요'></input>
            <button type='submit'>
                <MdAdd/>
            </button>
        </form>
    )
}


export default TodoInsert;

 

 

TodoTemplate.js

import './TodoTemplate.scss';

const TodoTemplate = ({children}) => {
    return(
        <div className='TodoTemplate'>
            <div className='app-title'>일정관리</div>
            <div className='content'>{children}</div>
        </div>
    )
}


export default TodoTemplate;

 

TodoTemplate.scss

.TodoTemplate{
    width: 512px;
    margin-left:auto;
    margin-right:auto;
    margin-top : 6rem;
    border-radius: 4px;
    overflow: hidden;
  
    .app-title{
      background-color:aquamarine;
      color:black;
      height:4rem;
      font-size:1.5rem;
      display:flex;
      align-items:center;
      justify-content: center;
    }
    .content{
      background-color: white;
    }
  }

 

TodoInsert.scss

.TodoInsert{
    display:flex;
    background:#495057;
    input{
      width:100%;
      background:none;
      outline: none;
      border:none;
      padding:0.5rem;
      font-size:1.135rem;
      line-height:1.5;
      color : white;
      flex:1;//?
    }
    button{
      background:none;
      outline: none;
      border:none;
      padding:0.5rem;
      color : white;
      padding-left:1rem;
      padding-right:1rem;
      font-size:1.5rem;
      align-items: center;
      cursor: pointer;
      &:hover{
        background: #adb5bd;;
      }
    }
  }