[React]Habit Tracker 리액트 훅을 사용한 제작법

드림코딩 엘리 리액트 Habit Tracker의 리액트 최신버전으로 훅을이용하여 제작 하는코드지만 구조를 잘못짜서 데이터를 받아오는게 꼬여서 문제였다. useEffect를 이용해서 제작하였다.

app.js

import './app.css';
import '@fortawesome/fontawesome-free/js/all.js';
import Main from './components/Main';





const app = () => {


  return (
    <div>
       <>
      <Main/>
       </>
    </div>
  );
};

export default app;

app.js 에서 훅을 사용하려했지만 app에서는 훅을 사용하지않는걸 권장한다고한다.
그래서
Main.js

import React, { useState } from 'react';

import Habits from './Habits';
import Navbar from './Navbar';

const Main = () => {

    //총합 숫자합 카운트 저장소
    const [comb,setComb] = useState(0)
    
    const sim = [
        {name: 'Reading', count:1,id:1},
        {name: 'Running', count:1,id:2},
        {name: 'Coding', count:1,id:3},
    ]
 


    return (
        <>
            <Navbar totalCount={comb}/>
            <Habits comb={comb} setComb={setComb} sim={sim}/>
        </>
    );
};

export default Main;

를 제작후 메인으로 사용.
메인에는 습관의 총합 숫자 저장소와 데이터를 넣어두었다.

---

Navbar.js

import React from 'react';

const Navbar = ({totalCount}) => {
    return (
        <div className="navbar">
            <i className="navbar-logo fas fa-leaf"></i>
            <span>Habit Tracker</span>
            <span className="navbar-count">{totalCount}</span>
        </div>
    );
};

export default Navbar;

---

HabitAddForm.js 인풋란

import React, { useState } from 'react';

const HabitAddForm = ({onAdd}) => {
    

    const [text,setText] = useState("")
    const onChange =(e) =>{
        setText(e.target.value)// text에 텍스트 넣기.
    }

    const onSubmit = (e) =>{
        e.preventDefault()
        setText("")//텍스트 초기화
        onAdd(text) // 새배열 만들곳으로 데이터 보내기
        
        
       
    }
    return (
        
        <form action="" className="add-form" onSubmit={onSubmit}>
                                        {/* value={text} 안넣으면 안지워진다. */}
            <input onChange={onChange} value={text} type="text" className="add-input" placeholder='Habit'/>
            <button className="add-button">Add</button>
            
        </form>
    );
};

export default HabitAddForm;

onAdd로 데이터를 보내서(Habits.js)
새로운 li을 만들어낸다.

---

Habit.js

import React, { useState,useEffect } from 'react';

const Habit = ({habits,count,Delete,setComb,comb, switchs }) => {
    

    
    const [num,setNum] = useState(count)
    
    //모든걸 리셋할때 필요한것
    useEffect(()=>{
        setNum(0)
    },[switchs])


    const handleIncrement = () =>{
        setNum(num+1)
        
        //토탈 합치기용
        setComb(comb+1)
        
    
         }

    const handleDecrement = () =>{
             if(num<=0){
                 return
             }
           setNum(num - 1)

           //토탈 합치기용 
           setComb(comb-1)
         
        
         }
         
    
    return (
        
        <li className="habit" >
       <span className="habit-name">{habits.name}</span>
       <span className="habit-count">{num}</span>
       <button className="habit-button habit-increase" onClick={handleIncrement}>
       <i className="fa-solid fa-square-plus"></i>
       </button>
       <button className="habit-button habit-decrease" onClick={handleDecrement}>
       <i className="fa-solid fa-square-minus"></i>
       </button>
                                                                    {/* 딜리트로 아이디값을 보내줘야했다!  + 두개의 데이터를 보냄 */}
       <button className="habit-button habit-delete" onClick={()=> Delete(habits.id,num)
}>
       <i className="fa-solid fa-trash"></i>
       </button>
        <button onClick={()=>{setNum(0)
            setComb(comb-num)
        }}>리셋</button>
       </li>
    );
};

export default Habit;

문제가 여기서 발생했다. 이안에 Habit 가 맵함수로 나오는데
숫자저장값이 Habit마다 따로 있어서 전체 리셋을 만들때
문제가 발생했다. 숫자 저장값을 밖으로 빼자니
전체 숫자가 동시에 올라가버렸다.
그래서 useEffect를 사용해서

Habits.js 안에 const [switchs,setSwitchs] = useState(false)를 만들어서

전체리셋을 누르면 setSwitchs(!switchs) 항상 반대값을 보내주게하여 토글버튼으로 만들었다.
그리고 useEffect안에 switchs 에 반응하게 만들어서
숫자값을 전부 0으로 만들게 했다.