🍅 REACT 뽀모도로 타이머 만들기 (7) 🍅

  마지막으로 Study 페이지를 만들었다.

Study 페이지는 Study 컴포넌트와 바늘의 회전을 담당하는 ChimStudy 컴포넌트로 구현하였다.

---

ChimStudy 컴포넌트

// ChimStudy.js

import { useEffect, useState } from "react";
import Chim from "../chim/Chim";
import "../BackGround/Background.css";

export default function ChimStudy({ isStart, setIsStart, degree }) {
    const savedDegree = parseInt(localStorage.getItem("degree") || degree);
    const [currentDegree, setCurrentDegree] = useState(savedDegree);

    useEffect(() => {
        setCurrentDegree(degree);
    }, [degree]);

    useEffect(() => {
        if (!isStart) { 
            return;
        }
        
        let interval = setInterval(() => {
            setCurrentDegree((prev) => {
                if (prev <= 0) {
                    clearInterval(interval);
                    setIsStart(false);
                    localStorage.setItem("isStart", "false");
                    return 0;
                }
                const newDegree = prev - 1;
                localStorage.setItem("degree", newDegree.toString());
                return newDegree;
            });
        }, 1000);

        return () => {
            clearInterval(interval);
        };
    }, [isStart, degree]);
    
    return (
        <Chim degree={currentDegree}/>
    )
}

• props로 타이머 실행 여부인 isStart, 타이머 끝났을 때 false로 번경하기 위한 setIsStart 함수, 초기 회전 각도인 degree 세 가지 값을 받는다. 
• localStorage.getItem을 통해 저장된 degree 값을 받아와 정수로 변환하여 savedDegree에 저장한다. 값을 불러올 수 없는 경우 부모에게서 전달된 degree 값을 사용한다. 
• currentDegree에 현재 바늘의 회전 각도를 저장한다.  useState를 사용하기에 페이지가 새로고침되어도 값을 유지할 수 있다. 
• useEffect 내에서 isStart가 거짓이면 setInterval이 실행되지 않는다. 
• cureentDegree 값 <= 0 일 경우 clearInterval(interval); setIsStart(false);을 통해 타이머가 멈춘다. 
• newDegree는 감소된 currentDegree 값을 저장하는 변수이며 이를 통해 바늘이 반시계 방향으로 회전한다. localStorage.setItem(키, 값)을 통해 localStorage에도 "degree": "값"의 형태로 저장한다. 
• 컴포넌트가 언마운트될 때 return () => {clearInterval(interval);}이 실행되어 setInterval을 정리한다. 
• currentDegree 값을 Chim 컴포넌트에 전달하여 currentDegree 값이 변경될 때마다 바늘이 회전하게 된다. 

---

Study 컴포넌트

// Study.js

import { useState, useEffect } from "react";
import Background from "../BackGround/Background";
import TomatoBtn from "../TomatoBtn/TomatoBtn";
import ChimStudy from "./ChimStudy";
import pic4 from "../Pic/TomatoClock.png";
import "./Study.css";

export default function Study() {
    const savedIsStart = localStorage.getItem("isStart") === "false";
    const savedDegree = localStorage.getItem("degree") || "0";

    const [isStart, setIsStart] = useState(savedIsStart);
    const [currentDegree, setCurrentDegree] = useState(savedDegree);

    const studyM = parseInt(localStorage.getItem("studyM") || "0");
    const breakM = parseInt(localStorage.getItem("breakM") || "0");

    const handleStart = () => {
        setIsStart(true);
        setCurrentDegree(studyM * 6);
        localStorage.setItem("isStart", "true");
        localStorage.setItem("degree", studyM * 6);
    };

    const handleBreak = () => {
        setIsStart(true);
        setCurrentDegree(breakM * 6);
        localStorage.setItem("isStart", "true");
        localStorage.setItem("degree", breakM * 6);
    };

    useEffect(() => {
        return () => {
            localStorage.setItem("isStart", isStart.toString());
            localStorage.setItem("degree", currentDegree.toString());
        };
    }, [isStart, currentDegree]);

    return (
        <>
        <Background title='STUDY' />
        <div className="main">
            <div className="btn">
                <TomatoBtn name='START' className="to" onClick={handleStart} />
                <TomatoBtn name='BREAK' className="to" onClick={handleBreak} />
            </div>
            <div className="CheckTomato">
            <img src={pic4} alt='pic4' className="pic4" />
            <ChimStudy isStart={isStart} setIsStart={setIsStart} degree={currentDegree} />
            </div>
            
        </div>
        </>
    )
}

• localStorage에서 isStart 값을 가져와 false면 true로 true면 false로 설정하여 savedIsStart에 저장한다. 
• handleStart와 handleBreak를 통해 setIsStart 상태를 true로 변경하고 currentDegree에 공부(휴식) 시간을 degree로 변환하여 저장한다. 
• isStart 또는 currentDegree 값이 변경될 때 localStorae에 isStart, degree를 저장한다.

// Study.css

.main {
    display: flex;
    margin: 0 200px 0 200px;
}
.btn {
    margin: 80px 80px 0 0;
}
.pic4 {
    width: 687.8px;
    height: 519px;
}
.CheckTomato {
    position: relative;
}

---

  이렇게 네 페이지로 이루어진 뽀모도로 타이머를 완성하였다. 

코드가 잘 돌아가는지 확인해주어야 했기에 console.log를 생각보다 자주, 꼼꼼히 사용해야 했다. 

또한 코드를 작성하기 전에 대강 어떠한 흐름으로 코드를 작성할 것인지 생각해보아야 함을 알았다.

이 점이 미흡했기에 지피티의 힘을 많이 빌렸던 것 같다. 

컴포넌트로 나누어 코드를 작성하고 props를 통해 값을 주고받는 것도 꽤 어렵게 느껴졌다.

이러한 부분은 다른 여러 코드를 작성해 보며 익힐 수 있을 것이라 믿는다.

다음 프로젝트를 진행할 떄는 이러한 점들을 기억하며 더 효율적으로 코드를 작성할 수 있게 해야겠다.

 

끝!