지난번에 말씀 통통 초기 화면 띄우기를 진행하였다.
datacodingschool.tistory.com/146
React 프론트 개발 기초 ver 1
리액트 개발 기초 노트 1) 노드 설치(노드를 통해서 여러가지 리액트 라이브러리를 사용할 수 있다.) 2) 터미널을 열고 아래 명령어를 칩니다. yarn은 개선된 버전의 npm입니다. brew install yarn 잘 진
datacodingschool.tistory.com
오늘은 해당 프로젝트를 이어가면서
필요한 컴포넌트를 만들어보겠다.
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)}
}>×</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) 과연 잘 될 것인가!! 떨린다 한번 실행해보자~~
오! 잘된다~~~ 성공!
근데 버튼을 누르면 아래와 같은 에러가 발생한다.
구현이 되어 있지 않아서 발생하는 자연스러운 현상이다^
