React - 시계 Component 추가

오늘은 간단하게 React 기본 내용 복습 겸 어떤 기능들을 넣어 볼지 생각을 해봤습니다.

 

# 오늘의 React 개념 사항

 

1. Component

 

"함수 혹은 Class의 형태로 HTML을 반환하는 것."

 

Component는 React App을 만들게 되면 항상 만들게 될 React의 기본 단위입니다.

기본적으로 Component라 함은 내부적 작업을 거쳐서 HTML을 반환하는 것으로 이해됩니다.

Component는 function단위, 혹은 class 단위로 작성 가능합니다.

 

브라우저를 통해서 볼 수 있는 결과물들은 각각의 요소 하나하나가 Component로 이루어져 있습니다.

 

 

 

2. JSX

 

"JavaScript와 HTML의 결합물"

 

대부분이 JavaScript의 개념에 의존해서 쓰이는 React이지만, 

거의 유일하게 React에서 제시하고 있는 개념이 JSX입니다.

JavaScript와 HTML의 혼합물로 React에서는 다음과 같은 예시를 들고 있습니다.

 

 

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

 

위의 예제에서 2번째 줄이 JSX입니다.

 

일반적인 HTML문장처럼 보이지만 h1태그들 사이에 중괄호가 보입니다.

중괄호 안에는 1번째 줄에서 선언한 name변수를 사용하고 있습니다.

JSX의 중괄호 안에서는 JavaScript의 어떠한 표현식이든 입력이 가능하다고 말하고 있습니다.

 

 

 

# 오늘의 작업

 

 

오늘은 코딩을 한 것보단,

React 개념 및 Component 작성 방법 그리고 App을 어떻게 만들지에 대해 고민했습니다.

따라서 간단히 시계 Component를 추가해봤습니다.

 

물론 이를 위해 component의 life cycle과 state 같은 개념을 사용했지만,

이는 다음 글을 작성할 때 더 공부해서 작성해보겠습니다.

 

아래는 오늘 결과 화면과 작성한 코드입니다.

 

 

오늘의 작업물 결과 화면

 

 

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;

 

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

function App() {
  return (
    <section>
      <header className="page-header">
        <h1>My Day</h1>
        <Today />
      </header>
      <h2>To Do List</h2>
    </section>
  );
}

export default App;

 

---

참고자료

 

React Docs https://reactjs.org/docs/getting-started.html

Getting Started – React

 

NomadCoders https://academy.nomadcoders.co/

Academy

 

---

작성 록

2020/03/05

오늘은 React 개념들을 위주로 다시 익히고, functional component와 class component의 비교,

그리고 지속적으로 update 돼야 하는 clock component를 function으로 만들어보고자 시도했습니다.

 

아쉽게도 state를 계속 update 하는 법을 class로 하는 방법밖에 안 떠올라, class로 작성했지만 차차 functional component로 대부분을 해결할 수 있게끔 해보겠습니다.