react.js

React.js 스터디 – todo list를 위한 뷰

RYUHA/ editor

  • 0 comments
  • 809 views
  • 2017년 8월 7일

리액트를 이용해서 todo list를 만들어보자.
그 첫 번째 뷰 꾸미기.

# 웹스톰에서 리액트 시작하기

지난 글에서 웹스톰에서 리액트 앱 프로젝트를 선택해서 다른 모듈 설치 없이 시작하였습니다.

(그 방법 외에 직접 하나씩 모듈을 설치하고 싶다면 empty project 를 선택해서 시작하는 방법이 있습니다. 이 때는 따로 설치해야하는 모듈들이 좀 있습니다.)

 npm install -g babel webpack webpack-dev-server —save
 npm install react react-dom --save
 npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

-> 그 모듈들.

 


 

# todo list

그럼 이제 todo list를 시작해봅시다.

먼저 전체 뷰를 만들어보고, 컴포넌트로 분리해볼 거예요.

이제 리액트 프로젝트 파일을 열어 만들어보겠습니다.

지난 글에서 생성했던 프로젝트를 봅니다.

리액트에서는 기본적으론 App.js의 내용을 렌더링 해서 화면에 출력하게 되므로 원하는 뷰를 App.js 파일에 구현해주면 됩니다.

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header';
import Main from './components/Main';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header/>
        <Main/>
      </div>
    );
  }
}

export default App;

여기서 보면 기존에 우리가 알던 html 태그가 아닌 <Header/>, <Main/> 이란 태그가 새로 만들어 졌지요.

이것이 리액트의 뷰를 꾸며주는 컴포넌트 입니다. 저렇게 구분해주다 보니 원하는 부분만 업데이트가 가능하게 된 것입니다.

그러면 이 컴포넌트를 모듈화 시켜서 만들어봅시다.

src 디렉토리 아래에 components 디렉토리를 만듭니다. 이 안에 뷰에 사용되는 파일들을 생성할 것입니다.

그리고 그 안에 Header.js, Main.js 파일을 만들어주세요. 각각 화면의 아래 부분을 구성할 것입니다.

각각의 파일을 다음과 같습니다.

src/components/Header.js

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

const Header = () => {
    return (
        <div>
            <div className="title">
                Todo list
            </div>
        </div>
    );
};

export default Header;

 

src/components/Main.js

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

const Main = () => {
    return (
        <div>
            <div className="main">
                <div className="todolist">
                    <div className="todo_title">todo list</div>
                    <div className="inputBox">
                        <input className="inputItem" type="text" placeholder="insert your task"/>
                        <button>+</button>
                    </div>
                    <div className="listBox">
                        <ul>
                            <li>what todo 1</li>
                            <li>this is tutorial</li>
                            <li>examples</li>
                            <li className="active">hello todo list</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Main;

 

그럼 Main의 구성도 컴포넌트 화 시켜볼까요?

파일들을 더 만들어 줍니다. 저는 입력 부분과, 리스트 부분으로 나눠 보았습니다.

src/components/insertBox.js

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

const InsertBox = () => {
    return (
            <div className="inputBox">
                <input className="inputItem" type="text" placeholder="insert your task"/>
                <button>+</button>
            </div>
    );
};

export default InsertBox;

 

src/components/TodoContents.js

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

const TodoContent = () => {
    return (
            <div className="listBox">
                <ul>
                    <li>what todo 1</li>
                    <li>this is tutorial</li>
                    <li>examples</li>
                    <li className="active">hello todo list</li>
                </ul>
            </div>
    );
};

export default TodoContent;

 

그럼 Main 부분도 바뀌어야 겠지요?

src/components/Main.js

import React from 'react';
import './index.css';
import InsertBox from './InsertBox'
import TodoContent from './TodoContent'

const Main = () => {
    return (
        <div>
            <div className="main">
                <div className="todolist">
                    <div className="todo_title">todo list</div>
                    <InsertBox/>
                    <TodoContent/>
                </div>
            </div>
        </div>
    );
};

export default Main;

 

각 컴포넌트 모듈에서 export 해주고, 사용할 위치에서 import 해주면 됩니다.

import 부분은 기존에 우리가 알던 require와 같다고 보면 됩니다.

즉, import React from ‘react’는 var React = require(‘react’) 와 같은 것이지요.

 

 

이런 식으로 분리해서 사용하다 보면 유지, 보수 와 업데이트 면에서 상당히 유리해집니다. 하나하나 컴포넌트로 다 나누어도 되고 필요한 부분만 나누어도 되고 만드는 조건과, 방법에 따라 유연하게 사용하면 되겠습니다.

여기까지 기본 뷰를 구현했고 다음 글에선 state와 props 개념을 익히며 todo list의 간단한 추가, 삭제를 구현해봅시당.

 

*위 뷰의 css는 간단하게 짜주었습니다.

src/components/index.css

.title {
    height: 4rem;
    background-color: #5B2C36;
    width: 100%;
    line-height: 4rem;
    color: white;
    font-size: 2rem;
    font-weight: 200;
    text-align: left;
    padding-left: 2rem;
}

.main {
    width: 100%;
    line-height: 1.5rem;
    text-align: left;
    padding-left: 1rem;
}

.todolist {
    width: 500px;
    margin: 20px;
    text-align: left;
    padding: 1rem;
    border: 3px solid #EBCDD5;
    border-radius: 10px;
}

.todo_title {
    font-size: 2rem;
    color: #222222;
    font-weight: 300;
    margin: 0.5rem;
}

.inputBox {
    width: 500px;
    height: 50px;
    margin-left: 5px;
}

input[type="text"] {
    width: 400px;
    font-size: 1.1rem;
    color: #5B2C36;
    padding: 5px 10px;
    margin-right: 20px;
    border: none;
    border-bottom: solid 1px #c9c9c9;
    transition: border 0.3s;
}
input[type="text"]:focus,
input[type="text"].focus {
    outline: none;
    border-bottom: solid 2px #5B2C36;
    transition: border 0.3s;
}

button {
    width: 50px;
    color: #5B2C36;
    font-size: 1rem;
    background: rgba(0,0,0,0);
    border: solid 4px #5B2C36;
}
button:hover,
button.hover {
    border-color: #DE413A;
    color: #DE413A;
}

.listBox {
    width: 470px;
    margin-left: 5px;
}

.listBox ul {
    list-style: none;
    padding-left:0px;
}

.listBox ul li {
    height: 25px;
    margin: 5px 0px;
    font-size: 16px;
    font-weight: 300;
    color: #233B5D;
    border-bottom: 1px solid #f1f1f1;
}

.listBox .active{
    text-decoration: line-through;
    color: #bbbbbb;
}

 

 

RYUHA

만들어 보면서 하나씩 글 씁니당:)

Leave a Reply

avatar