{"componentChunkName":"component---src-templates-blog-js","path":"/blog/react/react_20200410/","result":{"data":{"markdownRemark":{"html":"

React Project 1 - ToDo List

\n
\n

Intro

\n
\n

React를 이용해 간단한 Todo-List 페이지를 만들어 보았다.

\n

결과 화면은 다음과 같다.

\n

\"1\"

\n

참고 : Velopert님의 React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기

\n
\n

필요한 컴포넌트

\n
\n\n
\n

상태 관리 방법

\n
\n

<컴포넌트 전체 구조>

\n

\"2\"

\n

하위 컴포넌트들끼리 직접 데이터를 주고받는 방식은 규모가 커졌을 때 유지보수 하기가 힘들다.

\n

따라서, 모든 컴포넌트들은 부모를 통하여 데이터를 주고받아야 한다.

\n

즉, 부모 컴포넌트에서 자식 컴포넌트에 state값과 함수들을 전달하면, 자식 컴포넌트에서는 props로 받아와 기능을 수행할 수 있다. (전달할 함수의 기능은 부모 컴포넌트에서 구현한다. )

\n
\n

App에서 정의할 변수

\n
\n\n
\n

Form 컴포넌트에서 필요한 기능

\n
\n
    \n
  1. 텍스트 내용 바뀌면 state 업데이트 : handleChange(e)
    2. \n
  2. 버튼이 클릭되면 새로운 todo 생성 후 todos 업데이트 : handleCreate()
    3. \n
\n

⇒ concat() 함수를 이용하여 원래 배열의 데이터들이 포함된 새로운 배열을 생성한다.

\n
    \n
  1. 인풋에서 Enter 누르면 버튼을 클릭한것과 동일한 작업진행하기 : handleKeyPress(e)
    2. \n
\n
\n

Palette 컴포넌트에서 필요한 기능

\n
\n
    \n
  1. 특정 색이 클릭되면 state의 color값 업데이트 : handleSelectColor(color)
    2. \n
\n
\n

TodoItemList 컴포넌트에서 필요한 기능

\n
\n
    \n
  1. \n

    아이템이 클릭될 때마다 상태값 반전 (toggle 기능) : handleToggle(id)

    \n

    ⇒ 선택된 id를 가진 아이템의 index와 해당 객체를 추출하고 (selected),

    \n

    const nextTodos = [...todos] 를 이용하여 원래 배열의 데이터가 담긴 새로운 배열(nextTodos)을 생성한다.

    \n

    선택된 객체(selected)의 나머지 데이터는 그대로 둔 채 checked 값만 반전시킨다.

    \n
    2. \n
  2. \n

    아이템 제거 기능 : handleRemove(id)

    \n

    ⇒ filter(todo=> [todo.id](http://todo.id/)!==id) 이용.

    \n
    3. \n
\n
\n

전체 Code

\n
\n

App.js

\n
import React, { Component } from \"react\";\nimport TodoListTemplate from \"./components/TodoListTemplate\";\nimport Form from \"./components/Form\";\nimport TodoItemList from \"./components/TodoItemList\";\nimport Palette from \"./components/Palette\";\n\n/* TODO: Form 컴포넌트에서 필요한 기능\n1. 텍스트 내용 바뀌면 state 업데이트\n2. 버튼이 클릭되면 새로운 todo 생성 후 todos 업데이트\n3. 인풋에서 Enter 누르면 버튼을 클릭한것과 동일한 작업진행하기 */\n\nconst colors = [\"#343a40\", \"#f03e3e\", \"#12b886\", \"#228ae6\"];\n\nclass App extends Component {\n    id = 3;\n    state = {\n        input: \"\",\n        todos: [\n            { id: 0, text: \"hi\", checked: false },\n            { id: 1, text: \"react\", checked: true },\n            { id: 2, text: \"welcome\", checked: false }\n        ],\n        color: \"#343a40\"\n    };\n    handleChange = e => {\n        this.setState({\n            input: e.target.value\n        });\n    };\n    handleCreate = () => {\n        const { input, todos, color } = this.state;\n        this.setState({\n            input: \"\",\n            todos: todos.concat({\n                id: this.id++,\n                text: input,\n                checked: false,\n                color\n            })\n        });\n    };\n    handleKeyPress = e => {\n        if (e.key === \"Enter\") {\n            this.handleCreate();\n        }\n    };\n    handleToggle = id => {\n        const { todos } = this.state;\n        const index = todos.findIndex(todo => todo.id === id);\n        const selected = todos[index];\n        const nextTodos = [...todos];\n        nextTodos[index] = {\n            ...selected,\n            checked: !selected.checked\n        };\n        this.setState({\n            todos: nextTodos\n        });\n    };\n    handleRemove = id => {\n        const { todos } = this.state;\n        this.setState({\n            todos: todos.filter(todo => todo.id !== id)\n        });\n    };\n    handleSelectColor = color => {\n        this.setState({\n            color\n        });\n    };\n    render() {\n        const { input, todos, color } = this.state;\n        const {\n            handleChange,\n            handleCreate,\n            handleKeyPress,\n            handleToggle,\n            handleRemove,\n            handleSelectColor\n        } = this;\n        return (\n            <TodoListTemplate\n                form={\n                    <Form\n                        value={input}\n                        color={color}\n                        onKeyPress={handleKeyPress}\n                        onChange={handleChange}\n                        onCreate={handleCreate}\n                    />\n                }\n                palette={\n                    <Palette\n                        colors={colors}\n                        selected={color}\n                        onSelect={handleSelectColor}\n                    />\n                }\n            >\n                <TodoItemList\n                    todos={todos}\n                    onToggle={handleToggle}\n                    onRemove={handleRemove}\n                />\n            </TodoListTemplate>\n        );\n    }\n}\nexport default App;
\n

TodoListTemplate.js

\n
import React from \"react\";\nimport \"./TodoListTemplate.css\";\n\nconst TodoListTemplate = ({ form, palette, children }) => {\n    return (\n        <main className=\"todo-list-template\">\n            <div className=\"title\">오늘 할 일</div>\n            <section className=\"palette-wrapper\">{palette}</section>\n            <section className=\"form-wrapper\">{form}</section>\n            <section className=\"todos-wrapper\">{children}</section>\n        </main>\n    );\n};\nexport default TodoListTemplate;
\n

Form.js

\n
import React from \"react\";\nimport \"./Form.css\";\n\nconst Form = ({ value, color, onChange, onCreate, onKeyPress }) => {\n    return (\n        <div className=\"form\">\n            <input\n                value={value}\n                onChange={onChange}\n                onKeyPress={onKeyPress}\n                style={{ color }}\n            />\n            <div className=\"create-button\" onClick={onCreate}>\n                추가\n            </div>\n        </div>\n    );\n};\nexport default Form;
\n

Palette.js

\n
import React from \"react\";\nimport \"./Palette.css\";\n\nconst Color = ({ color, active, onClick }) => {\n    /* 구현 */\n    return (\n        <div\n            className={`color ${active && \"active\"}`}\n            style={{ background: color }}\n            onClick={onClick}\n        ></div>\n    );\n};\n\nconst Palette = ({ colors, selected, onSelect }) => {\n    const colorList = colors.map(color => (\n        <Color\n            color={color}\n            active={selected === color}\n            onClick={() => onSelect(color)}\n            key={color}\n        />\n    ));\n    return <div className=\"palette\">{colorList}</div>;\n};\nexport default Palette;
\n

TodoItemList.js

\n
import React, { Component } from \"react\";\nimport TodoItem from \"./TodoItem\";\nimport \"./TodoItemList.css\";\n\nclass TodoItemList extends Component {\n    shouldComponentUpdate(nextProps, nextState) {\n        return this.props.todos !== nextProps.todos;\n    }\n    render() {\n        const { todos, onToggle, onRemove } = this.props;\n        /*  const todoList = todos.map(\n            ({id,text,checked})=> (\n                <TodoItem   \n                    id={id}\n                    text={text}\n                    checked={checked}\n                    onToggle={onToggle}\n                    onRemove={onRemove}\n                    key={id}\n                />\n            )\n        ) */\n        const todoList = todos.map(todo => (\n            <TodoItem\n                {...todo}\n                // 내부의 값들이 모두 자동으로 props로 설정됨\n                onToggle={onToggle}\n                onRemove={onRemove}\n                key={todo.id}\n            />\n        ));\n        return <div>{todoList}</div>;\n    }\n}\nexport default TodoItemList;
\n

TodoItem.js

\n
import React, { Component } from \"react\";\nimport \"./TodoItem.css\";\n\nclass TodoItem extends Component {\n    shouldComponentUpdate(nextProps, nextState) {\n        return this.props.checked !== nextProps.checked;\n    }\n    render() {\n        const { text, checked, id, color, onToggle, onRemove } = this.props;\n        console.log(id);\n\n        return (\n            <div className=\"todo-item\" onClick={() => onToggle(id)}>\n                <div\n                    className=\"remove\"\n                    onClick={e => {\n                        e.stopPropagation();\n                        onRemove(id);\n                    }}\n                >\n                    &times;\n                </div>\n                <div\n                    className={`todo-text ${checked ? \"checked\" : \"\"}`}\n                    style={{ color: color }}\n                >\n                    <div>{text}</div>\n                </div>\n                {checked && <div className=\"check-mark\">✓</div>}\n            </div>\n        );\n    }\n}\nexport default TodoItem;
","id":"e119e6ad-e5f0-5477-bfba-fbdced635ddb","frontmatter":{"title":"[React] React Project 1 - ToDo List ","date":"2020-04-10T00:00:00.000Z","description":null},"fields":{"slug":"/blog/react/react_20200410/"}}},"pageContext":{"slug":"/blog/react/react_20200410/"}}}