[2일차] 박하린 과제 제출합니다.

[harinsd404]

뽀모도로 타이머를 만들어봤습니다!!

[winshine0326]

import {useRef, useEffect} from "react";

export default function TimerDisplay({time}){
    const timeRef = useRef(null);
    useEffect(()=>{
        const timeText = `${String(Math.floor(time / 60)).padStart(2, '0')} : ${String(Math.floor(time%60)).padStart(2, '0')}`;
        if(timeRef.current)
            timeRef.current.textContent = timeText;
    }, [time]);
    return (
        <>
            <h1>🍅뽀모도로 타이머🍅</h1>
            <h2 ref={timeRef}>00 : 00</h2>
        </>
    );
}

해당 코드는 과제 요구사항 때문에 억지로 useEffect와 useRef를 사용한 느낌입니다.
해당 방식은 직접 DOM을 조작하는 것으로, React의 철학과 렌더링 메커니즘에 어긋납니다.
아래와 같이 useEffect와 useRef를 사용하지 않고 해결할 수 있습니다.

export default function TimerDisplay({ time }) {
  const minutes = String(Math.floor(time / 60)).padStart(2, '0');
  const seconds = String(time % 60).padStart(2, '0');

  return (
    <>
      <h1>🍅뽀모도로 타이머🍅</h1>
      <h2>{minutes} : {seconds}</h2>
    </>
  );
}

요구사항 때문에 어쩔 수 없었던 건 알지만, 실제로 코드를 짜실 때는 해당 방식으로 사용하시길 권장드립니다.

[winshine0326]

이건 절대적인 정답은 아니고 제 개인적 의견입니다만, 아래와 같은 코드는 유지보수와 협업 측면에서 좋지 않다고 느껴집니다.

setMods(!mods);
mods?setTime(1500):setTime(300);

먼저 mod를 반전시키고 그에 따라 삼항연산자로 setTime 값을 다르게 주입시키는데, 코드를 읽는 입장에서 헷갈립니다.
평소에 코드를 읽던 것 처럼 true이면 콜론 앞, false면 콜론 뒤가 실행되는 것이 아닌, 반대로 생각해야하기 때문입니다.
따라서 아래와 같이 수정하길 권장드립니다.

mods ? setTime(300) : setTime(1500);
setMods(!mods);

(물론 제 말이 정말 절대적인 참은 아닙니다! 그냥 코드를 읽다가 불편해서 드리는 의견이에요!)