length속성을 이용하여 배열의 길이에 따른 스타일 제어 (React-Typescript)

부모 컴포넌트로부터 props로 내려받는 배열의 길이가 각각 다른 상황. 배열의 요소들이 많아지면 컨테이너 박스에 여백이 부족하게 되어 깔끔하지 않은 디자인이 나오는 상황이 발생한다.

코드를 보자.

function MenuContainer({ props }: IProps) {
  return (
    <>
      <Menu>
        <div className={styles.menuContainer}>
          {props.initialTabs.map((tab) => {
            return (
              <div
                onClick={() => {
                  props.tabClickHandler(tab.id);
                }}
              >
                {tab.content}
              </div>
            );
          })}
        </div>
      </Menu>
    </>
  );
}

export default SideContainer;

나는 부모 컴포넌트로부터 받아온 배열 데이터를 map 메소드를 이용해 브라우저에 하나씩 보여주고 있다.(props.initialTabs.map부분) 배열의 길이가 길어지면 배열 요소들이 컨테이너 박스에 빼곡히 들어가게 되어 여백이 사라지게 된다.

이럴때 length속성을 이용하여 배열의 길이를 체크해주면 간단하게 해결해 줄 수 있다.

function MenuContainer({ props }: IProps) {

  console.log(props.initialTabs.length);
  // 배열의 길이가 나온다. 배열 요소가 3개일 시 콘솔에 3 출력
  
  return (
    <>
      <Menu>
        <div className={styles.menuContainer}>
          {props.initialTabs.map((tab) => {
            return (
              <div
                onClick={() => {
                  props.tabClickHandler(tab.id);
                }}
              >
                {tab.content}
              </div>
            );
          })}
        </div>
      </Menu>
    </>
  );
}

export default SideContainer;

length속성은 배열이 가진 요소의 개수를 나타내고, 문자열의 경우에는 문자열에 포함된 문자의 개수를 나타낸다.

이제 삼항연산자와 비교 연산자를 이용하면 간단하게 문제를 해결 할 수 있다.

function SideContainer({ props }: IProps) {

  console.log(props.initialTabs.length);
  // 배열의 길이가 나온다. 배열 요소가 3개일 시 3

  const menuStyle = `${styles.menuContainer} ${
    props.initialTabs.length >= 3 ? styles.longArray : null
  }`;
  // 배열의 길이가 3 이상일 시 longArray의 스타일을, 3미만일 시 기존 스타일 적용
  
  return (
    <>
      <Menu>
        <div className={menuStyle}>
        // 동적으로 선언해준 class의 이름(menuStyle)을 className 속성에 넣어주자
          {props.initialTabs.map((tab) => {
            return (
              <div
                onClick={() => {
                  props.tabClickHandler(tab.id);
                }}
              >
                {tab.content}
              </div>
            );
          })}
        </div>
      </Menu>
    </>
  );
}

export default SideContainer;

조건에 따라 달라지는 동적 class의 이름을 menuStyle이라는 변수에 저장하고 있다. 나의 배열데이터의 요소의 개수가 3 이상이라면 menuContainer라는 calss 이름에 longArray를 추가하고, 3보다 적다면 null을 반환(menuContainer라는 이름 그대로)하게 할 것이다.

  const menuStyle = `${styles.menuContainer} ${
    props.initialTabs.length >= 3 ? styles.longArray : null
  }`;

해당 menuStyle 변수를 className에 넣어 주면 끝!

        <div className={menuStyle}>
        // 동적으로 선언해준 class의 이름(menuStyle)을 className 속성에 넣어주자
          {props.initialTabs.map((tab) => {
            return (
              <div
                onClick={() => {
                  props.tabClickHandler(tab.id);
                }}
              >
                {tab.content}
              </div>
            );
          })}
        </div>

스타일 적용 (scss 모듈화 해서 사용중)

.menuContainer {
  display: flex;
  justify-content: space-around;
  div {
    cursor: pointer;
  }

  &.longArray {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
    justify-items: center;
  }
}