드림코딩- 투두리스트

투두리스트 보기
연관 : 리액트 github 웹호스팅하기 설명서

내가 만든 것

1차 개선

2차개선 (open-color 색상표 참조)

리셋- 카운트만 :Habits.js

---------상위 컴포넌트 
  handleResetCount = () => {
    const _habits = this.state.habits.map((el) => ({
      ...el, //전체 복사
      count: 0, //부분적으로 바꿔주고 싶은 것만 수정하기
    })); //중괄호 안에 객체를 그대로 넣고, 그걸 감싸는 소괄호
    console.log(`_habits : ${_habits}`);

    this.setState({
      habits: _habits,
    });
  };

-----------중간 컴포넌트
class Habits extends Component {
  render() {
    return (
      <>
       
          <button onClick={this.props.onReset}>리셋</button>
          <button onClick={this.props.onResetCount}>카운트리셋</button>
        </>

리셋- 전체목록 : Habits.js

----------상위컴포넌트
handleReset = () => {
    this.setState({
      habits: [],
    });
  };

인풋버튼 :HabitInputAdd.js

import React, { Component } from "react";

class HabitAddInput extends Component {
  //(1)왜 input.value 초기화를 상위 handleSubmit이 아니라
  //여기서 해주는 걸까? 저 state도 상위에 써줘야 하나?

  render() {
    return (
      <div>
        <form
          onSubmit={(e) => {
            this.props.onSubmit(e);
          }}
        >
          <input
            onChange={(e) => {
              this.props.onChange(e.target.value);
            }}
            type="text"
            placeholder="입력하세요"
            value={this.props.inputValue}
          />
          <button>Add</button>
        </form>
      </div>
    );
  }
}

export default HabitAddInput;

------------------중간 컴포넌트
 <HabitAddInput
          inputValue={this.props.inputValue}
          onSubmit={this.props.onSubmit}
          onChange={this.props.onChange}
        />
            
------------------상위 컴포넌트
 handleChange = (value) => {
    this.setState({
      inputValue: value,
    });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      habits: [
        ...this.state.habits,
        {
          id: Date.now(),
          name: this.state.inputValue,
          count: 0,
        },
      ],
      inputValue: "",
    });
  };

------상위의 렌더
render() {
    return (
      <div>
        <Nav
          totalCount={this.state.habits.filter((el) => el.count > 0).length}
        />
        <Habits
          onChange={this.handleChange}
          onSubmit={this.handleSubmit}

리스트 1개 :Habit.js

import React, { Component } from "react";

class Habit extends Component {
  onInCrement = () => {
    this.props.onInCrement(this.props.habit.id);
  };

  onDelete = () => {
    this.props.onDelete(this.props.habit.id);
  };

  render() {
    console.log("props//", this.props.key); //key는 왜 못불러오지?
    return (
      <div className="habit">
        <span className="habit-name">{this.props.habit.name}</span>
        <span className="habit-count">{this.props.habit.count} </span>
        <button
          onClick={this.onInCrement}
          className="habit-button habit-increment"
        >
          <i class="far fa-plus-square"></i>
        </button>
        <button
          onClick={() => this.props.onDecrement(this.props.habit.id)}
          className="habit-button habit-derement"
        >
          <i class="far fa-minus-square"></i>
        </button>
        <button onClick={this.onDelete} className="habit-button habit-delete">
          <i class="fas fa-eraser"></i>
        </button>
      </div>
    );
  }
}

export default Habit;

리스트를 맵으로 돌리기, +,- ,delete: Habits.js

class Habits extends Component {
  render() {
    return (
      <>
       
        <div>
          {this.props.habits.map((habit) => {
            return (
              <Habit
                habit={habit}
                key={habit.id}
                onInCrement={this.props.onIncrement}
                onDecrement={this.props.onDecrement}
                //중간 컴포넌트는 인자 안써도 됨.. 자동 저장되어 있음.
                //중간 컴포넌트, 하위컴포넌트는 이름으로 한줄로, 쭉쭉 연결해주면 됨.
                //3단,2단은 이름 똑같이, 최종만 handle로 변수작성
                onDelete={this.props.onDelete}
              />
            );
          })}
          <button onClick={this.props.onReset}>리셋</button>
          <button onClick={this.props.onResetCount}>카운트리셋</button>
        </div>
      </>
    );
  }
}

export default Habits;

네브바 : Nav.js

import React, { Component } from "react";

class Nav extends Component {
  render() {
    return (
      <div className="nav">
        <span className="nav-title">HABIT Tracker</span>
        <span className="habit-count nav-count">{this.props.totalCount}</span>
      </div>
    );
  }
}

export default Nav;

---------- 상위컴포넌트
  <Nav
          totalCount={this.state.habits.filter((el) => el.count > 0).length}
          partCount={this.state.habits.reduce((acc, cur) => acc + cur.count, 0)}

        />

네브바 : Nav.js

배운 것

1) reduce(acc,cur => (acc+cur),0 )
// 이론만 알고 있던 걸, 실제로 적용해서 써본 첫 날.

2) arr.map(el => ({
...el,
count:1})
// 이런식으로 요소를 건드리지 않으면서, 수정하는 법을 더 깔끔히 배움

3) arr.map(el => el.count=0)
arr.map(el => {el.count=0
return el} )
위 두가지의 차이점을 배운날. 요소의 키값을 바꾸고 리턴 안하면, 부분 값만 나오고, 요소 자체를 나오면, 당근 요소 전체가 나온다.

4) 콘솔로그 작성법 : console.log(_habits : ${_habits});

5) 세 층위의 컴포넌트를 연습해보면서, 가장 상위의 컴포넌트에만 state값을 주고 관리하고, 나머지는 props로 내려주고, 값을 변경할때는 연결해줘서, state 있는 곳에서 함수를 설정해주기

6) 스프레드연산자를 이해하면서 다시 리팩토링..
값을 바꿔줄때는 ...x , 바꾸고싶은 키:값 sjgdjwnrl
.. 리턴 쓰는 법 다시 어렵다..