프로그래머스 데브코스 TIL - Day 52

 

✅ 오늘의 학습

📌 React (5)

 

- 컴포넌트 이해하기

Avatar / Slider / Progress

- 컴포넌트 연습하기

Divider / Skeleton / Input / Select

 

---

Avatar 컴포넌트

 

컴포넌트명 연결하여 사용하기

Avatar.Group 과 같은 형태로 컴포넌트를 사용하려면

베이스가 되는 Avatar컴포넌트에 따로 등록을 해주면 된다.

 

import AvatarGroup from "./AvatarGroup";

const Avatar = ({ }) => {};

Avatar.Group = AvatarGroup;

export default Avatar;

 

children 컴포넌트 가공

React.isValidElement와 cloneElement 활용하여 children을 가공하여 반환해줄 수 있다.

const AvatarGroup = ({ children, shape = "circle", size = 70, ...props }) => {
  const avatars = React.Children.toArray(children)
    .filter((element) => {
      if (React.isValidElement(element) && element.props.__TYPE === "Avatar") {
        return true;
      }
      return false;
    })
    .map((avatar, index, avatars) => {
      return React.cloneElement(avatar, {
        ...avatar.props,
        size,
        shape,
        style: {
          ...avatar.props.style,
          marginLeft: -size / 5,
          zIndex: avatars.length - index,
        },
      });
    });

  return <div style={{ paddingLeft: size / 5 }}>{avatars}</div>;
};

export default AvatarGroup;

 

onload에 이벤트 등록

onload에 이벤트를 등록하여 이미지가 로드되었을 때 함수를 실행시킬 수 있다.

useEffect(() => {
    const image = new Image();
    image.src = src;
    image.onload = () => setLoaded(true);
    // onload 이벤트는 이미지가 로드되었을 때 실행됨
  }, [src]);

 

객체 변수 활용

조건에 따라 변경되는 값을 따로 객체로 변수에 담아서 불러오는 방법으로

코드의 가독성을 높일 수 있다.

const ShapeToCssValue = {
  circle: "50%",
  round: "4px",
  square: "0px",
};
const AvatarWrapper = styled.div`
  border-radius: ${({ shape }) => ShapeToCssValue[shape]};
`;

 

defaultProps활용

보통은 함수의 매개변수 부분에서 default props를 지정하지만,

prop의 값을 통해  children 컴포넌트를 구분하여 사용하려면 defaultProps를 따로 지정해주어야 한다.

Avatar.defaultProps = {
  __TYPE: "Avatar",
};

 

 

Skeleton 컴포넌트

 

화면이 로딩될 때 UI의 형태를 보여주는 컴포넌트이다.

 

Skeleton 폴더 안에 공통적으로 들어가는 애니메이션과 CSS를 담당하는 Base컴포넌트를 만들고

보여줄 형태에 따라  Base컴포넌트를 연결해서 Box, Circle, Paragragh 컴포넌트들을 만들어 주는 형태로 구성할 수 있다.

 

Skeleton/Base.js

import styled from "@emotion/styled";

const Base = styled.div`
  display: inline-block;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #dfe3e8 0px, #efefef 40px, #dfe3e8 80px);
  background-size: 200% 100%;
  background-position: 0 center;
  animation: skeleton--zoom-in 0.2s ease-out, skeleton--loading 2s infinite linear;

  @keyframe skeleton--zoom-in {
    0% {
      opacity: 0l
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes skeleton--loading {
    0% {
      background-position-x: 100%;
    }
    50% {
      background-position-x: -100%;
    }
    100% {
      background-position-x: -100%;
    }
  }
`;

export default Base;

 

Skeleton/Box.js

import styled from "@emotion/styled";
import Base from "./Base";

// 컴포넌트를 받아서 쓸 수 있다.
const Box = styled(Base)`
  width: ${({ width }) => (typeof width === "number" ? `${width}px` : width)};
  height: ${({ height }) => (typeof height === "number" ? `${height}px` : height)};
`;

export default Box;

 

styled를 적용할 때 특정 태그가 아닌 컴포넌트를 받아서 사용할 수 있고,

Box컴포넌트에 전달하는 props의 값에 따라 style속성을 추가로 정의할 수 있다.

 

위처럼 Base컴포넌트를 받아서 Circle, Paragragh도 간단하게 만들 수 있었다.

 

 

select컴포넌트

option으로 받을 값을 props로 전달해주고 placeholder값이 있을 경우 

해당 배열의 앞에 option을 추가해주는 형태로 재사용성을 높일 수 있다.

  if (placeholder) {
    // hidden 속성을 사용해서 옵션선택 창에서는 보이지 않게 처리
    options.unshift(
      <option key="placeholder" value="" hidden> 
        {placeholder}
      </option>
    );
  }

 

 

---

✍ 느낀 점

다양한 컴포넌트를 만들어 보았지만 연달아서 강의만 들으며 따라서 만들다보니

무언가를 생각하기보다는 정보만 머리속에 넣는 느낌이 들었다.

그래서 이번 강의를 마치고 직접 생각해서 컴포넌트를 만들어봐야겠다는 생각이 들었다.

평소에 궁금해했던 부분이 몇가지 나오기도 했고 강의에서 다루는 내용들이 많아서

얼른 무언가 활용해서 사용해보고 싶다!!