useState를 사용해서 CSS 변화주기

Sunflo·2023년 3월 8일
0

React

목록 보기
1/1

1. 이 글의 취지

쇼핑몰 프로젝트의 반응형 작업을 하다보니 CSS도 동적으로 변화해야 할 상황이 여러번 있었다.
querySelector와 addEventListener 로만 동적인 CSS작업을 하던 나에게 React가 주는 첫 CSS 도전과제였다.
이 과제의 해결법을 적어본다.

2. hover에 따라 다른 컴포넌트를 렌더링

원하는 기능

장바구니에 hover하면 색이 칠해진 장바구니를 보여준다.

export default function Cart() {
  const [isHover, setIsHover] = useState(false);
  const {
    cartQuery: { data: productsInCart },
  } = useCart();
  return (
    <Link
      className="absolute right-5 md:static flex h-full pt-5 pb-3"
      to="/carts"
      onMouseEnter={() => setIsHover(true)}
      onMouseLeave={() => setIsHover(false)}
    >
      {isHover ? (
        <BsBagFill className="text-lg mr-1" />
      ) : (
        <BsBag className="text-lg mr-1 " />
      )}

      <span className="hidden md:inline text-sm font-normal">
        {productsInCart && (
          <span>
            ${productsInCart.reduce((acc, cur) => acc + Number(cur.price), 0)}
          </span>
        )}
      </span>
    </Link>
  );
}

해석

isHover 라는 상태를 생성하여 마우스를 요소 위에 올렸을 때, 마우스가 요소를 벗어났을 때 변화를 줬다.

onMouseEnter={setIsHover(true)}, onMouseLeave={setIsHover(false)}

결과


3. 클릭했을때 translate 적용

원하는 기능

햄버거를 클릭하면 navbar가 왼쪽에서 오른쪽으로 나온다.

export default function SideNav({ user, isSideNavOpen }) {
  const navItemList = ["Home", "Men", "Women", "Accessories", "Shoes", "Blog"];

  return (
    <nav
      className={`absolute w-80 h-screen top-14 left-0 z-10 bg-white border border-gray-300 transition-all md:hidden 
      ${!isSideNavOpen && "-translate-x-full"}`}
    >
      <SignAndUser_Side />
      <div className={`flex flex-col`}>
        {navItemList.map((navItem, i) => (
          <NavItem navItem={navItem} key={i} />
        ))}
      </div>
    </nav>
  );
}

해석

isSideNavOpen 으로 열렸는지 확인하고, 열리지 않았다면 translate-x를 '-'로 조작하여 안보이게 하다가
isSideNavOpen이 ture가 되면 translate-x가 사라져서 navbar가 보이게된다.

결과


4. 첫 블로그 글 작성..

뭐지? 뭘써야되지? 머릿속에 있는걸 전혀 못꺼내겠다...
개발 글을 보기만 하다가 막상 써보니 정말 어렵다...
난 이런 글들을 보면서 공부한거구나
개발 블로거들은 다들 대단하신 것 같다.

Notion에 공부한걸 적다가 여기다 적어보는건데 나만 보는게 아니라서 형식에 너무 신경쓰게된다.

Notion에서 공부한걸 적는것은 나쁘지 않았던거 같은데 적는곳이 달라서 그런지 잘 안써진다.

내일은 시간내서 Velog에 글을 어떻게 써야할지 알아봐야겠다.
최대 고민

  • CSS 이벤트의 결과를 이렇게 보여주니까 너무 별론거 같은데 어떻게 하면 더 잘 보여줄 수 있을까..?
  • 코드를 분석하는 글 자체가 엉성하고, 어색해
  • 나는 Velog에 뭘 쓰고 싶은거지? 공부? 개발일기? => 공부카테고리, 개발일기카테고리 나눠?
  • 설명할때마다 변수명을 그대로 써야해?
profile
뭐든지 할 수 있고, 뭐든지 될 수 있다.

0개의 댓글