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

To-Do 앱 만들기 시작

바탕색을 aliceblue로 바꿔보자. 이는 index.css에 넣는다.

body {
  background-color: aliceblue;
}

컨테이너를 만들어보자. 이는 App.js에 작성한다.

export default class App extends Component {
  render() {
    return(
      <div className="container">
        <div className="todoBlock">
        	<div className="title">
        	<h1>할 일 목록</h1>
            </div>
        </div>
      </div>
    )
  }
}

컨테이너에 대한 디자인은 App.css에 작성한다. 그리고 이를 App.js에서 import하면 적용시킬 수 있다.

.container {
  margin : auto;
  max-width: 600px;
}

.todoBlock {
  padding : 30px;
  margin-top : 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: -9px 17px 13px rgb(0 0 0/16%);
}

Result

할 일 목록 UI 만들기(JSX, CSS 작성)

export default class App extends Component {
  btnStyle = {
    color : "#fff",
    border : "none",
    padding : "5px 9px",
    borderRadius: "50%",
    cursor : "pointer",
    float: "right"
  }

  getStyle = () => {
    return {
      padding : "10px",
      borderBottom: "1px #ccc dotted",
      textDecoration: 'none'
    }
  }

  render() {
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>

          <div style={this.getStyle()}>
            <input type="checkbox" defaultChecked={false}/>
            공부하기
            <button style={this.btnStyle}>x</button>
          </div>
        </div>
      </div>
    )
  }
}

Result

Map 메소드를 사용한 할 일 목록 나열

할 일 목록을 일일이 하나씩 다 작성하는게 아닌
map 메소드를 이용해 나열해보자.

map() 메소드란?

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 todoData = [
    {
      id: "1",
      title: "공부하기",
      complited: true
    },
    {
      id: "2",
      title: "청소하기",
      complited: false
    }
  ]

  render() {
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>

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

Result

JSX Key 속성 이해하기

만약 리스트에 key 속성을 넣지 않는다면?

위와 같은 에러가 발생한다.

JSX Key 속성은 무엇인가?

리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야한다.

키는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.

React는 가상 돔을 이용해 변경된 부분만 실제 돔에 적용해준다. 이때, key를 이용해 어떠한 부분이 변경되었는지 인식할 수 있다.

key에는 유니크한 값을 넣어준다.(key = {index}는 비추천.)

index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게 된다.

새로 맨 앞에 들어온 리스트가 그 전에 있던 index를 key값으로 가져서 이러한 현상이 일어난다.

Filter 메소드를 사용해서 할 일 목록 지우기

filter() 메소드는 자바스크립트에서 배열을 필터링하여 주어진 조건에 부합하는 요소들로 이루어진 새로운 배열을 생성하는 함수이다.

할 일 목록 삭제 버튼을 클릭해 목록을 삭제해보자.

클릭 이벤트 발생 시 함수를 호출하게끔 구현하자.

 handleClick = (id) => {
    let newTodoData = this.todoData.filter(data => data.id != id)
    console.log('newTodoData', newTodoData)
  }
  
  render() {
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>

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

Result

React State 란?

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 한다.

React State란 무엇인가?

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다.
(State가 변경되면 컴포넌트는 리랜더링(Re-rendering)된다. 또한 State는 컴포넌트 안에서 관리된다.)

• React State 생성하기

 state = {
    todoData: [
      {
        id: "1",
        title: "공부하기",
        complited: true
      },
      {
        id: "2",
        title: "청소하기",
        complited: false
      }
    ]
  } 
  //this.todoData를 모두 this.state.todoTata로 변경.

• State를 이용한 할 일 목록 제거하기

  handleClick = (id) => {
    let newTodoData = this.state.todoData.filter(data => data.id != id)
    this.setState({todoData : newTodoData})
  }
  //todoDate를 newTodoData로 변경

Result

3장에서 이어서 계속 해보자!