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

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

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

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";
}