React & SpringBoot를 이용한 To-do List 만들기(2) - React를 이용한 Front-end 설계(1)

들어가며

---

React & SpringBoot를 이용한 To-do List 만들기(1)에 이어 (2)에서는 React 설정 방법 및 구현 내용을 정리하고자 한다.

 

 

프로젝트 생성 및 Create React App 설치

---

node.js가 설치 안되어있다면 설치 후에 터미널을 이용해 프로젝트를 생성 후 해당 폴더에서 Create React App(React 프로젝트 생성 도구)을 설치해준다. (git을 연동하려면 git init 후 연동을 마친 다음에 설치해주도록 하자)

npx create-react-app "프로젝트명"

다음 명령어를 통해서 react app을 설치해준다. 아래와 같이 나오면서 열심히 설치가 진행된다.

설치가 완료되면 정해준 프로젝트명으로 폴더가 생겼을 것이다. 들어가주면 다음과 같이 설치가 된 모습을 확인할 수 있다.

터미널로 해당 폴더로 이동 후 npm start 를 입력하여 실행 시켜준다. 실행 후 기본 포트인 3000번으로 접속하면 다음과 같이 기본 index 페이지를 확인할 수 있다.

 

 

프로젝트(create-react-app) 구조

---

기본적으로 node_modules / public / src 폴더로 구성되어 있다. src 폴더 하위에 App.js 파일과 src 폴더 하위에 폴더를 생성하여 Component별로 js 파일을 생성하여 front단을 구성할 예정이다.

 

React의 중요한 파일 3가지

---

구현에 들어가기 전에 React에서 알고가야할 중요한 파일 3가지를 정리하고 간다.

1. index.js - src 폴더에 포함되어 있고 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 Javascript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다. 최초에 'react', 'react-dom' 모듈을 로드하고 있고, 이것들이 React의 본체이다. ReactDOM.render(첫번째 인수, 두번째 인수) -> 첫번째 인수에서 App.js으로 정의하고 있는 App컴포넌트를 지정하고 두번째 인수에서 root라는 ID의 요소를 지정한다.

2.App.js - 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용등은 여기에서 정의한다.

3. index.html - public 폴더에 위치하며 메인 프로그램인 index.js에 대응되는 것으로 HTML 템플릿 파일이다. index.js에 의해 읽어와서 렌더링된 결과가 표시된다.

 

프로젝트 기본페이지 초기화

---

제일 먼저 React에서 제공하는 기본페이지를 초기화하는 작업 먼저한다. 위에 파일 설명에서 본 것 처럼 실제 화면에 표시되는 내용을 정의하는 App.js 파일을 수정한다. 

import React from 'react';

class App extends React.Component {
  render() {
    return (
        <div>
          초기화 작업!
        </div>
    );
  }
}

export default App;

컴포넌트 구성하기

---

To-do list를 구성하기 위한 Component를 정의하기 위해 src 하위에 components폴더를 생성 후 css파일과 js파일을 나눠 관리한다.

컴포넌트는 구성하기 나름이지만 여기서는 TodoListTemplate / TodoForm / TodoItemList / TodoItem 으로 나눠서 구성하였다. 해당 컴포넌트들의 js파일과 css파일을 생성해준다. 만약 컴포넌트의 수가 많다면 컴포넌트별로 폴더를 분리하여 관리하는 것이 개발 유지보수에 더 용이할 수 있다.

 

TodoListTemplate js, css

---

TodoListTemplate은 위에 생성될 form, item, itemlist를 담고 있을 가장 큰 단위에 컴포넌트이다.

TodoListTemplate.js을 만들어 아래 코드를 작성하자. (경로는 src/components/js 하위에 만든다.)

import React from 'react';
import '../css/TodoListTemplate.css';

const TodoListTemplate = ({ form, children }) => {
    return (
        <main className="todo-list-template">
            <div className="todo-list-title">
                To-do List
            </div>
            <section className="form-wrapper">
                {form}
            </section>
            <section className="todoItemList-wrapper">
                {children}
            </section>
        </main>
    );
};

export default TodoListTemplate;

해당 컴포넌트를 함수형 컴포넌트로 form과 children 두가지 props을 받는다. 여기서 props란 부모가 자식한테 넘겨주는 값이며 읽기전용이다. form과 itemList를 받을 것이다. 이어서 css 파일도 작성해주자.

.todo-list-template {
    background: white;
    width: 90%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    margin: 0 auto;
    margin-top: 4rem;
}

.todo-list-title {
    padding: 2rem;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 100;
    background: rgba(88, 120, 248, 0.88);
    color: white;
}

.form-wrapper {
    padding: 1rem;
    border-bottom: 1px solid rgba(88, 120, 248, 0.88);
}

.todoItemList-wrapper {
    min-height: 5rem;
}

여기까지만 한다고 변경되는 것이 아니다. 바로 App.js 파일에서 TodoListTemplate 컴포넌트를 정의해줘야 한다. 

import TodoListTemplate from './components/js/TodoListTemplate';

을 통해 경로를 잡아주고 <TodoListTemplate>을 다음과 같이 정의해준다.

import React from 'react';
import TodoListTemplate from './components/js/TodoListTemplate';

class App extends React.Component {
  render() {
    return (
        <TodoListTemplate>
            To-do List를 작성해주세요!!
        </TodoListTemplate>
    );
  }
}

export default App;

여기까지 되었다면 다음과 같이 바뀐 것을 확인할 수 있다.

TodoListTemplate의 props가 잘 전달되었는지 확인하기 위해 크롬에서 제공하는 확장 프로그램인 React Developer Tools을 설치하면 아래와 같이 크롬 디버거에서 정보들을 확인할 수 있다. (설치 링크 -> https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

 

TodoForm js, css

---

TodoForm은 오늘 할 일을 입력 받는 Form이다. Form 컴포넌트는 다음과 같이 총 4개의 props를 받는다. 

value, onChange, onCreate, onKeyPress

value : 인풋 내용

onChange : 인풋 내용이 변경 될 때 실행되는 함수

onCreate : 버튼이 클릭될 때 실행되는 함수

onKeyPress : 인풋에서 키를 입력할 때 실행되는 함수

import React from 'react';
import '../css/TodoForm.css';

const TodoForm = ({ value, onChange, onCreate, onKeyPress }) => {
    return (
        <div className="form">
            <input
                value={value}
                placeholder="오늘 할 일을 입력해주세요!"
                onChange={onChange}
                onKeyPress={onKeyPress} />
            <div className="create-button" onClick={onCreate}>
                추가
            </div>
        </div>
    );
};

export default TodoForm;

작성이 다 되었다면 TodoForm.css 를 추가해준다.

.form {
    display: flex;
}

.form input {
    flex: 1;
    font-size: 1.25rem;
    outline: none;
    border: none;
    border-bottom: 1px solid #353b54e0;
}

.create-button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 1rem;
    background: #353b54e0;
    border-radius: 3px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.create-button:hover {
    background: #353b54e0;
}

이번에도 마찬가지로 컴포넌트를 추가하였기 때문에 변경 내용을 반영하기 위해서 App.js 파일을 변경해준다.

import React from 'react';
import TodoListTemplate from './components/js/TodoListTemplate';
import Form from './components/js/TodoForm';

class App extends React.Component {
  render() {
    return (
        <TodoListTemplate form={<Form />}>
            To-do List를 작성해주세요!!
        </TodoListTemplate>
    );
  }
}

export default App;

변경 후 크롬디버거를 통해 TodoForm 컴포넌트가 잘 전달되었는지 확인이 가능하다.

 

마치며

---

생각보다 내용이 길어져 다음 글에서 TodoItemList / TodoItem 을 구현하고 Front-end 설계를 마치려고 한다.