2. 간단한 TO-DO 앱 만들며 리액트 익히기 / 하

 05. To-Do 앱 만들기 시작 

[05] To-Do (할 일 목록) 앱

- 원래 있던 부분 지우기 

App.js , App.css , index.css

→ 안쪽 내용만 삭제 (파일 삭제X)

→ npm run start 로 앱 실행시 아무것도 없어야 정상

 

- 바탕 색 바꾸기

index. css 에 작성 (index.css 파일은 index.js 파일에서 import)

#index.js 파일에서 import 부분 삭제 시 변경사항 저장X

body {
  background-color: aliceblue;
}

 

- 함수형 / 클래스형의 차이는 render()

→ 함수형은 render() 필요X, 클래스형은 render() 필요함

export default class App extends Component {
  render() {
    return(
      <div>
        안녕하세요.
      </div>
    )
  }
}

 

- 컨테이너 만들기

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에 작성

.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%);
}

→ 결과

[05] 컨테이너 만들기

 

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

- 하나의 목록 JSX(HTML) 추가하기 

App.js 에 작성

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>
    )
  }
}

→ 결과

[06] 목록 UI 만들기

 

 07. map() 메소드를 사용한 할 일 목록 나열 

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

#예시) 배열 1 = { 1, 2, 3, 4 } 함수 = { x * 2 } 라고 할 때, map()은 { 2, 4, 6, 8 } 을 반환한다.

  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>
    )
  }
}

 

→ 결과

[07] map() 메소드 이용하기

 

 08. JSX Key 속성 이해하기 

key = {data.id} 속성을 제거하면 앱에서 에러가 발생하는 것을 확인할 수 있다.

→ 리액트는 가상 돔을 사용한다. 즉, 변경된 부분만 찾아 실제 돔에 적용한다는 것.

→  key는 리액트가 변경, 추가 또는 제거된 항목을 찾는데 도움이 된다.

#요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.

 

key = {index} 는 비추천

→ 리스트가 제거되거나 추가되면 index 가 바뀌면서 key 도 바뀌기 때문.

 

 09. 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>
    )
  }
}

→ 결과

[09] filter() 메소드 이용하기

x 버튼을 눌렀을 때, 로그에 newTodoData 찍히는 것 확인.

#예시) 공부하기 x버튼 누르면 청소하기 data가 newTodoData로 들어감.

 

 10. React State 란? 

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

 

- React State?

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체.

(State가 변경되면 컴포넌트는 리랜더링된다. 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})
  }

#setState() 통해서 todoDate를 newTodoData로 변경

 

→ 결과

[10] setState() 이용해서 목록 삭제

#정상적으로 삭제되는 모습을 확인할 수 있다.

 

 11. 할 일 목록 추가하기 

- 할 일 목록을 입력하는 부분과 입력 버튼

  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]})

  }
					.
					.
					.

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

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

 

→ 결과

[11] 할 일 목록 추가하기

 12. 전개 연산자(Spread Opreator) 

특정 객체 또는 열의 값을 다른 객체, 배열로 복사하거나 옮길 때 사용.

 

- 배열 조합

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

 

- 객체 조합

전개 연산자 사용X

전개 연산자 사용O

 

- 기존 배열을 보존

 

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

- 조건부 삼항 연산자란?

 

- 마무리된 일 표시하기

  handleCompleChange = (id) => {
    let newTodoData = this.state.todoData.map((data) => {
      if (data.id === id) {
        data.complited = !data.complited;
      }
      return data;
    })
    this.setState({ todoData : newTodoData })
  }			
				.
				.
				.

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

 

→ 결과

[13] 마무리된 일 표시하기