TIL 및 WIL

JS로 실현한 부분을 React로 실행시켜보았다

 

//app.css
#title {
  color: blue;
  text-decoration: underline;
}

.wrap {
  display: flex;
  align-items: center;
}

.todo-card {
  border: 1px solid gray;
  padding: 2em;
  margin: 1em;
  border-radius: 5px;
}

button {
  width: 100px;
}

button:hover {
  background-color: orange;
}

//app.js
import React from "react";
import logo from "./logo.svg"; //폴더는 소문자로 시작하는 카멜케이스, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스
import "./App.css"; //컴포넌트 밖 함수밖에있는영역 (import하는부분),
//import Layout from "./components/Layout";

function App() {
  function completeTodo(e) {
    e.target.parentElement.style.backgroundColor = "green"; //e.target(자기자신 즉 button을 가리킴), e.target.parentElement(부모요소를 가리킴)
  }
  function addCard() {
    const new_todo = document.createElement("div"); //밑에 카드 하나씩 만들기
    new_todo.className = "todo-card";

    const title = document.createElement("h3");
    title.textContent = document.getElementById("add-input").value;

    const button = document.createElement("button");
    button.textContent = "완료하기";

    button.addEventListener("click", completeTodo); //addEventListener를 하면 자동적으로 parameter의 event객체를 가져옴

    new_todo.appendChild(title);
    new_todo.appendChild(button);
    document.getElementsByClassName("card-list")[0].appendChild(new_todo); //new_todo를 getElmentsByClassName으로 card-list의 첫번째 양식 붙이기
  }
  return (
    <div id="id" className="App">
      <h1 id="title">오늘의 할 일</h1>
      <div className="wrap">
        <div className="card-list"></div>
        <div className="add">
          <input id="add-input" />
          <button onClick={addCard}>추가하기</button>
        </div>
      </div>
    </div>
  );
}
export default App;

어느정도 리액트와 JS와의 관계를 잘 정립하였고 Component, State, Props의 관계 그리고 어떻게 class component보다 function component를 더 쓰게 되었는지(Hook의 등장) 등을 알게 되었고 앞으로 Redux와 Hook의 개념을 더 알아야 겠다는 생각을 하게 된다