[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 === 'Enter') {
      this.handleCreate();
    }
  }
  handleCreate = () => {
    this.setState({
      input:'',
      todo:this.state.todo.concat({
        text:this.state.input,
        check:false
      })
    })
  }
  handleDelete = (index) => {
    this.setState({
      todo:this.state.todo.filter((_, i) => i !== index)
    })
  }

app.js에 ReactTodo Class 내에 위와같이

handleInput(input태그에 내용을 입력할때 마다 setState로 input값을 변경) 이벤트,

handleKey(input태그에 포커스 상태에서 enter키를 누르면 handleCreate 함수 실행) 이벤트, 

handleCreate(추가 버튼 클릭시 setState로 todo배열에 값을 추가하고, input은 초기화) 이벤트,

handleDelete(리스트의 삭제 버튼시 setState로 todo 배열 삭제) 이벤트를 추가합니다. 

그리고 state에 input값을 추가합니다.

 

2. babel plugin 설치

여기까지 진행하고 저장을 누르면 아마 Parcel에서 번들링 하는 과정에서 에러가 나면서 번들링이 실패할 것입니다. 

Class내에서 함수를 사용할때 arrow function을 활용하려면 단순히 babel코어만으로는 정상적으로 번들링 되지 않기 때문인데요.

 

터미널로 이동하여 npm install --save-dev babel-plugin-transform-class-properties  를 입력하여 패키지를

설치하고 .babelrc를 열어 

{
    "presets": ["env", "react"],
    "plugins": ["transform-class-properties"]
}

위와같이 수정해준 후 다시 npm start를 입력하면 정상적으로 번들링 됩니다.

 

3. props로 함수 전달

render() {
    return (
      <div className="container">
        <div className="head-area">
          <h1>React To do list</h1>
        </div>
        <div className="content">
          <TodoInput onInput={this.handleInput} value={this.state.input} onKey={this.handleKey} onCreate={this.handleCreate}/>
          <TodoList list={this.state.todo} onRemove={this.handleDelete}/>
        </div>
        
      </div>
    )
  }

input.js에 render부분을 위와같이 수정하여 input영역에 3개의 함수와 하나의 state값을 props로 넘기고, 리스트영역에는 삭제 함수를 추가로 전달해줍니다.

 

<div className="input-area">
	<input type="text" text="" value={this.props.value} onChange={this.props.onInput} onKeyPress={this.props.onKey}/>
	<button onClick={this.props.onCreate}>추가</button>
</div>

input.js를 위와같이 수정하고,

<div className="list-area">
	<ul>
		{list.length && list.map(({text,check},index) => 
			<li key={index}><span>{text}</span> <button className="del" onClick={(e) => {this.props.onRemove(index)}}>삭제</button><button className="edit">편집</button></li>
		)}
	</ul>
</div>

todo.js를 위와같이 수정하겠습니다. (li의 key값은 해당 element의 고유값으로, 이 값을 할당하지 않아도 작동은 하지만, 개발자도구에서는 에러를 내보냅니다. 또한, 지금은 간단한 Todo list라 index로 처리했지만, 복잡한 어플리케이션일때는 Date나 기타방법을 활용하는게 좋습니다.)

 

여기까지의 작업은 https://github.com/kimik-hyum/react-todo/tree/babelplgin-install+event

 

*scss파일 및 package.json부분을 모든 브런치에서 수정하였습니다. window OS에서 build시 경로가 꼬이는 문제가 있어서 수정한 것이므로 혹시 build시 문제가 생기시는 분은 다시 pull받으시거나 git에 package.json부분을 복사 붙여넣기 해주세요.

 

*다음 포스트에서는 편집기능, 완료 체크기능과 브라우저의 local storage를 사용하여 실사용가능한 Todolist로 만드는 과정을 진행하겠습니다.