이전에, React로 간이적인 Twitter와 같은 앱을 만들었을 때, 컴퍼넌트의 className 부분에 캐릭터 라인으로서의 클래스명과, 조건 분기 처리에 의해 변수에 다른 클래스명이 들어가는 변수를 설치하려고 했습니다 그러나 잘하지 않고 막혔습니다
그 때의 해결 방법을 적어 둡니다.

무엇을 하고 싶었는가

자신의 경우, 미리 like 클래스를 가진 span 태그가 있어, 투고의 좋아요 아이콘이 클릭되면 좋아 아이콘에 착색하는 liked 클래스를 변수 liked_class에 저장해 span 태그에 붙이려고 했습니다. (이번에는 일시적으로 변수명을 바꾸고 있기 때문에 조금 명명이 이상합니다만, 신경 쓰지 마세요 웃음)


↑ 투고에 좋아요를 붙이지 않은 경우(클래스는 like만)

↑ 게시물에 좋아요를 붙인 경우(클래스는 like와 변수 liked_class에 저장된 liked)

덧붙여서 CSS는 다음과 같은 느낌입니다.

.like{
        font-size: 30px;
}

.liked{
        color: #FF6699;
}

위의 설명과 이미지와 마찬가지로, 좋아하는 아이콘의 span 태그에 liked 클래스가 부여되면 color 속성은 좋아하는 아이콘을 채색합니다.

이하, 잘 가지 않았을 때의 코드입니다.

//投稿のlikeフラグ（hasliked）がtrueであればlikedクラスを変数に格納、falseなら空文字列を格納
const liked_class = post.hasLiked() ? 'liked' : '';

    return (
        //spanタグにlikeクラスと上記の処理で定義した変数、liked_classをセットする
        <span className="`like ${liked_class}`" onClick={() => {
            props.likePostToggle(post.id)
        }}>
            <FontAwesomeIcon icon={faThumbsUp} />
        </span>
    );

className 안에서 변수를 전개해 캐릭터 라인과 연결시키려고 했습니다만, like ${liked_class} 가 1 개의 클래스명으로 인식되어 잘 표시되지 않았습니다.

해결 방법(classnames 라이브러리의 ClassNames 메서드 사용)

위에서 막힌 점입니다만, 이 기사를 참고로 classnames 라이브러리가 제공하는 ClassNames 메소드를 사용하는 것으로 해결할 수 있었습니다.
이하, 사용법입니다.

npm을 통해 classnames 라이브러리를 설치합니다.

npm install classnames --save

사용하려는 구성 요소 내에서 classnames 라이브러리에서 제공하는 classNames 메소드를 가져옵니다.

import classNames from 'classnames';

className 안에 문자열과 변수를 사용하고 싶은 곳에서 classNames 메서드를 사용합니다. 자신의 경우는 다음과 같이 되었습니다.

//上記と同じくいいねフラグがtrueの場合likedクラスを変数に格納、falseはの場合空文字を格納
const liked_class = post.hasLiked() ? 'liked' : '';

//classnamesライブラリが提供しているclassNamesメソッドを使用し、使いたい文字列や変数をセットする
    const liked_classes = classNames(
        'like', //あらかじめセットしておく文字列のクラス名
        liked_class //上記の条件分岐処理の結果で中に入るクラス名が変わる変数
    );

    return (
　　　　　//上記で定義した変数、liked_classesをclassNameに指定
        <span className={liked_classes} onClick={() => {
            props.likePostToggle(post.id)
        }}>
            <FontAwesomeIcon icon={faThumbsUp} />
        </span>
    );

또한 다음과 같이 쓸 수도 있습니다.
위의 코드와의 차이는, 1행째에 기술하고 있던, 좋아요 플래그의 유무에 의해 변수에 격납하는 값을, liked인가 하늘 캐릭터 라인인가 결정하고 있던 부분을 부분을 삭제해, classNames의 내부에서 좋다 네 플래그가 true일 때만 liked 클래스를 부여하도록 하고 있습니다.

아래 코드가 더 이상 변수를 정의 할 필요가 없기 때문에 좋습니다.

//ここの処理は不要
const liked_class = post.hasLiked() ? 'liked' : '';

    const liked_classes = classNames(
        'like', //あらかじめセットしておく文字列のクラス名
　　　　　//１行目に記述していた条件分岐処理をこちらに記述（いいねフラグがtrueの場合、likedクラスを付与）
        {'liked' : post.hasLiked()} 
    );

    return (
　　　　　//上記で定義した変数、liked_classesをclassNameに指定
        <span className={liked_classes} onClick={() => {
            props.likePostToggle(post.id)
        }}>
            <FontAwesomeIcon icon={faThumbsUp} />
        </span>
    );

이렇게하면 게시물에 좋아요가 붙은 경우에만 span 태그에 liked 클래스를 부여하고 좋아하는 아이콘에 색칠할 수있었습니다!