1 소개

2020년 9월 현재

일본어로 React에 대해 검색하면 Class base로 작성된 기사는 자주 발견되지만 react hooks를 사용하여 작성된 (함수)로 작성된 기사가 적다고 느낍니다.
해외 사이트를 보고 있으면, React의 기술을 Class base로 쓰고 있는 사람은, 2020년 9월 현재 거의 없습니다.
기사가 쓰여진 시기가 2년 전이라고 거의 Class base 입니다만,,, (2018년 11월 react hooks 발표전 or 직후)
현재는 React Hooks를 사용하여 함수로 작성하는 것이 주류입니다. (간결하게 쓸 수 있기 때문에)
그래서 지금부터 React를 공부하는 혹은 공부하기 시작하시는 분은 React Hook을 사용한 앱 제작을 추천합니다.

2 개요

React hooks를 사용하여 이런 느낌의 Todo 앱을 만들어 갑니다.
Todo 를 Create, Complete, Delete 합니다.
· github 링크 : htps : // 기주 b. 코 m / 토키 P로 g 라민 g / 도도 st



디렉토리 구성

   +-- backend ...
   |
   |
   |
   +-- frontend
       |   
       +-- src 
            |   
            +-- Components
            |   +-- Todo.js
            |   +-- Todo.css
            |   +-- TodoList.js
            |   +-- TodoList.css
            |
            +-- App.js 
            +-- App.css
            +-- index.js
            +-- index.css

3 App.js

App.js

import React from 'react';
import './App.css';
import Todo from "./Components/Todo";


function App() {
  return (
    <div className="app">
        <div className='body__card'>
            <h1>My TodoList</h1>
            <div className='body__todo'>
                <Todo />
            </div>
        </div>
    </div>
  );
}

export default App;

4.Todo.js

Todo.js

import React, {useState} from 'react';
import './Todo.css';
import {TransitEnterexit} from "@material-ui/icons";
import TodoList from "./TodoList";


function Todo() {
    const [todos, setTodos] = useState([])
    const [value, setValue] = useState('')

    //Create
    const CreateTodo = (e) =>{
        e.preventDefault();

        // console.log('create new todos')
        setTodos([...todos, { id: Math.random()*1000, text:value, isCompleted: false }]);
        setValue('')
    }

    // Complete
    const completeTodo = (id) => {
        const done = todos.map(todo => {
            if (todo.id === id) {
                todo.isCompleted = !todo.isCompleted
            }
            return todo
        })
        setTodos(done)
    };

    // Delete
    const deleteHandler = (id) => {
        setTodos(todos.filter(todo => todo.id !== id))
    } ;


    return (

        <div className="todo">
            <div className='todo__body'>
                <form
                    className="todo__input__form">
                    <TransitEnterexit/>

                    <input
                        className="todo__input"
                        value={value}
                        onChange={event => setValue(event.target.value)}
                        placeholder="  Set  your  todo . . . . ."
                    />
                    <button
                        disabled={!value}
                        type="submit"
                        onClick={CreateTodo}>submit</button>
                </form>
            </div>

            <div className='todo__todolist'>
                <ul>
                    {todos.map(todo => (
                        <TodoList
                            todo={todo}
                            key={todo.id}
                            // 他のcomponentには、関数も引き渡すことができます。
                            completeTodo = {completeTodo}
                            deleteHandlers = {deleteHandler}
                        />
                    ))}
                </ul>
            </div>
        </div>
      )
 }
 export default Todo

react hooks 중에서 가장 자주useState사용할 때는 먼저 import react, {useState} from 'react';에서 useState를 import합니다.
이것을 잊으면 'useState' is not defined no-undef 에러 표시가 되어 버립니다.
Todo.js에서,

    const [todos, setTodos] = useState([])
    const [value, setValue] = useState('')

두 개의 useState를 정의했습니다.
(1) const [todos, setTodos] = useState([]) 에서는, 실제로 작성하는 Todo를 배열에 격납해 가기 위한 것입니다.

예를 들어, 다음과 같이 다시 작성하면 알기 쉽다고 생각합니다.

const[todos, setTodos] = useState([
    {
        id:1,
        text: "todo1",
        isCompleted: false
    },
    {
        id:2,
        text: "todo2",
        isCompleted: false
    },
])

(2) const [value, setValue] = useState('')실제로 Tot를 작성하는 폼 기능을위한 useState입니다.
공식: htps : // 그럼. Rea ctjs. 오 rg / 드 cs / 호오 ks - 레페 렌세. HTML # 우세 s 갓
예를 들어, const [value, setValue] = useState('Yoooooo')를 작성하면 양식 필드에 미리 Yoooooo가 쓰여집니다.

·Todo 작성

//Create
    const CreateTodo = (e) =>{
        e.preventDefault();

        // console.log('create new todos')
        setTodos([...todos, { id: Math.random()*1000, text:value, isCompleted: false }]);
        setValue('')
    }

e.preventDefault(), form를 submit 할 때 페이지가 새로 고쳐지지 않습니다.... 이제 배열을 복사합니다. 엄청 심플하네요.setTodos([配列をコピー, "追加"])"追加" : { id: Math.random()*1000, text:value, isCompleted: false }id 는 uniqueId이어야 하기 때문에 uuid 를 사용하는 방법이 일반적이지만 Math.random() 로 무작위 숫자를 만듭니다. 나머지는 text:value , isCompleted: false 를 설정해 둡니다.

·Todo 완료

// Complete
    const completeTodo = (id) => {
        const done = todos.map(todo => {
            if (todo.id === id) {
                todo.isCompleted = !todo.isCompleted
            }
            return todo
        })
        setTodos(done)
    };

map() 함수: htps : // 그럼. Rea ctjs. 오 rg / 두 cs / ㎃ st - 안 d 케 ys. html # 에 m 뻬 ぢ g ー ー ー ー jsxtodo.isCompleted = !todo.isCompleted 선택한 todo에서 isCompleted를 반대로 합니다.

·Todo 삭제

filter() 함수를 사용합니다.

// Delete
    const deleteHandler = (id) => {
        setTodos(todos.filter(todo => todo.id !== id))
    } ;

5 TodoList.js

Todo에서 만든 state와 function (関数)를 전달합니다.

import React, {useState} from 'react';
import './TodoList.css';

import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import DoneIcon from '@material-ui/icons/Done';
import {Edit} from "@material-ui/icons";

function TodoList( {todo, completeTodo, deleteHandlers, updateHandler } ) {



    return (
        <div className="todoList">
            <div
                className='todolist__card'
                style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
            >
                <DoneIcon
                    onClick={() => completeTodo(todo.id)}
                />
                {(todo.isCompleted) ? (
                    <p className="doneTodo">{ todo.text }</p>
                ):(
                    <p>{ todo.text}</p>
                )}
                <DeleteForeverIcon
                    onClick={() => deleteHandlers(todo.id)}
                />
            </div>
        </div>
      )
 }

 export default TodoList

그리고 css를 작성하면 위의 Todo 앱이 완성됩니다.

github 링크 : htps : // 기주 b. 코 m / 토키 P로 g 라민 g / 도도 st