지난 시간 조회와 입력을 하였다. 마지막회로 삭제와 갱신을 진행함.
삭제를 위해 컴퍼넌트를 import를 한다.
import IndividualTodo from './IndividualTodo'
컴퍼넌트를 변경해준다.
return 하는 위치에 컴퍼넌트를 생성한다.
{this.state.list.map((val, index)=>{
return(
<IndividualTodo
key={index}
id={val._id}
todo={val.todo}
/>
)
})}
삭제 이벤트가 있는 객체를 만든다.
버튼을 누르면 삭제 이벤트가 발생된다.
갱신 이벤트는 상태값을 true/false로 바꿔서 표현한다.
HelloMeteor.jsx로 가서 상태값을 추가해준다.
handleClick(){
var todo = this.state.todo;
var done = false; // 갱신을 위한 상태값 초기값은 false
//데이터를 입력한 하면 상태값도 함께 추가된다.
todoContainer.insert({todo, done},(err,done)=>{
console.log(err + 'id = ' + done);
});
this.setState({todo: ''});
this.refs.input.value = '';
}
생성시 상태값을 추가한다.
TodoList.jsx에서 done에 상태값을 IndividualTodo에게 파라메터로 넘겨준다.
<IndividualTodo
done={val.done}
key={index}
id={val._id}
todo={val.todo}
/>
저장되어있는 done 상태값을 표현한다.
IndividualTodo.jsx 컴퍼넌트에 갱신 이벤트를 넣어준다.
addLine(){
var id = this.props.id
var done = this.props.done
todoContainer.update(
{_id:id},{ $set:{ done: !done }
})
console.log("done ::: " + done)
}
todoContainer.update(
{_id:id},{ $set:{ done: !done }
})
프로퍼티의 고유의 id값을 가지고 done이 들어오면 부정(!)이니 반대로 갱신된다.
false들어오면 true. true가 들어오면 반대로 변경되어 갱신된다.
기존의 li 태그를 갱신 이벤트로 변경한다.
변경전
<li style={list}>{this.props.todo}</li>
변경후
<li onClick={this.addLine.bind(this)}>{this.props.todo}</li>
li를 클릭시 상태값이 true false로 토글되어짐을 알수 있다.
가시적으로 보여주기 위해 스타일을 넣었다.
const lineThrough = {
textDecoration: 'line-through',
listStyle: 'none',
display: 'inline-block',
marginRight: '10px',
cursor: 'pointer',
marginTop: '10px'
}
{this.props.done == true ? <li style={lineThrough} onClick={this.addLine.bind(this)}>{this.props.todo}</li>
: <li style={list} onClick={this.addLine.bind(this)}>{this.props.todo}
</li>}
true일때 취소선이 생기고 false일떄 사라진다.
최종결과
기능적으로 완료되었지만 스앵님께서 스타일을 준비하였네..
얼마나 이뻐질지 기대해본다 일단 패키지 하나 설치해준다.
cmd 창을 열어준다.
npm i -S react-flip-move
이뻐져 봅시다!
TodoList.jsx로 이동하여 import 한다.
import FlipMove from 'react-flip-move'
map쪽에 FlipMove로 감싸준다.
요렇게하면 추가 삭제시 애니메이션이 추가된다.
/client/main.html에 가서 부트스트랩 css를 추가한다.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
HelloMeteor.jsx로가서 class를 선언한다.
add 버튼을 꾸며준다.
const center = {
textAlign: 'center'
}
const input = {
borderRadius: '5px',
height: '30px',
width: '250px',
fontSize: '20px',
marginTop: '20px'
}
const margin = {
marginBottom: '6px'
}
className='btn btn-success'
add버튼과 폰트가 변했다.
IndividualTodo.jsx 페이지로 이동한다.
삭제 버튼에 클래스를 입힌다. className='btn btn-danger'
todo.css를 생성한다.
body {
padding: 50px;
background-color: #66CCFF;
font-family: sans-serif;
}
li {
color: #333;
background-color: rgba(255,255,255,.5);
padding: 15px;
margin-top: 10px;
margin-bottom: 15px;
border-radius: 5px;
display: block;
}
li:hover {
background-color: rgba(245,245,245,.5);
}
todo.css를 생성하고 css를 입력한다.
HelloMeteor.jsx에 추가한 css를 import를 한다.
import './todo.css'
꽃단장했어요.
막상 다 해보고 나니 react, meteor, mongoDb 겉핧기 식으로 되었네요
다음에는 이 소스를 기반으로 로그인이나 발행과 구독에 대해 디테일을 좀 잡아겠습니다.
일단 시작을 했으니 다음에는 번역가이드 같은 것 없이 직접 설명할 수 있도록 준비해야겠네요.
