[ React ] date & time Formatter 컴포넌트로 만들어서 관리하기

 

코드 리팩토링을 진행하며 여러 컴포넌트에서 반복적으로 사용되는 함수가 있어 컴포넌트로 분리해 관리하려고한다.

이렇게  ISO 8601 형식으로 들어오는 날짜 및 시간 데이터를 쓰임에 맞게 가공하는 함수를  컴포넌트로 분리해 관리하기로 했다.

 

목차

1.date & time Formatter 컴포넌트 분리하기

2.date & time Formatter 각각의 코드 설명

---

< 컴포넌트 분리하기 >

 

리팩토링 전 코드

(독립된 컴포넌트로 분리해서 관리하기전 불필요한 코드들도 함께 섞여있다.)

const TimeTable = ({ time, setSelectedTime }) => {
  const getTime = e => {
	const TimeTable = ({ time, setSelectedTime }) => {
    
    <TimeTableBox>
      {time.map(data => {
      
        const timeSlot = data.timeSlot;
        const startTime = timeSlot.slice(11, 16);
        const endTime = new Date(timeSlot);
        endTime.setHours(endTime.getHours() + 1);
        const formattedTime = `${startTime} ~ ${endTime
          .getHours()
          .toString()
          .padStart(2, "0")}:00`;
          
        return (
        ...
        );
      })}
    </TimeTableBox>
  );
};
export default TimeTable;

 

컴포넌트를 분리하는 이유

서버에서 받아오는 날짜와 시간에 대한 데이터는 가공되지 않은 그대로이다.

유저에게는 불필요한 정보들이 포함되어 있어 이를 가공해서 화면에 그려야한다.

그리고 유저가 선택한 날짜와 시간에 대한 정보를 다시 서버에 전송할 때는 서버에서 원하는 형태로 전송해야한다.

그래서 서버에서 클라이언트 단으로 데이터를 넘겨줄 때 포맷을 한번 변경하고

다시 클라이언트 단에서 서버로 데이터를 넘겨줄 때 포맷을 한번 더 변경해야한다.

그런데 이런 작업이 하나의 페이지에서만 발생하는 것이 아니였다.

그래서 이 포맷을 다른 팀원들이 복사해서 그대로 사용하는 상황이었고 이부분을 컴포넌트로 변경하면 

가독성과 유지보수, 사용성 측면에서 좋을 것이라고 생각했다.

 

1. 컴포넌트를 관리할 파일 생성

우선 utils에 function이라는 이름으로 새로운 파일을 생성한다.

 

 

2. 컴포넌트로 만들기

그리고 기존에 작성했던 함수들을 가져와 컴포넌트 형태로 만든다.

 

3. 매개변수

매개 변수가 있을 경우 각각의 매개변수에 따른 동작이 이루어질 수있도록 코드를 수정한다.

 

4. 반환하는 값이 있을 경우 return

객체 형태 또는 필요로 하는 용도에 맞게 값을 반환해준다.

 

5. 컴포넌트 import

이제 import로 각각의 컴포넌트를 불러온다.

 

6. 함수 호출하기

그리고 아래와 같이 함수를 호출해서 사용한다.

객체로 값을 반환하는 경우 객체 구조분해할당으로 필요한 값만 사용할 수 있다.

 

---

< 개별적인 코드 설명>

 

date Formatter 컴포넌트

 

 

1. 데이터에서 month와 day 분리하기

 

data 형식은 역시 ISO 8601 형식이다.

여기서 Jul로 표시되는 7월을 추출해야한다.

 

getMonth를 사용해 추출하면 6이 나오는데 7이 아닌 이유는 month는 숫자로 바꿀 경우 0부터 시작하기 때문이다.

그래서 getMonth한 값에 1을 더해준다.

 

2. YEAR - MM - DD 형식으로 변경하기

 

내가 원하는 형식은 아래와 같이 YEAR - MM - DD 형식이다.

 

그러기 위해 모든 Month와 Day를 두자리 숫자로 만들어준다.

Month와 Day가 10 이하 일때는 앞에 0을 붙이도록 한다.

 

3. 원하는 형식으로 return 해준다.

년도는 따로 변경할 내용이 없으므로 return문에서 바로 getFullYear() 함수로 반환한다.

 

 

---

timeFormatter 컴포넌트

1. 각각의 시간 데이터 가공하기

이 함수는 총 3번 데이터를 가공한다.

아래와 같은 형태로 time data가 들어온다.

 

[ startTime ]

time data에서 필요한 hour 와 minute만 잘라낸다.

 

 

[ fullTimeData ]

 new Date에 time data를 값으로 준다.

그럼 time data의 형식이 아래와 같이 ISO 8601 형식으로 바뀐다.

이렇게 하는 이유 getHours() 함수를 사용하기 위해서다.

getHours() 는 ISO 8601 형식으로 된 데이터에서만 시간을 추출할 수 있다.

startTime과 같이 slice를 사용하지 않는 이유는 endTime은 사칙연산을 필요로 하기 때문이다.

 

 

[ endTime ]

startTime + 1시간을 나타낸다. 

이렇게 원하는 시간을 얻어낸다. 

 

2. 원하는 형태의 시간 형식으로 변환

그리고 이 두 시간을 합쳐서 원하는 time data 형식을 만든다. 

 

3. 객체로 반환하기

그리고 필요한 값들을 객체의 형태로 return해준다.

 

 

배열이아닌 객체로 반환하는 이유는 객체 형태의 경우 key로 데이터의 이름을 지정하고 그대로 사용가능하기 때문이다.

배열의 경우 다시 값을 해당하는 변수명으로 할당해야하는 번거로움이 있다.

객체로 반환하면 이렇게 직관적으로 코드를 작성하기 훨씬 간편하다.

 

 

 

 

실제로 화면에 출력되는 시간과 날짜 

---

이렇게 컴포넌트로 분리해서 함수를 관리하면 반복되는 동작들을 줄일 수 있고 코드도 직관적으로 작성할 수 있다.

그리고 포맷을 변경하는 함수의 경우 기획의도에 따라 형식이 변경되는 경우가 생길 수 있다.

이때 포맷 함수를 컴포넌트로 관리하면 함수 컴포넌트만 수정해도 전체 포맷이 일괄적으로 변경되어 편리하고 안정적이다.

 

이 방식으로 리팩토링하면서 다른 코드들 중에도 이렇게 컴포넌트로 분리해서 관리할 수 있는 것들이 있는지 생각해보게되었다.

그리고 코드를 작성하면서도 자주 쓰일 것 같은 기능들은 컴포넌트로 따로 분리해 관리하는 방향으로 개발하고 있다.