[Front-end] 웹개발 프로젝트 코드 리뷰 정리 및 Study

 

 

프론트엔드로 프로젝트를 처음 해보면서 기능 구현하기에만 급급해

코드 간결성이나 다른 훅들 사용에는 많이 부족했는데

감사하게도 코치님께서 프로젝트가 끝난 후 코드 리뷰를 작성해주셨다.

부끄럽지만🤣 기존에 내가 작성했던 코드와 리뷰 후 수정된 코드들을 비교해보면서 정리해보려한다.

 

---

 

1. useEffect 내부는 간결한 형태로 정리하는 것이 좋다

useEffect 내부 코드의 가독성이 떨어지는 곳이 한 군데가 아니었다..!

// 기존코드
useEffect(() => {
    api({
        method: 'get',
        url: "/fulfilled-habits",
        params: {date: getDate()[1]},
    })
    .then((res) => {
        const habitIds = res.habitIds;
        if (habitIds.length === 0) {
          setHabitList(() => ({
            date: getDate()[1],
            habit: "습관을 추가해주세요"
          }));
        } else {
          setHabitList(() => ({
            date: getDate()[1],
          ...habitIds.reduce((acc, habit, index) => {
            acc[`habit${index + 1}`] = habit;
            return acc;
            }, {})
          }));
        }
    }).catch((error) => {
        console.log(error)
    }).finally(() => {
      setIsLoading(true);
    })
    
    api({
        method: 'get',
        url: "/fulfilled-habits",
        params: {month: getDate()[0]},
    })
    .then((res) => {
        const checkDates = res.dates;
        monthCheckDate.current = checkDates;
    }).catch((error) => {
        console.log(error)
    }).finally(() => {
      setIsLoading(true);
    })
  }, [])

 

기존 useEffect 내부의 api 요청 코드를 하나의 함수로 관리를 하고

useEffect 내부에서 함수를 호출한다.

(+ axios 간결하게 작성 )

const setDefaultdata = async () => {
	api.get("/fulfilled-habits", {
        params: {date: getDate()[1]},
    })
    .then((res) => {
        const habitIds = res.habitIds;
        if (habitIds.length === 0) {
          setHabitList(() => ({
            date: getDate()[1],
            habit: "습관을 추가해주세요"
          }));
        } else {
          setHabitList(() => ({
            date: getDate()[1],
          ...habitIds.reduce((acc, habit, index) => {
            acc[`habit${index + 1}`] = habit;
            return acc;
            }, {})
          }));
        }
    }).catch((error) => {
        console.log(error)
    }).finally(() => {
      setIsLoading(true);
    })
    
    api.get("/fulfilled-habits", {
        params: {month: getDate()[0]},
    })
    .then((res) => {
        const checkDates = res.dates;
        monthCheckDate.current = checkDates;
    }).catch((error) => {
        console.log(error)
    }).finally(() => {
      setIsLoading(true);
    })
}

useEffect(() => setDefaultdata(), [])

 

---

 

2. res에 대해 구조 분해 사용

 useEffect(() => {
    setIsLoading(true);
    api.get("/planned-habits")
    .then((res) => {
      const habitIds = res.habitIds;
      if (habitIds.length === 0) {
        setSelectedHabits( false );
      } else {
        const date = res.habitDates[0];
        setSelectedHabits( habitIds );
        setSelectedDate(date);
      }
    }).catch((error) => {
    }).finally(() => {
      setIsLoading(false);
    });
  }, [])

 

useEffect 간결화와 res 값 불러오는 부분을 구조 분해를 통해서 한 번에 저장하도록 진행한다.

const setDefaultData = async () => {
    api.get("/planned-habits")
    .then((res) => {
      const { habitIds, habitDates } = res;
      if (habitIds.length === 0) {
        setSelectedHabits( false );
      } else {
        const date = habitDates[0];
        setSelectedHabits( habitIds );
        setSelectedDate(date);
      }
    }).catch((error) => {
    }).finally(() => {
      setIsLoading(false);
    });
  }

useEffect(() => {
   setIsLoading(true);
   setDefaultData()
}, [])

 

---

 

3. getDate()와 같은 함수는 utils 파일 내에 하나의 컴포넌트로 작성

기존엔 각각의 컴포넌트에서 getDate 함수를 선언해서 사용하고 있었다.

utils 파일로 컴포넌트를 새로 만들어서 각 컴포넌트에서 가져다가 사용하는 방식이 효율적이다.

// utils/date.js

export default const getDate = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = (today.getMonth() + 1).toString().padStart(2, '0');
  const day = today.getDate().toString().padStart(2, '0');

  const monthString = year + '-' + month;
  const dateString = year + '-' + month + '-' + day;

  return [monthString, dateString];
}

 

---

 

4. 불변변수는 컴포넌트 외부로

렌더링 시에 컴포넌트 자체가 재선언 되기 때문에,

변하지 않는 값들은 컴포넌트 외부로 빼서 동일값으로 재선언 되는 것을 방지한다.