카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고

📝 커스텀 훅(Custom Hook) 및 유틸 함수(util function)

• 프로젝트를 처음 접했을 때, 'hook' 폴더와 'util' 폴더로 파일이 구분된 것을 보고 왜 이렇게 나누는지 궁금했다. 처음에는 단순히 파일을 정리하기 위한 것이라고 생각했지만, 실제로는 각 폴더가 다루는 내용과 역할이 다르다는 것을 깨달았다.
• hook 폴더: 주로 상태 관리를 위해 커스텀 훅을 모아놓은 폴더이다. 리액트 컴포넌트에서 공통적으로 사용하는 상태 로직을 추출하여 재사용 가능하게 만든 함수들이다.
• util 폴더: 상태와는 무관하게, 자주 사용되는 로직이나 기능을 함수로 모듈화한 유틸리티 함수들을 모아놓은 폴더이다. 일반적으로 입력을 받아 변환된 출력을 반환하는 형태이다.

---

커스텀 훅(Custom Hook)

• 커스텀 훅을 처음 접했을 때, 상태 로직을 함수로 분리하는 것이 어려웠다. 여러 컴포넌트에서 공통적으로 사용하는 상태 로직을 추출하여 재사용할 수 있다는 개념은 이해했지만, 실제로 구현하는 과정에서 헷갈렸다.
• 커스텀 훅은 상태를 관리하고, useEffect를 통해 사이드 이펙트를 처리하는 로직으로, 리액트 컴포넌트의 생명주기와 밀접하게 연관되어 있다는 점을 이해하였다.

import { useState, useEffect } from 'react';

function useTimer(initialTime) {
  const [time, setTime] = useState(initialTime);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [initialTime]);

  return time;
}

function Timer() {
  const time = useTimer(0);

  return (
    <div>
      {time}
    </div>
  );
}

---

유틸 함수(util function)

• 처음에는 유틸 함수와 커스텀 훅의 차이를 명확하게 이해하지 못했지만, formatDate 함수와 같은 유틸 함수는 단순히 입력값을 받아서 변환된 출력을 반환하는 형태라는 것을 알게 되었다.

function formatDate(dateString, format) {
  const date = new Date(dateString);
  return date.toLocaleDateString(format);
}

 

📝 Daily Scrum

• 과제 마무리
• 학습일지 작성

 

😋 Today 회고

• 과제를 진행하면서 코드의 재사용성과 가독성을 높이기 위해 모듈화를 적극적으로 활용하고, hook과 util 함수를 분리하는 등 나름의 노력을 기울였다. 하지만 멘토님께서 파일이 너무 세분화되어 있다는 피드백을 주셨다. 앞으로는 어느 정도 수준으로 모듈화를 해야 적절한지 명확한 기준을 세워야 할 것 같다.

 

➡️ 참고 링크

https://growing-jiwoo.tistory.com/83

[React.js] 커스텀 훅(Custom Hook)과 유틸 함수(util function)에 대해서

https://velog.io/@dram26/Util-vs-Custom-Hook

Util vs Custom Hook