#2 간단한 To-Do 앱 만들며 리액트 익히기 - 3

할 일 목록 추가하기

할 일 목록 추가하는 부분을 해보자.
할 일 목록을 입력하는 창과 입력 버튼을 구현할 것이다.

<UI 부분>

<form style={{ display: "flex "}} onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="value"
            style={{ flex: "10", padding: "5px" }}
            placeholder="해야 할 일을 입력하세요."
            value=""
          />

          <input 
            type="submit"
            value="입력"
            className="btn"
            style={{ flex: "1"}}
          />
        </form>

<기능 부분>

• 글 입력시 state 변경

state = {
	value: "",
};

<input
            type="text"
            name="value"
            style={{ flex: "10", padding: "5px" }}
            placeholder="해야 할 일을 입력하세요."
            value={value}
          />

handleChange = (e) => {
    this.setState({value : e.target.value})
  }

• 입력 버튼 클릭 시 목록에 추가하기, 입력란에 있던 글씨 지워주기

  handleSubmit = (e) => {
   
    e.preventDefault(); 

   let newTodo = {
     id: new Date(),
     title: this.state.value,
     complited: false,
   }

   this.setState({todoData: [...this.state.todoData, newTodo]})

  }

• 입력란에 있던 글씨 지워주기

  handleSubmit = (e) => {
   
    e.preventDefault(); 

   let newTodo = {
     id: new Date(),
     title: this.state.value,
     complited: false,
   }

   this.setState({todoData: [...this.state.todoData, newTodo], value: ""})

  }

Result

전개 연산자(Spread Operator)

전개 연산자는 무엇인가요?

전개 연산자는 ECMAScript6(2015)에서 새롭게 추가되었으며, 특정 객체 또는 배열의 값을 다른
객체, 배열로 복제하거나 옮길 때 사용한다. 연산자의 모양은 "..." 이다.

• 배열 조합
  
  

• 객체 조합
  
  전개연산자를 사용하지 않으면, 객체 자체가 들어간다.
  
  전개연산자를 사용하면, 객체 자체가 아닌 각각의 값이 할당 된다.

• 기존 배열을 보존
  
  전개연산자를 사용하지 않으면 원본 배열이 변경되지만,
  
  전개연산자를 사용하면, 원본 배열이 유지된다.

마무리 된 일 표시하기(조건부 삼항 연산자)

조건부 삼항 연산자란?

if(a) {
	a = "a";
} else {
	a = "b";
}

위와 같이 if문으로 작성한 것을,

a ? a = "a" : a = "b";

이렇게 한 줄로 작성할 수 있다.

이제 마무리 된 일에 표시를 하도록 구현해보자.

< 글 중앙에 선긋기>

getStyle = (completed) => {
    return {
      padding: "10px",
      borderBottom: "1px #ccc dotted",
      textDecoration: completed ?"line-through" :"none"
    }
  }

{this.state.todoData.map((data) => (
        <div style={this.getStyle(data.completed)} key={data.id}>
          <input type="checkbox" 
          defaultChecked={false} 
          onChange={() => this.handleCompleteChange(data.id)} />
          {data.title}
          <button style={this.btnStyle} 
          onClick={() => this.handleClick(data.id)}>x</button>
        </div>
      ))}

handleCompleteChange = (id) => {
    let newTodoData = this.state.todoData.map(data => {
      if(data.id === id) {
        data.completed = !data.completed; // 반대로
      }
      return data;
    })

    this.setState({ todoData: newTodoData });
  }

Result

이렇게 React로 To-do 앱을 만들어 보았다. 비록 간단한 앱일지라도 React의 기초를 충분히 담아낼 수 있었던 앱이었다.