React - ToDoTemplate Component 추가

 

오늘은 ToDoList Component를 만들어 보았습니다.

 

할 일을 추가하는 form과 input,

그리고 작성된 할 일들을 보여줄 개별 item component로 구성되어 있습니다.

 

---

# 오늘의 개념 사항

 

1. Props & State

 

"정적인 데이터 Props, 동적인 데이터 State"

 

Props는 정적인 데이터, 즉 컴포넌트에서 사용하는 데이터 중에서 변동되지 않는 데이터를 다룰 때 사용되는 것입니다.

 

React에서 제공하는 예시를 보겠습니다.

function sum(a, b) {
  return a + b;
}

위의 예시는 일반적인 JavaScript 함수입니다.

위의 함수는 입력값을 바꾸려고 하지 않고 항상 변화를 주지 않은 입력값에 대해서 결과를 반환하기에,

"순수 함수"라 칭합니다.

 

여기서 a, b와 같은 입력 값을 Props라 합니다.

 

반면 다음 예시를 보겠습니다.

function withdraw(account, amount) {
  account.total -= amount;
}

위의 예시는 입력값에 대해서 변화를 주고 있기 때문에 순수 함수가 아닙니다.

 

React에서는 Props를 다룰 때 반드시 순수 함수처럼 동작하게끔 규칙을 정해놓았습니다.

 

 

State는 동적인 데이터,  즉 시간에 따라 변할 수 있는 데이터입니다.

이는 저번 글에서 올렸던, 시계 Component를 만들 때 제가 사용한 데이터 유형입니다.

 

1초마다 Date 객체를 새로 가져와 시간 정보를 수정해서 새롭게 render 하여

화면에 시간이 바뀌는 것을 표현한 것입니다.

 

이를 더 이해하기 위해선 LifeCycle을 알아야 합니다.

 

 

2. 생명주기(LifeCycle)

 

생명주기 도표는 여기를 참고해주세요.

 

생명 주기라는 것은 Component가 만들어지고, 내용이 변경되어 업데이트되고, 그리고 다른 화면으로 넘어가면서 없어지는 순간까지를 말합니다.

 

Hook을 아직 배우지 않은 상태이기에, 현재 까지는 Class Component에서만 Life Cycle 함수들을 다룰 수 있습니다.

 

이 생명 주기를 다룬다면,

저번 글에서 프로젝트에 추가했던 시계 Component 같은 것을 만들 수 있습니다.

 

import React from "react";

class Today extends React.Component {
  state = {
    date: new Date()
  };

  render() {
    const year = this.state.date.getFullYear();
    const month = this.state.date.getMonth() + 1;
    const day = this.state.date.getDate();
    const hour = this.state.date.getHours();
    const minute = this.state.date.getMinutes();
    const second = this.state.date.getSeconds();

    return (
      <div className="todayDate">
        {year}.{month < 10 ? `0` + month : month}.{day < 10 ? "0" + day : day}
        <br />
        {hour < 10 ? "0" + hour : hour}:{minute < 10 ? "0" + minute : minute}:
        {second < 10 ? "0" + second : second}
      </div>
    );
  }
}

export default Today;

 

 

위의 코드로만 이루어졌다면, 시간이 흘러도 화면 상에는 Component가 처음 만들어지는 시각만을 표시할 뿐 시간이 흐르는 것을 보여 줄 수 없습니다.

 

import React from "react";

class Today extends React.Component {
  state = {
    date: new Date()
  };

  update = () => {
    this.setState({
      date: new Date()
    });
  };

  componentDidMount() {
    setInterval(this.update, 1000);
  }

  render() {
    const year = this.state.date.getFullYear();
    const month = this.state.date.getMonth() + 1;
    const day = this.state.date.getDate();
    const hour = this.state.date.getHours();
    const minute = this.state.date.getMinutes();
    const second = this.state.date.getSeconds();

    return (
      <div className="todayDate">
        {year}.{month < 10 ? `0` + month : month}.{day < 10 ? "0" + day : day}
        <br />
        {hour < 10 ? "0" + hour : hour}:{minute < 10 ? "0" + minute : minute}:
        {second < 10 ? "0" + second : second}
      </div>
    );
  }
}

export default Today;

 

하지만 위의 코드에 render가 진행된 뒤에 실행되는 componentDidMount()를 이용해서 State를 주기적으로 업데이트시켜주면 시간이 흐름에 따라 화면에 표시되는 것도 변화할 것입니다.

 

현재 까지는 생명주기의 함수들 중 componentDidMount()만을 사용하고 있어 나머지 함수들을 어떤 상황에 사용해야 할지 파악되지는 않았습니다.

 

 

---

# 오늘의 작업

 

오늘 해본 것은 toDo List라면, 할 일을 입력할 수 있어야 하고 또 완료 항목에 대해선 완료했음을, 

그리고, 삭제해야 할 것들에 대해서는 삭제를 할 수 있는 형태가 필요하기 때문에 기본적인 형태를 잡아봤습니다.

 

 

App.js

import React from "react";
import Today from "./Today";
import ToDoTemplate from "./ToDoTemplate";

function App() {
  return (
    <div className="page-container">
      <header className="page-header">
        <h1>My Day</h1>
        <Today />
      </header>
      <div className="toDoList">
        <ToDoTemplate />
      </div>
    </div>
  );
}

export default App;

 

 

프로젝트의 중심이 되는 App.js에 <ToDoTemplate/>이라는 Component를 넣어 주었습니다.

 

 

ToDoTemplate.js

import React from "react";
import ToDoItem from "./ToDoItem";

class ToDoTemplate extends React.Component {
  state = {
    todoItems: [{ text: "Hi" }]
  };

  itemSubmit = event => {
    const todoTemplate = document.querySelector(".template-Container"),
      todoForm = todoTemplate.querySelector(".template-Form"),
      todoInput = todoForm.querySelector("input");

    event.preventDefault();
    todoInput.value = "";
  };

  componentDidMount() {
    const todoTemplate = document.querySelector(".template-Container"),
      todoForm = todoTemplate.querySelector(".template-Form");

    todoForm.addEventListener("submit", this.itemSubmit);
  }

  render() {
    const { todoItems } = this.state;

    return (
      <div className="template-Container">
        <form className="template-Form">
          <input type="text" placeholder="오늘의 할일" />
        </form>
        <div className="template-list">
          {todoItems.map(item => {
            return <ToDoItem text={item.text} />;
          })}
        </div>
      </div>
    );
  }
}

export default ToDoTemplate;

 

아직 기본적인 기능들 조차 넣지 못했지만, 앞으로 해당 Component에서 할 일들의 입력과 각각의 할 일 들에 대해서 삭제와 완료했음을 나타내기 위한 작업이 이루어질 수 있게 할 것입니다.

 

각각의 할 일 들에 대해서는 <ToDoTemplate/>에서 localStorage의 정보를 받아와

<ToDoItem/>이라는 Component에 정보를 전달해주어 list를 만들어 볼 것입니다.

 

 

ToDoItem

import React from "react";

function ToDoItem(props) {
  return (
    <div className="item-container">
      <div className="item-remove">✖</div>
      <div className="item-text">{props.text}</div>
      <div className="item-check">✔</div>
    </div>
  );
}

export default ToDoItem;

 

할 일들 각각에 대한 통일된 양식인 ToDoItem Component입니다.

 

 

ToDoTemplate 추가 후 화면

 

위는 현재의 결과 화면이며 아직 CSS 작업은 하지 않고 진행 중입니다.

 

다음 글에선 할 일 입력이 발생하면 localStorage에 저장을 하고, 또 ToDoItem에 값을 넘겨주어 출력되는 것 까지 확인해보겠습니다.

 

 

---

# 참고 자료

https://velopert.com/3480

React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 | VELOPERT.LOG

 

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

---

# 작성 록

 

2020/03/09

 

오늘 한 것보다 더 많은 작업을 하고 싶었지만, ToDoList의 각 Item들이 가질 값들이 어떤 것이 필요하고, 날짜마다 다른 ToDoList를 저장시킬 방법을 찾다가 늦어졌습니다.

 

다음 글을 작성할 땐 위 문제들 중 하나라도 해결한 뒤 작성할 것 같습니다.