병합된 셀 표현은 어떻게 표현하는게 좋을까요?
테이블을 보면 종종 병합된 셀 표현도 많이 나오는데요. 병합된 셀 테이블은 별도의 컴포넌트 없이 그냥 따로 만드는 게 나은걸까요?
답변 2
1
안녕하세요, darkmoon90님
우선 정말 좋은 질문 주셔서 감사합니다.
강의에서 제공된 테이블 컴포넌트의 경우는 컬럼별로 짜져 있어서 이 경우에는 만약 수평으로 병합된 셀을 표현하고 싶으시면 이 컬럼 컴포넌트를 활용하는 것은 다소 어려울 것 같습니다. 이 경우에는 셀을 컴포넌트 기본 컴포넌트 베이스로 해서 복합 컴포넌트로 만드시지 마시고 그냥 레이어 상태에서 만드는 것이 나중에 수정하실 때 편하실 것 같습니다.
가끔은 모든 것을 컴포넌트로 만들다보면 수정할 때 머리가 아프기 때문에 가장 기본이 되는 것만 컴포넌트로 만드시고 복잡도가 올라가는 경우(기본 테이블이 아닌)에는 레이어로 두시는 것도 나쁘지 않을 것 같습니다.
이 부분에 대해서 관련자료나 팁을 발견하게 되면 여기에 나중에 공유해 드리겠습니다.
감사합니다.
볼드 드림.
1
안녕하세요, 인프런 AI 인턴입니다. darkmoon90님!
병합된 셀을 다루는 방법에 대해 말씀드리자면, 디자인 시스템에서 테이블을 효과적으로 관리하려면 병합된 셀 자체를 별도로 컴포넌트화 하는 것이 좋습니다. 이렇게 하면 동일한 표준 디자인을 유지하면서도 유연하게 변화할 수 있습니다.
병합된 셀을 위한 전략은 다음과 같습니다:
기본 테이블 컴포넌트 만들기:
- 기본 셀들을 모아 테이블 컴포넌트를 제작합니다. 이 컴포넌트는 기본적인 셀 레이아웃과 스타일을 포함합니다.
- 기본 셀들을 모아 테이블 컴포넌트를 제작합니다. 이 컴포넌트는 기본적인 셀 레이아웃과 스타일을 포함합니다.
병합된 셀 컴포넌트 만들기:
- 추후에 병합된 셀이 필요한 부분을 위해 별도의 병합된 셀 컴포넌트를 만듭니다. 이렇게 하면 각 테이블 행 또는 열의 부분들이 수월하게 조립되고 관리됩니다.
- 추후에 병합된 셀이 필요한 부분을 위해 별도의 병합된 셀 컴포넌트를 만듭니다. 이렇게 하면 각 테이블 행 또는 열의 부분들이 수월하게 조립되고 관리됩니다.
재사용과 유지보수 용이성:
- 컴포넌트 기반으로 셀을 디자인하면, 변경이 필요한 경우 컴포넌트를 업데이트하기만 하면 돼서 유지보수가 쉬워집니다.
- 컴포넌트 기반으로 셀을 디자인하면, 변경이 필요한 경우 컴포넌트를 업데이트하기만 하면 돼서 유지보수가 쉬워집니다.
다양한 상태와 변형 관리:
- 컴포넌트 내에서는 다양한 상태 (ex. 선택됨, 포커스 등)를 제공합니다. 이를 통해 같은 컴포넌트를 여러 상황에서도 활용할 수 있습니다.
- 컴포넌트 내에서는 다양한 상태 (ex. 선택됨, 포커스 등)를 제공합니다. 이를 통해 같은 컴포넌트를 여러 상황에서도 활용할 수 있습니다.
기존에 유사한 질문에 대한 답변을 참고하시면 더 많은 정보를 얻으실 수 있습니다:
- 중첩된 셀과 상태 관리의 효율적인 방법
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아이콘 빌런 부분
0
26
2
배리어블 Value에 관해 질문있습니다.
0
51
1
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
0
47
1
Navigation Mobile 토글 베리어블이 안됩니당
1
43
2
Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름
0
40
1
디자인 시스템에 그룹명을 숨길 수도 있나요?
0
50
2
디자인 시스템 네이밍에 관한 질문드립니다.
0
62
2
next step?
1
78
1
16강 Print Variables 출력 질문
0
84
2
open in Figma 누르고 ui kit 다운?받았을 때
0
78
2
variables 이름 지을때 소문자,대문자 사용에 관해..
0
98
2
디자인 시스템 네이밍 순서에 대해 질문남깁니다!
0
120
2
이미지 캐러셀 영상
0
70
2
아이콘 사이즈 컴포넌트 구성 방식 관련
0
107
3
완강/리뷰 이벤트 후 강의자료
0
66
2
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.
0
61
1
컴포넌트별 베리어블 구축
0
82
2
인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?
0
41
1
섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문
0
54
2
UI Kit에서 배리어블 등록 안되는 문제
0
63
2
교육용 피그마 계정 문의
0
65
2
베리어블 등록했는데 스타일에 연결하려니까 안보여요..
0
91
3
폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??
0
53
2
섹션 6 / 29.Button 강의 질문
0
68
2





