mingg IT

[React] UI라이브러리를 사용하지 않은 코드 VS 컴포넌트 사용한 코드 본문

FrontEnd

[React] UI라이브러리를 사용하지 않은 코드 VS 컴포넌트 사용한 코드

mingg123 2021. 1. 13. 22:47

리액트의 가장 중요한 역할 

UI가 데이터가 변경되면 리액트가 컴포넌트 함수를 이용해서 화면을 자동으로 갱신해줌

 

UI라이브러리를 사용하지 않은 코드

<html>

    <body>

        <div class="todo">

            <h3>할 일 목록</h3>

            <ul class="list"></ul>

            <input class="desc" type="text"/>

            <button onclick="onAdd()">추가</button>

            <button onclick="onSaveToServer()">서버에 저장</button>

        </div>

        <script>

            let currentId = 1;

            const todoList = [];

            function onAdd(){

                const inputEl = document.querySelector('.todo .desc');

                const todo ={ id: currentId, desc: inputEl.value};

                todoList.push(todo);

                currentId +=1;

                const elemList = document.querySelector('.todo .list');

                const liEl = makeTodoElement(todo);

                elemList.appendChild(ilEl);

            }

            function makeTodoElement(todo) {

                const ilEl = document.createElement('li');

                const spanEl = document.createElement('span');

                const buttonEl = document.createElement('button');

                spanEl.innerHTML = todo.desc;

                buttonEl.innerHTML = '삭제';

                buttonEl.onclick = onDelete;

                ilEl.appendChild(spanEl);

                liEl.appendChild(buttonEl);

                return liEl;

            }

            function onDelete(e){

                const id = Number(e.target.dataset.id);

                const index = todoList.findIndex(item => item.id === id);

                if(index >= 0) {

                    todoList.splice(index, 1);

                    const elemList = document.querySelector('todo.list');

                    const liEl = e.target.parentNode;

                    elemList.removeChild(liEl);

                }

            }

            function onSaveToServer() {

                

            }

        </script>

    </body>

</html>

 

리액트로 작성한 코드 

function MyComponent() {

  const [desc, setDesc] = useSate("");

  const [currentId, setCurrentId] = useState(1);

  const [todoList, setTodoList] = useState([]);

  function onAdd() {

    const todo = { id: currentId, desc };

    setCurrentId(currentId + 1);

    setTodoList([...todoList, todo]);

  }

  function onDelete(e) {

    const id = Number(e.target.dataset.id);

    const newTodoList = todoList.filter((todo) => todo.id !== id);

    setTodoList(newTodoList);

  }

  function onSaveToServe() {}

  return (

    <div>

      <h3>할 일 목록</h3>

      <ul>

        {todoList.map((todo) => (

          <li key={todo.id}>

            <span>{todo.desc}</span>

            <button data-id={todo.id} onClick={onDelete}>

              {" "}

              삭제

            </button>

          </li>

        ))}

      </ul>

      <inpyt

        type="text"

        value={desc}

        onChange={(e) => setDesc(e.target.value)}

      />

      <button onClick={onAdd}>추가</button>

      <button onClick={onSaveToServer}>서버에 저장</button>

    </div>

  );

}

'FrontEnd' 카테고리의 다른 글

[React] 리액트 요소와 가상 돔  (0) 2021.01.13
[React] React.memo  (0) 2021.01.13
[JavaScript] 제너레이터(generator)  (0) 2021.01.12
[Javascript] Promise  (0) 2021.01.10
[JavaScript] const, var, let 차이점  (0) 2021.01.07
'FrontEnd' Related Articles more
Comments