Tailwindcss 조건부 스타일링 적용하는 방법

React에서 className을 사용하여 조건부 스타일을 적용하는 방법은 유용하며,

위 코드의 방식은 자주 사용되는 패턴입니다. 이를 자세히 설명하겠습니다.

 

1. 구조 설명

className={`block my-2 hover:cursor-pointer ${
  activeIndex === 1 ? "text-black font-bold" : "text-gray-400"
}`}

 

이 코드는 className에 문자열을 동적으로 할당하는 방식입니다. 템플릿 리터럴(Template Literal)을 사용하여 CSS 클래스를 조건에 따라 추가하거나 변경합니다.

1.1. 템플릿 리터럴 기본 구조

• 백틱(`): 템플릿 리터럴을 정의합니다.
• 내부 변수 삽입: ${} 구문을 사용하여 JavaScript 코드를 삽입할 수 있습니다.

React.js 환경에서 useState훅을 사용하여 상태관리를 하고, 현재 값을 click 키워드에 저장합니다.

 const [click, setClick] = useState(false);
  const onHandleClick = (data) => {
    setClick(data);
    alert("클릭되었습니다!");

<label
  onClick={() => onHandleClick(0)}
  className={`block my-2 hover:text-slate-500 hover:cursor-pointer ${
  click === 0 ? "text-black font-bold" : "text-gray-500"
   }`}
 >

 

그리고 이렇게 className={` 스타일링 ${  ? " " : " "   } `} - 3항 연산자를 이용하여 상태 관리를 합니다.

 

이때, 사용자가 아무런 아이콘도 클릭하지 않을 경우에 불투명도를 제거하기 위해서 처음 useState()의 초기값을 null로 설정합니다!

  const [click, setClick] = useState(null);

import { useState } from "react";

const Common = () => {
  const [click, setClick] = useState(null);
  const onHandleClick = (data) => {
    setClick(data);
    alert("클릭되었습니다!");
  };

  return (
    <>
      <nav className="absolute flex flex-col items-center justify-center text-center border rounded-lg right-2 border-slate-500 w-30">
        <label
          onClick={() => onHandleClick(0)}
          className={`block my-2 hover:text-slate-500 hover:cursor-pointer ${
            click === 0
              ? "text-black font-bold"
              : click === null
              ? "texty-gray-500 "
              : "text-gray-500 opacity-50"
          }`}
        >
          <img
            src="/images/지도.png"
            alt="지도"
            className="w-[30px] h-[30px]"
          />
          <p className="font-yeonsung">지도</p>
        </label>
        <hr className="w-full border border-slate-400" />
        <label
          onClick={() => onHandleClick(1)}
          className={`block my-2 hover:text-slate-500 hover:cursor-pointer ${
            click === 1
              ? "text-black font-bold"
              : click === null
              ? "text-black  "
              : "text-gray-500 opacity-50"
          }`}
        >
          <img
            src="/images/커뮤니티.png"
            alt="커뮤니티"
            className="w-[30px] h-[30px] ml-1"
          />
          <p className="font-yeonsung">커뮤니티</p>
        </label>
        <hr className="w-full border border-slate-400" />
        <label
          onClick={() => onHandleClick(2)}
          className={`block my-2 hover:text-slate-500 hover:cursor-pointer ${
            click === 2
              ? "text-black font-bold"
              : click === null
              ? "text-black "
              : "text-gray-500 opacity-50"
          }`}
        >
          <img
            src="/images/사람.png"
            alt="사람"
            className="w-[30px] h-[30px] ml-3"
          />
          <p className="font-yeonsung">마이페이지</p>
        </label>
      </nav>
    </>
  );
};
export default Common;

 

중첩된 3항 연산자(ternary operator)는 여러 조건을 처리할 때 조건문을 한 줄로 작성하는 방식입니다.

3항 연산자는 다음과 같은 기본 구조를 가집니다:

 

기본 구조

condition ? expr1 : condition2 ? expr2 : expr3

 

• 첫 번째 조건이 참이면 expr1을 실행.
• 첫 번째 조건이 거짓이고 두 번째 조건이 참이면 expr2를 실행.
• 두 조건이 모두 거짓이면 expr3을 실행.