Parcel5 [React] Todolist(feat.Parcel) Parcel 번들러를 이용한 셋팅부터 로컬스토리지로 실사용할 수 있게끔 만든 Todo list입니다. https://kimik-hyum.github.io/react-todo/ 2019. 5. 12. [React]내 멋대로 만드는 Todolist-4(feat.Parcel) 1.완료 체크 기능 추가 Todo list에 완료체크 기능을 위해 app.js에서 함수를 하나 만듭니다. handleCheck = (index) => { let todos = this.state.todo; todos[index].check = !todos[index].check; this.setState({ todo:todos }) } (todos라는 변수에 기존의 state.todo를 복사하고 todos라는 변수를 수정하여 setState로 담는 것은 state 자체를 직접 수정하면 안되기 때문입니다.) 매개변수로 클릭한 li의 index를 넘겨서 그 index값과 매칭된 배열의 check부분을 수정하여 setState를 하는 로직입니다. 그렇다면 해당 함수를 Props로 위와같이 넘겨줍니다. 그리고 .. 2019. 5. 11. [React]내 멋대로 만드는 Todolist-3(feat.Parcel) 이번 포스트에서는 input.js에 이벤트를 추가하여 input태그에 입력된 내용을 배열에 추가하여 화면에 표시하고, 삭제버튼으로 리스트를 삭제하는 기능을 구현하겠습니다. 또한 create-react-app으로 프로젝트를 시작할땐 알 수 없던 babel plugin을 설치해보겠습니다. 1. Event 함수 만들기 constructor(props) { super(props); this.state = { input:'', todo:[ {text:"할일목록1",check:false}, {text:"할일목록2",check:false} ] } } handleInput = (e) => { this.setState({ input:e.target.value }) } handleKey = (e) => { if(e.key.. 2019. 5. 3. [React]내 멋대로 만드는 Todolist-2(feat.Parcel) JSX로 마크업을 하고 props와 state를 활용하기 1.JSX로 마크업하기(app.js) import React from "react"; import ReactDOM from "react-dom"; import './scss/App.scss'; class ReactTodo extends React.Component { render() { return ( React To do list 추가 할일 목록1 삭제편집 할일 목록2 삭제편집 할일 목록3 삭제편집 할일 목록4 삭제편집 ) } } var app = document.getElementById("app"); ReactDOM.render(, app); 이전 포스트에서 작성했던 app.js의 내용을 위와같이 수정했습니다. JSX는 Javascript 내.. 2019. 4. 25. 이전 1 2 다음
