기업협업 관련 TIL 2번째!
장황하게 긴 제목과 같이 딱 맞는 설명이 없다.
결국, 컴포넌트의 재사용과 관련한 이야기이다
컴포넌트는 한 페이지의 코드가 장황하게 되는 것을 예방할 뿐만 아니라 재사용으로 효율성을 높여준다.
나의 경우에는 컴포넌트를 재사용할 수 있을 것 같았는데, blocker가 컴포넌트에 따른 css가 다르다는 것이었다.
만약 styled component를 사용했다면, 이 문제가 쉽게 해결될 수 있었겠지만! 브리딩에서는 scss를 사용하여 css를 바꾸는 게 쉽지 않았다.
(아마.. 내가 아직 퍼블리싱 능력이 부족해서 그럴 가능성이 99%이다.)
나의 솔루션은 컴포넌트를 복사해서 새로 만드는 것이었다..
그러다가 효영 백엔드 개발자님께서 "컴포넌트에 속성을 줘서 그 속성을 props로 넘겨서 props 값을 classname에 주면 어때요?"라는 제안을 하셨다.
처음에는 되는가 안되는 가 긴가민가했지만!! 결국에는 성공!
컴포넌트 속성값에 따라 css를 다르게 줄 수 있게 되었다.
(물론 이때에는 속성값에 따른 css를 다 작성해줘야해서..ㅎ 이런 면에서는 비효율적이지만 컴포넌트를 재사용할 수 있게되었다.)
<나의 코드>
//리뷰.tsx
import {Overview} from '../../Overview/Overview'
.
.
.
<Overview
title = ""
content = {reviewDetail.review.REV_CONTENT}
wraptype = "wrapReview"
/>wraptype 속성을 Overview 컴포넌트의 props로 전달
//Overview.tsx
export const Overview: React.FC<Props> = ({ title, content, wraptype }) => {
return (
<div className={cx(wraptype)}>
<p
className={cx(`${wraptype}-title`)}
dangerouslySetInnerHTML={{ __html: title }}
/>
<p className={cx(`${wraptype}-content`)}>
{toggleEllipsis(content, limit).string}
</p>
{toggleEllipsis(content, limit).isShowMore ? (
<button className={cx(`${wraptype}-morebutton`)} onClick={handleCollapse(content)}>
더보기
</button>
) : (
(content as any).length >= limit ? (
<button
className={cx(`${wraptype}-morebutton`)}
onClick={handleCollapse(content)}
>
접기
</button>
) : null
)}
</div>
);
}
//Overview.module.scss
.overview-content {
font-weight: 400;
line-height: 28px;
color: #2c2c2c;
margin-bottom: 16px;
}
.wrapReview-content {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: #5f5f5f;
margin-right: 16px;
}css 부분이 달라져야하기 때문에 이렇게 다 작성하게 된다.
엄청 편한 방법은 아니지만 scss를 사용하면서 컴포넌트를 재사용할 수 있는 새로운 방법을 배운 것 같아서 신기했다!!
내가 취업하는 모든 곳이 내가 원하는 방향대로 만들어있지 않을 수 있다. 그렇기에 기존의 코드를 최대한 활용하면서 효율성을 높일 수 있는 방법을 많이 고민하고자 노력하는 요즘이다.
언젠가는 어떤 코드를 마주하더라도 의연하게 대처할 수 있는 개발자가 되길 바란다.
