[react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className)

react style

 

react에서 조건에 따른 

스타일링하는 방법입니다.

 

• 스타일링은 tailwind라는 리액트 CSS 프레임 워크를 사용하여 디자인 합니다.
• 조건에 따라 className의 내용에 변화를 주어 다른 스타일을 주는 방법입니다. 
• onClick 이벤트에서 클릭할때마다 state 값을 true, false를 적용시켜, className 내에 삼항 연산자를 사용합니다.
• 이로 toggle 기능과 같이 on/off switch의 개념으로 스위치를 켰다, 껐다 하는 효과를 나타낼 수 있습니다.

 

화면구현

모바일, 태블릿 또는 어플리케이션에서 자주 쓰이는  네비게이션(햄버거 메뉴바) 메뉴를  조건부 style 로 구현합니다.

클릭 전

클릭 후

 

조건부 스타일

<span className={
"transform transition duration-500 ease-in-out" + 
//transition 효과
(barOpen ? " rotate-45" : " -translate-y-1.5")
//barOpen 이 true일때, X 표시, false면 제자리
}
></span>

 

예제

import React, { useState } from "react";

const Intro = () => {
const [barOpen, setBarOpen] = useState(false);
const onBarClick = () => {
setBarOpen(!barOpen);
};

return (
<div className="flex flex-col justify-center items-center">
  <nav>
    <button className="text-gray-500 w-10 h-10 relative focus:outline-none bg-white" onClick={onBarClick}>
      <div className="block w-5 absolute left-1/2 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
        <span className={ "block absolute h-0.5 w-5t transform transition duration-500 ease-in-out" 
        + (barOpen ? " rotate-45" : " -translate-y-1.5" ) }></span>
        <span className={ "block absolute  h-0.5 w-5 transform transition duration-500 ease-in-out" 
        + (barOpen ? " opacity-0" : " opacity-1" ) }></span>
        <span className={ "block absolute h-0.5 w-5 transform transition duration-500 ease-in-out" 
        + (barOpen ? " -rotate-45" : " translate-y-1.5" ) }></span>
      </div>
    </button>
  </nav>
</div>

);
};

export default Intro;