React 프론트 개발 기초 ver 2

지난번에 말씀 통통 초기 화면 띄우기를 진행하였다.

 

datacodingschool.tistory.com/146

React 프론트 개발 기초 ver 1

 

오늘은 해당 프로젝트를 이어가면서 

필요한 컴포넌트를 만들어보겠다.

 

 

 

1) 일단 component 에 form 이라는 폴더를 만든다.

mkdir form
cd form

 

 

 

그리고 여기서 Form.js랑 Form.css를 만들어준다.

 

Form.js

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

const Form = ({value, onChange, onCreate, onKeyPress}) => {
  return (
    <div className="form">
      <input value={value} onChange={onChange} onKeyPress={onKeyPress}/>
      <div className="create-button" onClick={onCreate}>
        추가
      </div>
    </div>
  );
};

export default Form;

 

Form.css

.form {
  display: flex;
}

.form input {
  flex: 1; /* 버튼을 뺀 빈 공간을 모두 채워줍니다 */
  font-size: 1.25rem;
  outline: none;
  border: none;
  border-bottom: 1px solid #c5f6fa;
}

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

.create-button:hover {
  background: #3bc9db;
}

 

2) App.js 에서 만든 Form을 사용해보자.

import React,{Component} from 'react';
import IndexTemplate from './components/index/IndexTemplate';
import Form from './components/form/Form';

class App extends Component{
    render(){
        return (
                <IndexTemplate form={<Form/>}>
                고민 해결
            </IndexTemplate>
        );
    }
}

export default App;

 

3) 이제 실행해볼까요?

cd ..
yarn start

 

 

네 ~ 테스트 입니다~~ 라는 인풋텍스트 창이 생기고 버튼도 생겼네요!!

 

자 이제 고민 해결 창에 고민을 나열해주는 컴포넌트를 만들어 보겠습니다.

 

4) 다시 새로운 컴포넌트 폴더를 만들어줍니다.

>> cd src/components

>> mkdir contents

>> cd contents

>> ema Content.js

 

Content.js 파일은 아래와 같습니다.

import React, { Component } from 'react';

class Content extends Component {
    render() {
        const { contents, onToggle, onRemove } = this.props;

        return (
                <div>

                </div>
        );
    };
};

export default Content;

 

 

 

 

5) 이제 Contents에 들어갈 item 컴포넌트를 만들어보겠습니다.

아래와 같이 component 위에 item 폴더를 만들어주고 폴더 안으로 들어갑니다.

 

 

 

그리고 Item.js 를 만들어줍니다.

import React, {Component} from 'react';
import './Item.css';

class Item extends Component {
    render(){
	const { text, checked, id, onToggle, onRemove } = this.props;

	return (
		<div className="content-item" onClick={() => onToggle(id)}>
		<div className="remove" onClick={(e) => {
		    e.stopPropagation(); // onToggle 이 실행되지 않도록 함
		    onRemove(id)}
		}>&times;</div>
		<div className={`item-text ${checked && 'checked'}`}>
		  <div>{text}</div>
		</div>
		{
		    checked && (<div className="check-mark">✓</div>)
		}
	    </div>
	);
    };
}

export default Item;

 

만들었으니, 이제 Item 스타일링을 해본다.

 

 

.content-item {
  padding: 1rem;
  display: flex;
  align-items: center; /* 세로 가운데 정렬 */
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.content-item:hover {
  background: #e3fafc;
}

/* content-item 에 마우스가 있을때만 .remove 보이기 */
.content-item:hover .remove {
  opacity: 1;
}

/* content-item 사이에 윗 테두리 */
.content-item + .content-item {
  border-top: 1px solid #f1f3f5;
}


.remove {
  margin-right: 1rem;
  color: #e64980;
  font-weight: 600;
  opacity: 0;
}

.item-text {
  flex: 1; /* 체크, 엑스를 제외한 공간 다 채우기 */
  word-break: break-all;
}

.checked {
  text-decoration: line-through;
  color: #adb5bd;
}

.check-mark {
  font-size: 1.5rem;
  line-height: 1rem;
  margin-left: 1rem;
  color: #3bc9db;
  font-weight: 800;
}

 

6) 이제 만들어진 Item 컴포넌트를 3개정도만 뿌려보자

다시 Content.js 로 파일로 돌아온다.(위치: components/contents/Content.js)

 

여기서 중요한 것은 경로이다.

아래 import Item from 에서 .. 이 두개이다( 1개는 자기 위치, 두개는 이전 폴더 위치를 의미)

import React, { Component } from 'react';
import Item from '../item/Item';

class Content extends Component {
    render() {
	const { contents, onToggle, onRemove } = this.props;

	return (
		<div>
		  <Item text="안녕"/>
		  <Item text="리액트"/>
		  <Item text="반가워"/>
		</div>
	);
    };
};

export default Content;

 

 

 

 

7) 이제 content를 App.js에 렌더링 해보자(만들었으니까 화면에 뿌려보자)

 

import React,{Component} from 'react';
import IndexTemplate from './components/index/IndexTemplate';
import Form from './components/form/Form';
import Content from './components/contents/Content';

class App extends Component{
    render(){
        return (
	    <IndexTemplate form={<Form/>}>
                <Content/>
            </IndexTemplate>
        );
    }
}

export default App;

 

 

 

8) 과연 잘 될 것인가!! 떨린다 한번 실행해보자~~

 

 

오! 잘된다~~~ 성공!

 

 

근데 버튼을 누르면 아래와 같은 에러가 발생한다.

 

 

구현이 되어 있지 않아서 발생하는 자연스러운 현상이다^