TIW 1월 27일 - todolist

todolist

폴더 구조

.
├── README.md
├── docker
├── react-app
│   ├── README.md
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── components
│   │   │   ├── List.js
│   │   │   └── Todo.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── serviceWorker.js
│   │   └── setupTests.js
│   ├── package.json
│   └── yarn.lock
├── server
├── package.json
└── yarn.lock

# tree 이용해서 directory 구조를 쉽게 가져왔다.
# tree . -I node_modules | pbcopy

App.js

function App() {
    return (
        <div className="App">
            <Todo />
        </div>
    );
}

Todo.js

import React, { useState } from 'react';
import styled from 'styled-components';
import { List } from './List';

const AddButton = styled.button`
    margin-left: 2px;
`;

export const Todo = () => {
    const [text, setText] = useState('');
    const [todoList, setTodoList] = useState([]);
    const [listKey, setListKey] = useState(0);

    const onChangeFunction = (evt) => {
        setText(evt.target.value);
    };

    const addFunction = (evt) => {
        if (!text) return;
        updateList();
    };

    const keyDownFunction = (evt) => {
        if (evt.keyCode !== 13) return;
        updateList();
    };

    const updateList = () => {
        setTodoList([...todoList, <List value={text} key={listKey} />]);
        setText('');
        setListKey(listKey + 1);
    };

    return (
        <>
            <input
                type="text"
                value={text}
                onKeyDown={keyDownFunction}
                onChange={onChangeFunction}
            ></input>
            <AddButton onClick={addFunction}>add</AddButton>
            <ol>{todoList}</ol>
        </>
    );
};

List.js

import React from 'react';

export const List = ({ value }) => <li>{value}</li>;

생각

• TIW을 하다보면 긴 코드도 생길텐데 github에 코드를 올리고 링크랑 내용을 올리는게 낫지 않을까 싶음
• 간단한 todolist를 만들어보려고 하는중. 크롱마스터님의 react hooks 이해하기 강의를 들었던 것이 생각나서 비슷하게 짜보려고 하고 있다. 오랜만에 react 코드를 작성하려고 하니까 낯선 것들이 있어서 TIW하길 잘했다는 생각이 들었다.
• ncloud에 docker-nodejs 서버를 올리고 db에서 list를 가져오고 업데이트하는 api를 제공하도록할 예정.. 인데 docker-nodejs 올리는 과정이 또 헷갈리고 시간이 걸릴 듯 하다.