REACT Todolist 만들기 - 1

 

REACT에서 Todolist를 만들어봤습니다.

강의에서 배운 내용을 복습하면서 새롭게 만들어 보는 todolist

 

1. UI틀 만들기

2. styled-components로 꾸미고 간단한 속성 부여하기

 

 

3장. 멋진 투두리스트 만들기 · GitBook (vlpt.us)

3장. 멋진 투두리스트 만들기 · GitBook

디자인은 동일하며 참고하여 만들었습니다(직접 만드느라 코드가 완전히 같지는 않음 주의)

기능 구현은 useReducer를 배우지 않아 사이트를 참고하여 기능을 익히면서 만들어볼지 강의에서 배운 것을 생각해보며 만들어볼지 아니면 내가 하고 싶은대로 useContext를 활용하여 전역변수만 따로 만들지를 결정을 못해서 UI까지만 만든게 함정....

 

 

구성을 어떻게 할 지 정한다.

색만 다른 완전 똑같은 모습^^

아직 익숙하지 않아서 그런지 만들기 전에 어떻게 구성을 할건지 정하는게 훨씬 수월한거 같습니다.

어떤 구조로 만들지 정했으면 Components를 만든다.

위의 이미지 안의 이름과 동일함

 

app.js에 import하고 렌더링이 되는지 확인한다.

TodoListWrap안에 TodoListHeader, TodoListTotal, TodoListAdd가 있으며 TodoListTotal안에는 TodoListItem을 넣을 것이다.

import React from 'react';
import TodoListHeader from './Components/TodoListHeader';
import TodoListWrap from './Components/TodoListWrap';
import TodoListTotal from './Components/TodoListTotal';
import TodoListAdd from './Components/TodoListAdd';

const App = () => {
  return (
    <div>
      <TodoListWrap>
          <TodoListHeader></TodoListHeader>
          <TodoListTotal></TodoListTotal>
          <TodoListAdd></TodoListAdd>
      </TodoListWrap>
    </div>
  );
};

export default App;

 

 

1. TodoListWrap.js 내부 작성하기

모든 내용이 감싸지는 영역을 만들기 위한 용도

 

- 인자에 children을 넣어준다. 앞으로 app.js에서 <TodoListWrap>    </TodoListWrap>안에 들어가는 내용은 모두

TodoListWrap.js의 <TodoListWrapper>{children}</TodoListWrapper>안에 들어가게 될 것이다.

 

- styled-components를 import하고 꾸며준다.

import React from 'react';
import  styled  from 'styled-components';

const TodoListWrap = ({children}) => {
    return (
        <TodoListWrapper>
            {children}
        </TodoListWrapper>
    );
};

const TodoListWrapper = styled.div`
    width: 350px;
    height: 550px;
    margin: 6rem auto 0;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
`;

export default TodoListWrap;

 

 

2. TodoListHeader.js 내부 작성하기

상단에 오늘의 날짜와 남은 할일의 개수를 나타낼 용도

 

- 시간의 상태를 변화를 렌더링 하기 위해 useState()를 이용한다.

- useEffect()을 이용하여 문서가 마운트 되었을 때 바로 setInterval()을 실행시킬 수 있다.

- setInterval(함수, 1000) : 1초마다 함수를 실행시킨다.

- setTime(new Date()) 내장 객체인 Date()를 통해 날짜를 받아서 time에 값이 들어가게 한다.

 

- h1태그에 받은 날짜를 string으로 나타나게 한다(변수.toLocaleDateString())

 

- styled-components를 import하고 전체 상자를 꾸며준다.

(const 변수 = styled.시멘틱 태그` css내용 `;)

import React, {useEffect, useState} from 'react';
import  styled  from 'styled-components';

const TodoListHeader = () => {
    // 시간의 상태 변화를 렌더링 할 useState
    const [time, setTime] = useState(new Date());

    // 문서가 마운트 되었을 때 실행된다.
    // setInterval함수로 1초마다 새로운 시간을 받는다.
    useEffect(()=>{
        setInterval(()=>{
            setTime(new Date())
        },1000)
    },[])

    
    return (
        <TodoHeader>
            <h1>{time.toLocaleDateString()}</h1>
            <p>할일이 4개 남았습니다.</p>
        </TodoHeader>
    );
};

const TodoHeader = styled.div`
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    h1{
        margin-top: 10px;
    }
    p{
        margin-top: 1rem;
        color: #219ebc;
    }
`;

export default TodoListHeader;

 

 

3. TodoListAdd.js 내부 작성하기

할 일을 추가할 수 있는 버튼을 만들고 버튼을 누르면 입력할 수 있도록 하는 용도

 

- 버튼을 누르면 상태 변화가 되도록 useState()를 이용한다.

 

- styled-components를 import하고 꾸며준다.

- styled-components로 꾸민 스타일 내에 props를 이용하여 논리연산자로 css 변화를 주기 위해서

{css}를 import한다.

- react-icon의 아이콘을 이용하기 위해 {아이콘 태그}를 import 하고 꾸며준다.

(const 변수 = styled(아이콘태그이름)` css 내용 `;

import React, {useState} from 'react';
import styled from 'styled-components';
import {IoMdAddCircle} from 'react-icons/io';
import {css} from 'styled-components'

const TodoListAdd = () => {
    const [open, setOpen] = useState(false);
    return (
        <TodoAdd>
            <InputBox>
                <input></input>
            </InputBox>
            <TodoAddBtn></TodoAddBtn>
        </TodoAdd>
    );
};

const TodoAdd = styled.div`
    width: 100%;
    height: 120px;
    position: relative;
`;

const InputBox =styled.div`
    width: 100%;
    height: 120px;
    background: #ccc;
    text-align: center;
    input{
        width: 60%;
        height: 30px;
        margin-top: 15px;
    }
`;

const TodoAddBtn = styled(IoMdAddCircle)`
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 5px;
    font-size: 4rem;
    color: #219ebc;
    cursor: pointer;
    &:hover{
        color: #63e6be;
    }
    ${(props)=> props.open &&
    css`
    &:hover{
        color: #ff8787;
    }
    color: #ff8787; 
    transform: rotate(45deg)
    `}
`;
export default TodoListAdd;

 

useState의 open이 true가 되면 css` css내용 `;이 적용될 것이다.

${(props)=> props.open &&
    css`
    &:hover{
        color: #ff8787;
    }
    color: #ff8787; 
    transform: rotate(45deg)
    `}

 

useState의 변수를 활용하여 return내를 수정하였다.

- open이 true일 때만 검색하는 창이 나타난다.

- open의 기본 값은 false이지만 버튼을 누르면 true, false가 바뀌어야 하므로 onClick이벤트에 setOpen(!open)을 넣어준다.

const TodoListAdd = () => {
    const [open, setOpen] = useState(false);
    return (
        <TodoAdd>
            { open && <InputBox>
                <input></input>
            </InputBox>}
            <TodoAddBtn onClick={()=>setOpen(!open)} open={open}></TodoAddBtn>
        </TodoAdd>
    );
};

 

 

4. TodoListItem.js 내부 작성하기

낱개의 할일 리스트를 만든다. 체크 표시 아이콘 + 할일 내용 + 할일 삭제 아이콘 으로 구성할 것이다.

 

- styled-components를 import하고 꾸며준다.

- styled-components로 꾸민 스타일 내에 props를 이용하여 논리연산자로 css 변화를 주기 위해서

{css}를 import한다.

- react-icon의 아이콘을 이용하기 위해 {아이콘 태그}를 import 하고 꾸며준다.

(const 변수 = styled(아이콘태그이름)` css 내용 `;

import React from 'react';
import { BsCircle, BsCheckCircle, BsDashCircleFill } from 'react-icons/bs'
import  styled  from 'styled-components';
import {css} from 'styled-components'

const TodoListItem = () => {
    return (
        <TodoItem>
            <CheckBtn>체크표시</CheckBtn>
            <CircleBtn>원표시</CircleBtn>
            <TodoText>할일 내용</TodoText>
            <RemoveBtn>버리기</RemoveBtn>
        </TodoItem>
    );
};

const CheckBtn = styled(BsCheckCircle)`
    font-size: 1.5rem;
    color: #219ebc;
    cursor: pointer;
`;
const CircleBtn = styled(BsCircle)`
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
`;
const RemoveBtn = styled(BsDashCircleFill)`
    font-size: 1.5rem;
    color: #ff8787;
    display: none;
    cursor: pointer;
`;
const TodoItem = styled.div`
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    &:hover {
        background: #ddd;
        ${RemoveBtn}{
            display: initial;
        }
    }
`;
const TodoText = styled.div`
    flex: 1;
    padding-left: 10px;
    color: #333;
    ${props=> props.check && 
    css` 
    color: #888; 
    text-decoration: line-through;
    `}
`;


export default TodoListItem;

 

&:hover{ ${RemoveBtn}{ css 내용 } }는 해당 내용을 hover하면 RemoveBtn태그가 보이게 된다. ( RemoveBtn의 기본 css의 display : none의 상태)

useState의 check이 true가 되면 css` css내용 `;이 적용될 것이다.

const TodoItem = styled.div`
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    &:hover {
        background: #ddd;
        ${RemoveBtn}{
            display: initial;
        }
    }
`;
const TodoText = styled.div`
    flex: 1;
    padding-left: 10px;
    color: #333;
    ${props=> props.check && 
    css` 
    color: #888; 
    text-decoration: line-through;
    `}

 

TodoListItem의 인자 값을 생성한다. {id, text, check}

- check의 값에 따라 원 아이콘과 체크 아이콘이 번갈아서 나타날 것이다.

- TodoText의 check의 값에 check의 인자를 넣어서 css에서 이용할 수 있게 한다.

- text의 값은 <TodoText>의 children위치에 넣어준다. 인자에 내용이 들어가면 내용이 반영될 것이다.

const TodoListItem = ({id, text, check}) => {
    return (
        <TodoItem>
            { check ? <CheckBtn></CheckBtn> : <CircleBtn></CircleBtn>}
            <TodoText check={check}>{text}</TodoText>
            <RemoveBtn>버리기</RemoveBtn>
        </TodoItem>
    );
};

 

 

5. TodoListTotal.js 내부 작성하기

할일 list들을 전체 감싸는 용도

 

- TodoListItem의 컴포넌트를 가져온다. TodoListItem의 속성에 값을 입력한다. 

check의 값은 TodoListItem의 원 아이콘와 체크 아이콘 중에 맞는 값으로 활성화 할 것이다.

text의 값의 내용은 TodoListItem의 children자리에 들어갈 것이다.

 

- styled-components를 import하고 꾸며준다.

import React from 'react';
import  styled  from 'styled-components';
import TodoListItem from './TodoListItem';

const TodoListTotal = () => {
    return (
        <TodoTotal>
            <TodoListItem check={true} text="UI 구성 생각하기"></TodoListItem>
            <TodoListItem check={true} text="각각의 Components 만들기"></TodoListItem>
            <TodoListItem check={true} text="Styled-Components로 꾸미기"></TodoListItem>
            <TodoListItem check={false} text="기능 구현하기"></TodoListItem>
        </TodoTotal>
    );
};

const TodoTotal = styled.div`
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 10px;
`;

export default TodoListTotal;

 

 

 

UI 완성

리스트를 호버하면 회색 배경에 삭제아이콘이 나타납니다.

추가 버튼을 누르면 텍스트를 입력할 수 있는 상자가 나옵니다.

todolist 기본 UI작성

 

 

기능구현은 REACT Todolist 만들기 - 2 에서 계속....

2022.04.29 - [WEB] - REACT Todolist 만들기 - 2

REACT Todolist 만들기 - 2