1번과 2번 중 어떤게 더 유연한 컴포넌트 설계 방법일까요?

1번 코드와 2번 코드 중 상황 대처에 유연하고 처음 본 사람조차 쉽게 사용할 수 있을까요? 1번 코드의 경우 컴포넌트 내부에서 UI에서 나타내야하는 값을 로직을 수행 후 사용하는 개념이고 2번 코드의 경우 부모 컴포넌트에서 UI에서 나타내야하는 값을 로직을 수행 후 Props로 넘겨 자식 컴포넌트는 부모에게 받은 값을 그대로 보여주기만 하는 개념입니다.

1//1번 코드
2import dayjs from 'dayjs';
3import React, { useState } from 'react';
4
5interface AdvertisementData {
6  payInfo_startPaidAt?: Date;
7  startDate: Date;
8  periodApply: number;
9  periodAccept: number;
10  periodReview: number;
11  //...etc
12}
13
14//Container.tsx
15const Container = () => {
16  const [state, setState] = useState<AdvertisementData>({
17    payInfo_startPaidAt: new Date(),
18    startDate: new Date(),
19    periodApply: 14,
20    periodAccept: 2,
21    periodReview: 14,
22  });
23
24  return (
25    <>
26      {/* 다른 요소들 */}
27      <Component advertisementData={state} />
28      {/* 다른 요소들 */}
29    </>
30  );
31};
32
33//Component.tsx
34const Component = ({
35  advertisementData,
36}: {
37  advertisementData: AdvertisementData;
38}) => {
39  const startDate = dayjs(
40    advertisementData.payInfo_startPaidAt || advertisementData.startDate
41  );
42  const applicationPeriodStart = startDate.format('MM.DD');
43  const applicationPeriodEnd = startDate
44    .add(advertisementData.periodApply, 'd')
45    .format('MM.DD');
46  const announcementDate = startDate
47    .add(advertisementData.periodApply + advertisementData.periodAccept, 'd')
48    .format('MM.DD');
49  const registrationPeriodEnd = startDate
50    .add(
51      advertisementData.periodApply +
52        advertisementData.periodAccept +
53        advertisementData.periodReview,
54      'd'
55    )
56    .format('MM.DD');
57
58  return (
59    <div>
60      <ul>
61        <li>
62          신청 기간 : {applicationPeriodStart}-{applicationPeriodEnd}
63        </li>
64        <li>발표 날짜 : {announcementDate}</li>
65        <li>
66          제출 기간 : {announcementDate}-{registrationPeriodEnd}
67        </li>
68      </ul>
69    </div>
70  );
71};
72
73//2번 코드
74import dayjs from 'dayjs';
75import React, { useState } from 'react';
76
77interface AdvertisementData {
78  payInfo_startPaidAt?: Date;
79  startDate: Date;
80  periodApply: number;
81  periodAccept: number;
82  periodReview: number;
83  //...etc
84}
85
86//Container.tsx
87const Container = () => {
88  const [state, setState] = useState<AdvertisementData>({
89    payInfo_startPaidAt: new Date(),
90    startDate: new Date(),
91    periodApply: 14,
92    periodAccept: 2,
93    periodReview: 14,
94  });
95
96  const startDate = dayjs(state.payInfo_startPaidAt || state.startDate);
97  const applicationPeriodStart = startDate.format('MM.DD');
98  const applicationPeriodEnd = startDate
99    .add(state.periodApply, 'd')
100    .format('MM.DD');
101  const announcementDate = startDate
102    .add(state.periodApply + state.periodAccept, 'd')
103    .format('MM.DD');
104  const registrationPeriodEnd = startDate
105    .add(state.periodApply + state.periodAccept + state.periodReview, 'd')
106    .format('MM.DD');
107
108  return (
109    <>
110      {/* 다른 요소들 */}
111      <Component
112        applicationPeriodStart={applicationPeriodStart}
113        applicationPeriodEnd={applicationPeriodEnd}
114        announcementDate={announcementDate}
115        registrationPeriodEnd={registrationPeriodEnd}
116      />
117      {/* 다른 요소들 */}
118    </>
119  );
120};
121
122interface ComponentProps {
123  applicationPeriodStart: string;
124  applicationPeriodEnd: string;
125  announcementDate: string;
126  registrationPeriodEnd: string;
127}
128
129//Component.tsx
130const Component = ({
131  applicationPeriodStart,
132  applicationPeriodEnd,
133  announcementDate,
134  registrationPeriodEnd,
135}: ComponentProps) => {
136  return (
137    <div>
138      <ul>
139        <li>
140          신청 기간 : {applicationPeriodStart}-{applicationPeriodEnd}
141        </li>
142        <li>발표 날짜 : {announcementDate}</li>
143        <li>
144          제출 기간 : {announcementDate}-{registrationPeriodEnd}
145        </li>
146      </ul>
147    </div>
148  );
149};

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

고윤태 마야크루 프론트엔드 개발자 님의 질문