Portfolio

🔍 배경 및 궁금증

예전부터 궁금한 게 있었다.

💡

만약 transition을 한다고 하자. 그리고 CSS in JS에서 prop 을 기반으로 transform을 시켰다고 하자.

그렇다면 궁금한 게 생긴다.

리렌더링이 됐다면, transition은 제대로 발생하지 않을 것이다.

이유는 transition은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용하는 요소이기 때문이다.

따라서 현재는 한 엘리먼트가 아닌, 다른 요소로 리렌더링을 하는 것이기 때문에 상태는 분절될 것이다. 고로 리렌더링은 하지 않을 것이다.

그렇게 나는 잠시 스트레스를 풀 겸, 괴상한 테스트를 진행해 보았다.

📢 테스트 결과


import React, { useState, useRef, useEffect } from 'react';
import styled from '@emotion/styled';

import ShowMoreButton from '@components/main/Sidebar/ShowMoreButton';
import SidebarHeader from '@components/main/Sidebar/SidebarHeader';
import UserList from '@components/main/Sidebar/UserList';
import UserCard from '@components/main/Sidebar/UserCard';
import ToggleButton from '@components/main/Sidebar/ToggleButton';

import { useUserInfo } from '@contexts/UserInfoProvider';
import colors from '@assets/colors';
import { css } from '@emotion/react';

const SidebarContainer = styled.aside`
  box-sizing: border-box;
  position: relative;
  transition: transform 0.3s;
  border-right: 1px solid ${colors.default.gray};
  background: #252b2e;
  padding: 16px 36px;
  width: 400px;
  height: 100%;
  color: #fff;
  ${({ isToggle }) =>
    isToggle &&
    css`
      position: absolute;
      transform: translateX(-330px);
    `}/* &.active {
    position: absolute;
    transform: translateX(-330px);
  } */
`;

const SidebarSpacer = styled.div`
  width: 70px;
  height: 100%;
`;

const MyInfoContainer = styled.div`
  position: relative;
  bottom: 20px;
  width: 100%;
`;

const SidebarInnerContainer = styled.div`
  &.active {
    display: none;
  }
`;

const Sidebar = ({ users, isAuth, usersAuth }) => {
  const { userInfo, fillUserInfo, emptyUserInfo } = useUserInfo();
  const [isToggle, setIsToggle] = useState(false);

  const sidebarRef = useRef(null);
  const toggleButtonRef = useRef(null);
  const sidebarInnerRef = useRef(null);

  const [isStepOut, setIsStepOut] = useState(false);

  useEffect(() => {
    setIsStepOut((state) => userInfo?.meta?.isStepOut ?? state);
  }, [userInfo]);

  const handleToggleButtonClick = () => {
    sidebarRef.current.classList.toggle('active');
    toggleButtonRef.current.classList.toggle('active');
    sidebarInnerRef.current.classList.toggle('active');
    setIsToggle((state) => !state);
  };

  return (
    <>
      <SidebarContainer
        ref={sidebarRef}
        className="sidebar"
        isToggle={isToggle}
      >
        <SidebarHeader>
          <ToggleButton
            ref={toggleButtonRef}
            onToggleClick={handleToggleButtonClick}
          />
        </SidebarHeader>
        <SidebarInnerContainer ref={sidebarInnerRef} className="sidebarInner">
          <UserList users={users} usersAuth={usersAuth} />
          <MyInfoContainer>
            <UserCard userInfo={userInfo} visible={isAuth}>
              <ShowMoreButton
                userInfo={userInfo}
                fillUserInfo={fillUserInfo}
                emptyUserInfo={emptyUserInfo}
                isStepOut={isStepOut}
                setIsStepOut={setIsStepOut}
              />
            </UserCard>
          </MyInfoContainer>
        </SidebarInnerContainer>
      </SidebarContainer>
      {isToggle && <SidebarSpacer />}
    </>
  );
};

export default Sidebar;

자, isToggle이 변경 되면 어떻게 될까?

결과적으로 봤을 때 너무나 잘 된다. 응...?

리렌더링이 되질 않았나?

내부 로직을 살펴보니, 아예 리렌더링이 되지를 않았다.

일단 해당 이슈에 대해서는 나중에 리렌더링이 되는 컴포넌트에 있어서 시도를 해보려 한다.

CSS in JS vs props 변경으로 인한 리렌더링, 어느 것이 우선할까?

🔍 배경 및 궁금증

📢 테스트 결과