조건부 렌더링에서 로직 처리 차이

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메서드 내에서 변수를 생성해서 만들었는데 강의에서는 새로운 메서드를 생성해서 진행하더라고요.

메서드를 따로 생성해서 버튼 태그랑 묶어서 같이 넘기신 이유가 있나요? 현업에서 어떤 방식을 더 선호할까요?

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. 다른 컴포넌트에서도 해당 로직을 재사용하기 쉽습니다

하지만 이는 절대적인 규칙은 아니며, 상황과 팀의 컨벤션에 따라 유연하게 선택하시면 됩니다. 현재처럼 단순한 조건문의 경우는 변수로 처리하는 것도 충분히 좋은 방법입니다.

인프런 커뮤니티 질문&답변