작성
·
48
0
export default function CourseItem({title, description, thumbnail, isFavorite}) {
let defaultIconTag = "/img/heart/heart-icon.svg"
if (isFavorite) {
defaultIconTag = "/img/heart/heart-fill-icon.svg"
}
return (
<article className="course">
<img className="course__img" src={thumbnail} alt="강의 이미지"/>
<div className="course__body">
<div className="course__title">{title}</div>
<div className="course__description">{description}</div>
</div>
<div className="course__icons">
<button className="btn">
<img className="icon-heart" src={defaultIconTag} />
</button>
</div>
</article>
);
}
저는 기존 CourseItem메서드 내에서 변수를 생성해서 만들었는데 강의에서는 새로운 메서드를 생성해서 진행하더라고요.
메서드를 따로 생성해서 버튼 태그랑 묶어서 같이 넘기신 이유가 있나요? 현업에서 어떤 방식을 더 선호할까요?
답변 1
0
React 컴포넌트를 구조화하는 두 가지 방식에 대해 설명드리겠습니다.
두 방법 모두 동작은 동일하지만, 각각 다음과 같은 장단점이 있습니다:
현재 작성하신 방식:
let defaultIconTag = "/img/heart/heart-icon.svg"
if (isFavorite) {
defaultIconTag = "/img/heart/heart-fill-icon.svg"
}
장점: 코드가 간단하고 직관적입니다
단점: 로직이 복잡해지거나 재사용이 필요한 경우 관리가 어려워질 수 있습니다
별도 메서드로 분리하는 방식:
const getHeartIcon = (isFavorite) => {
return isFavorite
? "/img/heart/heart-fill-icon.svg"
: "/img/heart/heart-icon.svg";
}
장점:
로직을 재사용하기 쉽습니다
테스트 작성이 용이합니다
컴포넌트 로직과 UI 렌더링 로직을 명확히 분리할 수 있습니다
단점: 간단한 로직의 경우 오히려 코드가 복잡해질 수 있습니다
저의 경우 별도 메서드로 분리하는 방식을 선호하는 편입니다. 그 이유는:
1. 코드 유지보수가 쉬워집니다
2. 로직이 복잡해지더라도 깔끔하게 관리할 수 있습니다
3. 다른 컴포넌트에서도 해당 로직을 재사용하기 쉽습니다
하지만 이는 절대적인 규칙은 아니며, 상황과 팀의 컨벤션에 따라 유연하게 선택하시면 됩니다. 현재처럼 단순한 조건문의 경우는 변수로 처리하는 것도 충분히 좋은 방법입니다.