인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

OHJUHYEON님의 프로필 이미지

작성한 질문수

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

조건부 렌더링

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

작성

·

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

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